diff --git a/src/components/albums/info/AlbumPeople.tsx b/src/components/albums/info/AlbumPeople.tsx index 0e78a01..ac2a719 100644 --- a/src/components/albums/info/AlbumPeople.tsx +++ b/src/components/albums/info/AlbumPeople.tsx @@ -35,6 +35,8 @@ export default function AlbumPeople({ album, onSelect }: AlbumPeopleProps) { const [loading, setLoading] = useState(false) const [errorMessage, setErrorMessage] = useState(null) const [hidingPerson, setHidingPerson] = useState(false) + const [selectionMode, setSelectionMode] = useState(false) + const [selectedPeople, setSelectedPeople] = useState([]) const selectedPerson = useMemo(() => { return people.find((person) => query.faceId === person.id) @@ -53,7 +55,7 @@ export default function AlbumPeople({ album, onSelect }: AlbumPeopleProps) { const handleHidePerson = (personId: string) => { setHidingPerson(true) updatePerson(personId, { isHidden: true }).then(() => { - setPeople(people.filter((person) => person.id !== personId)) + setPeople((oldPeople) => oldPeople.filter((person) => person.id !== personId)) router.push({ pathname, query: { @@ -66,6 +68,24 @@ export default function AlbumPeople({ album, onSelect }: AlbumPeopleProps) { }) } + const handleHideSelectedPeople = () => { + const promises = selectedPeople.map((personId) => { + return handleHidePerson(personId) + }) + Promise.all(promises).then(() => { + setSelectedPeople([]) + setSelectionMode(false) + }) + } + + const handleBulkSelect = (personId: string) => { + if (selectedPeople.includes(personId)) { + setSelectedPeople(selectedPeople.filter((id) => id !== personId)) + } else { + setSelectedPeople([...selectedPeople, personId]) + } + } + useEffect(() => { fetchPeople() }, []) @@ -88,7 +108,7 @@ export default function AlbumPeople({ album, onSelect }: AlbumPeopleProps) {
- {selectedPerson && ( + {selectedPerson ? ( <>
@@ -112,7 +132,6 @@ export default function AlbumPeople({ album, onSelect }: AlbumPeopleProps) { isHidden: false, updatedAt: new Date() }} onComplete={(mergedPerson) => { - console.log(mergedPerson) router.push({ pathname, query: { @@ -127,6 +146,20 @@ export default function AlbumPeople({ album, onSelect }: AlbumPeopleProps) {
+ ) : ( +
+ {selectedPeople.length > 0 && ( + <> +

{selectedPeople.length} people selected

+ + + )} + +
)}
@@ -136,12 +169,20 @@ export default function AlbumPeople({ album, onSelect }: AlbumPeopleProps) {
onSelect(person.id)} + onClick={() => { + if (selectionMode) { + handleBulkSelect(person.id) + } else { + onSelect(person.id) + } + }} role="button" className={ cn("cursor-pointer h-16 w-16 min-w-16 rounded border-2", !!person.name ? "border-blue-500" : "border-gray-500", - selectedPerson?.id === person.id ? "border-green-500" : "" + selectedPerson?.id === person.id ? "border-green-500" : "", + selectionMode ? "border-blue-500" : "", + selectedPeople.includes(person.id) ? "border-green-500" : "" ) } src={PERSON_THUBNAIL_PATH(person.id)} alt={person.name} />