Move

web/apps/photos/src/pages/gallery.tsx

@@ -110,7 +110,6 @@ import {
     useCallback,
     useContext,
     useEffect,
-    useMemo,
     useRef,
     useState,
 } from "react";
@@ -305,7 +304,6 @@ export default function Gallery() {
     const user = state.user;
     const familyData = state.familyData;
     const collections = state.collections;
-    const hiddenCollections = state.hiddenCollections;
     const files = state.files;
     const hiddenFiles = state.hiddenFiles;
     const trashedFiles = state.trashedFiles;
@@ -319,6 +317,7 @@ export default function Gallery() {
     const tempHiddenFileIDs = state.tempHiddenFileIDs;
     const barMode = state.barMode ?? "albums";
     const activeCollectionID = state.activeCollectionID;
+    const activeCollection = state.activeCollection;
     const activePersonID = state.activePersonID;
     const isInSearchMode = state.isInSearchMode;
 
@@ -475,15 +474,6 @@ export default function Gallery() {
         }
     }, [isInSearchMode, selectedSearchOption]);
 
-    const activeCollection = useMemo(() => {
-        if (!collections || !hiddenCollections) {
-            return null;
-        }
-        return [...collections, ...hiddenCollections].find(
-            (collection) => collection.id === activeCollectionID,
-        );
-    }, [collections, activeCollectionID]);
-
     // TODO: Make this a normal useEffect.
     useMemoSingleThreaded(async () => {
         if (

web/packages/new/photos/components/gallery/reducer.ts

@@ -214,6 +214,16 @@ export interface GalleryState {
      */
     focus: GalleryFocus | undefined;
     activeCollectionID: number | undefined;
+    /**
+     * If the active collection ID is for a collection and not a
+     * pseudo-collection, this property will be set to the corresponding
+     * {@link Collection}.
+     *
+     * It is guaranteed that this will be one of the {@link collections} (when
+     * we are in the "albums" focus) or {@link hiddenCollections} (when we are
+     * in "hidden-albums" focus).
+     */
+    activeCollection: Collection | undefined;
     /**
      * The currently selected person, if any.
      *
@@ -329,6 +339,7 @@ const initialGalleryState: GalleryState = {
     barMode: undefined,
     focus: undefined,
     activeCollectionID: undefined,
+    activeCollection: undefined,
     activePersonID: undefined,
     filteredData: [],
     activePerson: undefined,
@@ -586,6 +597,7 @@ const galleryReducer: React.Reducer<GalleryState, GalleryAction> = (
                 ...state,
                 barMode: "albums",
                 activeCollectionID: ALL_SECTION,
+                activeCollection: undefined,
                 isInSearchMode: false,
                 searchResults: undefined,
             };
@@ -594,6 +606,7 @@ const galleryReducer: React.Reducer<GalleryState, GalleryAction> = (
                 ...state,
                 barMode: "hidden-albums",
                 activeCollectionID: HIDDEN_ITEMS_SECTION,
+                activeCollection: undefined,
                 isInSearchMode: false,
                 searchResults: undefined,
             };
@@ -608,6 +621,9 @@ const galleryReducer: React.Reducer<GalleryState, GalleryAction> = (
                         ? "hidden-albums"
                         : "albums",
                 activeCollectionID: action.collectionSummaryID ?? ALL_SECTION,
+                activeCollection: state.collections
+                    .concat(state.hiddenCollections)
+                    .find(({ id }) => id === action.collectionSummaryID),
                 isInSearchMode: false,
                 searchResults: undefined,
             };
@@ -963,19 +979,15 @@ export const deriveFilteredFilesAlbumishFocus = (state: GalleryState) => {
  */
 export const deriveFilteredFilesAlbumFocus = (state: GalleryState) => {
     const {
-        collections,
         files,
         archivedCollectionIDs,
         hiddenFileIDs,
         tempDeletedFileIDs,
         tempHiddenFileIDs,
         activeCollectionID,
+        activeCollection,
     } = state;
 
-    const activeCollection = collections.find(
-        (collection) => collection.id === activeCollectionID,
-    );
-
     const filteredFiles = files.filter((file) => {
         if (tempDeletedFileIDs.has(file.id)) return false;
         if (hiddenFileIDs.has(file.id)) return false;
@@ -1028,17 +1040,13 @@ export const deriveFilteredFilesTrash = ({
  */
 export const deriveFilteredFilesHiddenAlbumsFocus = (state: GalleryState) => {
     const {
-        hiddenCollections,
         hiddenFiles,
         defaultHiddenCollectionIDs,
         tempDeletedFileIDs,
         activeCollectionID,
+        activeCollection,
     } = state;
 
-    const activeCollection = hiddenCollections.find(
-        (collection) => collection.id === activeCollectionID,
-    );
-
     const filteredFiles = hiddenFiles.filter((file) => {
         if (tempDeletedFileIDs.has(file.id)) return false;