feat: added filters in geo heatmap

Signed-off-by: Varun Raj <varun@skcript.com>

src/components/shared/AlbumDropdown.tsx

@@ -0,0 +1,63 @@
+import { listAlbums } from '@/handlers/api/album.handler';
+import { IAlbum } from '@/types/album';
+import React, { useEffect, useState } from 'react'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
+import { X } from 'lucide-react';
+
+interface IAlbumDropdownProps {
+  albumIds?: string[];
+  onChange: (albumIds: string[]) => void;
+}
+export default function AlbumDropdown({ albumIds, onChange }: IAlbumDropdownProps) {
+  const [albums, setAlbums] = useState<IAlbum[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [selectedAlbumIds, setSelectedAlbumIds] = useState(albumIds);
+
+  const fetchAlbums = async () => {
+    setLoading(true);
+    return listAlbums({
+      sortBy: "createdAt",
+      sortOrder: "desc",
+    }).then((albums) => setAlbums(albums)).catch((error) => setError(error)).finally(() => setLoading(false)) ;
+  }
+
+  useEffect(() => {
+    fetchAlbums();
+  }, []);
+
+
+  useEffect(() => {
+    if (albumIds) {
+      setSelectedAlbumIds(albumIds);
+    } else {
+      setSelectedAlbumIds([]);
+    }
+  }, [albumIds]);
+
+  return (
+    <div>
+    <Select 
+      onValueChange={(value) => {
+        if (value) {
+          setSelectedAlbumIds([value])
+          onChange([value])
+        } else {
+          setSelectedAlbumIds([])
+          onChange([])
+        }
+      }} 
+      value={selectedAlbumIds?.[0] ?? ""}
+    >   
+      <SelectTrigger className='!p-2'>
+        <SelectValue placeholder={'Select album'} />
+      </SelectTrigger>
+      <SelectContent>
+        {albums.map((album) => (
+          <SelectItem key={album.id} value={album.id}>{album.albumName}</SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+    </div>
+  )
+}

src/components/shared/PeopleDropdown.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react'
+import { IPerson } from '@/types/person';
+import { IPersonListFilters, listPeople } from '@/handlers/api/people.handler';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+
+interface IPeopleDropdownProps {
+  peopleIds?: string[];
+  onChange: (peopleIds: string[]) => void;
+}
+export default function PeopleDropdown({ peopleIds, onChange }: IPeopleDropdownProps) {
+  const [people, setPeople] = useState<IPerson[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [selectedPeopleIds, setSelectedPeopleIds] = useState(peopleIds);
+  const [filters, setFilters] = useState<IPersonListFilters>({
+    page: 1,
+    perPage: 10000,
+    sort: "createdAt",
+    sortOrder: "desc",
+    visibility: "visible",
+    type: "named",
+  });
+
+  const fetchPeople = async () => {
+    setLoading(true);
+    return listPeople(filters).then((people) => setPeople(people.people)).catch((error) => setError(error)).finally(() => setLoading(false));
+  }
+
+  useEffect(() => {
+    fetchPeople();
+  }, [filters]);
+
+  useEffect(() => {
+    if (peopleIds) {
+      setSelectedPeopleIds(peopleIds);
+    } else {
+      setSelectedPeopleIds([]);
+    }
+  }, [peopleIds]);
+
+  return (
+    <div>
+      <Select onValueChange={(value) => {
+        if (value) {
+          setSelectedPeopleIds([value])
+          onChange([value])
+        } else {
+          setSelectedPeopleIds([])
+          onChange([])
+        }
+      }} value={selectedPeopleIds?.[0] ?? ""}>
+        <SelectTrigger className='!p-2'>
+          <SelectValue placeholder={'Select people'} />
+        </SelectTrigger>
+        <SelectContent >
+          {people.map((person) => (
+            <SelectItem key={person.id} value={person.id}>{person.name}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}