use activeCollection state for navigation between collections

src/components/pages/gallery/Collections.tsx

@@ -18,7 +18,7 @@ import OptionIcon, { OptionIconWrapper } from './OptionIcon';
 interface CollectionProps {
     collections: Collection[];
     selected?: number;
-    selectCollection: (id?: number) => void;
+    setActiveCollection: (id?: number) => void;
     setDialogMessage: SetDialogMessage;
     syncWithRemote: () => Promise<void>;
     setCollectionNamerAttributes: SetCollectionNamerAttributes;
@@ -69,7 +69,7 @@ const Chip = styled.button<{ active: boolean }>`
 `;
 
 export default function Collections(props: CollectionProps) {
-    const { selected, collections, selectCollection } = props;
+    const { selected, collections, setActiveCollection } = props;
     const [selectedCollectionID, setSelectedCollectionID] =
         useState<number>(null);
     const collectionRef = useRef<HTMLDivElement>(null);
@@ -102,7 +102,7 @@ export default function Collections(props: CollectionProps) {
 
     const clickHandler = (collection?: Collection) => () => {
         setSelectedCollectionID(collection?.id);
-        selectCollection(collection?.id);
+        setActiveCollection(collection?.id);
     };
 
     const user: User = getData(LS_KEYS.USER);
@@ -119,7 +119,7 @@ export default function Collections(props: CollectionProps) {
         setDialogMessage: props.setDialogMessage,
         startLoadingBar: props.startLoadingBar,
         showCollectionShareModal: setCollectionShareModalView.bind(null, true),
-        redirectToAll: selectCollection.bind(null, null),
+        redirectToAll: setActiveCollection.bind(null, 0),
     });
 
     const scrollCollection = (direction: SCROLL_DIRECTION) => () => {

src/pages/gallery/index.tsx

@@ -162,6 +162,7 @@ export default function Gallery() {
     const appContext = useContext(AppContext);
     const [collectionFilesCount, setCollectionFilesCount] =
         useState<Map<number, number>>();
+    const [activeCollection, setActiveCollection] = useState(0);
 
     useEffect(() => {
         const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
@@ -196,13 +197,22 @@ export default function Gallery() {
     }, []);
 
     useEffect(() => setDialogView(true), [dialogMessage]);
+
     useEffect(() => {
         if (collectionSelectorAttributes) {
             setCollectionSelectorView(true);
         }
     }, [collectionSelectorAttributes]);
+
     useEffect(() => setCollectionNamerView(true), [collectionNamerAttributes]);
 
+    useEffect(() => {
+        const href = `/gallery${
+            activeCollection ? `?collection=${activeCollection.toString()}` : ''
+        }`;
+        router.push(href, undefined, { shallow: true });
+    }, [activeCollection]);
+
     const syncWithRemote = async (force = false, silent = false) => {
         if (syncInProgress.current && !force) {
             resync.current = true;
@@ -272,11 +282,6 @@ export default function Gallery() {
         setSelected({ count: 0 });
     };
 
-    const selectCollection = (id?: number) => {
-        const href = `/gallery${id ? `?collection=${id.toString()}` : ''}`;
-        router.push(href, undefined, { shallow: true });
-    };
-
     if (!files) {
         return <div />;
     }
@@ -292,7 +297,7 @@ export default function Gallery() {
                 files,
                 clearSelection,
                 syncWithRemote,
-                selectCollection,
+                setActiveCollection,
                 collectionName,
                 collection
             );
@@ -402,7 +407,7 @@ export default function Gallery() {
                     collections={collections}
                     searchMode={searchMode}
                     selected={Number(router.query.collection)}
-                    selectCollection={selectCollection}
+                    setActiveCollection={setActiveCollection}
                     syncWithRemote={syncWithRemote}
                     setDialogMessage={setDialogMessage}
                     setCollectionNamerAttributes={setCollectionNamerAttributes}

src/utils/collection/index.ts

@@ -13,7 +13,7 @@ export async function addFilesToCollection(
     files: File[],
     clearSelection: () => void,
     syncWithRemote: () => Promise<void>,
-    selectCollection: (id: number) => void,
+    setActiveCollection: (id: number) => void,
     collectionName: string,
     existingCollection: Collection
 ) {
@@ -31,7 +31,7 @@ export async function addFilesToCollection(
     await addToCollection(collection, selectedFiles);
     clearSelection();
     await syncWithRemote();
-    selectCollection(collection.id);
+    setActiveCollection(collection.id);
 }
 
 export function getSelectedCollection(collectionID: number, collections) {