diff --git a/web/apps/photos/src/components/Collections/CollectionSelector/index.tsx b/web/apps/photos/src/components/Collections/CollectionSelector/index.tsx index b9ea88639f..794c97606f 100644 --- a/web/apps/photos/src/components/Collections/CollectionSelector/index.tsx +++ b/web/apps/photos/src/components/Collections/CollectionSelector/index.tsx @@ -39,6 +39,7 @@ interface Props { collections: Collection[]; collectionSummaries: CollectionSummaries; } + function CollectionSelector({ attributes, collectionSummaries, @@ -46,7 +47,7 @@ function CollectionSelector({ ...props }: Props) { const appContext = useContext(AppContext); - + const [searchQuery, setSearchQuery] = useState(""); const [collectionsToShow, setCollectionsToShow] = useState< CollectionSummary[] >([]); @@ -81,6 +82,7 @@ function CollectionSelector({ return isMoveToAllowedCollection(type); } }) + .sort((a, b) => { return a.name.localeCompare(b.name); }) @@ -89,15 +91,24 @@ function CollectionSelector({ COLLECTION_SORT_ORDER.get(a.type) - COLLECTION_SORT_ORDER.get(b.type) ); - }); + }) + .filter((collection) => + collection.name + .toLowerCase() + .includes(searchQuery.toLowerCase()), + ); if (collectionsToShow.length === 0) { - props.onClose(); - attributes.showNextModal(); + if (searchQuery !== "") { + return console.log("No Albums with that name..."); + } else { + props.onClose(); + attributes.showNextModal(); + } } setCollectionsToShow(collectionsToShow); }; main(); - }, [collectionSummaries, attributes, props.open]); + }, [collectionSummaries, attributes, props.open, searchQuery]); if (!collectionsToShow?.length) { return <>; @@ -121,6 +132,12 @@ function CollectionSelector({ props.onClose(); }; + const handleSearchInputChange = (e) => { + if (e) { + setSearchQuery(e.target.value); + } else console.log("No collections to show....."); + }; + return ( +