Move

web/apps/photos/src/components/FilesDownloadProgress.tsx

@@ -19,6 +19,17 @@ export interface FilesDownloadProgressAttributes {
 interface FilesDownloadProgressProps {
     attributesList: FilesDownloadProgressAttributes[];
     setAttributesList: (value: FilesDownloadProgressAttributes[]) => void;
+    /**
+     * Called when the hidden section should be shown.
+     *
+     * This triggers the display of the dialog to authenticate the user, and the
+     * returned promise when (and only if) the user successfully reauthenticates.
+     *
+     * Since the hidden section is only relevant in the context of the photos
+     * app where there is a logged in user, this callback can be omitted in the
+     * context of the public albums app.
+     */
+    onShowHiddenSection?: () => Promise<void>;
 }
 
 export const isFilesDownloadStarted = (
@@ -55,6 +66,7 @@ export const isFilesDownloadCancelled = (
 export const FilesDownloadProgress: React.FC<FilesDownloadProgressProps> = ({
     attributesList,
     setAttributesList,
+    onShowHiddenSection,
 }) => {
     const { showMiniDialog } = useBaseContext();
     const galleryContext = useContext(GalleryContext);
@@ -100,7 +112,7 @@ export const FilesDownloadProgress: React.FC<FilesDownloadProgressProps> = ({
             electron.openDirectory(attributes.downloadDirPath);
         } else {
             if (attributes.isHidden) {
-                galleryContext.openHiddenSection(() => {
+                void onShowHiddenSection().then(() => {
                     galleryContext.setActiveCollectionID(
                         attributes.collectionID,
                     );

web/apps/photos/src/components/Sidebar.tsx

@@ -111,11 +111,9 @@ import { usePhotosAppContext } from "ente-new/photos/types/context";
 import { initiateEmail, openURL } from "ente-new/photos/utils/web";
 import { t } from "i18next";
 import { useRouter } from "next/router";
-import { GalleryContext } from "pages/gallery";
 import React, {
     MouseEventHandler,
     useCallback,
-    useContext,
     useEffect,
     useMemo,
     useState,
@@ -146,6 +144,14 @@ type SidebarProps = ModalVisibilityProps & {
      * {@link collectionSummaryID} should be shown.
      */
     onShowCollectionSummary: (collectionSummaryID: number) => void;
+    /**
+     * Called when the hidden section should be shown.
+     *
+     * This triggers the display of the dialog to authenticate the user, exactly
+     * as if {@link onAuthenticateUser} were called. Then, on successful
+     * authentication, the gallery will switch to the hidden section.
+     */
+    onShowHiddenSection: () => Promise<void>;
     /**
      * Called when the export dialog should be shown.
      */
@@ -155,6 +161,9 @@ type SidebarProps = ModalVisibilityProps & {
      *
      * This will be invoked before sensitive actions, and the action will only
      * proceed if the promise returned by this function is fulfilled.
+     *
+     * On errors or if the user cancels the reauthentication, the promise will
+     * not settle.
      */
     onAuthenticateUser: () => Promise<void>;
 };
@@ -166,6 +175,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
     uncategorizedCollectionSummaryID,
     onShowPlanSelector,
     onShowCollectionSummary,
+    onShowHiddenSection,
     onShowExport,
     onAuthenticateUser,
 }) => (
@@ -179,6 +189,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
                     collectionSummaries,
                     uncategorizedCollectionSummaryID,
                     onShowCollectionSummary,
+                    onShowHiddenSection,
                 }}
             />
             <UtilitySection
@@ -450,6 +461,7 @@ type ShortcutSectionProps = SectionProps &
         | "collectionSummaries"
         | "uncategorizedCollectionSummaryID"
         | "onShowCollectionSummary"
+        | "onShowHiddenSection"
     >;
 
 const ShortcutSection: React.FC<ShortcutSectionProps> = ({
@@ -457,9 +469,8 @@ const ShortcutSection: React.FC<ShortcutSectionProps> = ({
     collectionSummaries,
     uncategorizedCollectionSummaryID,
     onShowCollectionSummary,
+    onShowHiddenSection,
 }) => {
-    const galleryContext = useContext(GalleryContext);
-
     const openUncategorizedSection = () => {
         onShowCollectionSummary(uncategorizedCollectionSummaryID);
         onCloseSidebar();
@@ -475,11 +486,8 @@ const ShortcutSection: React.FC<ShortcutSectionProps> = ({
         onCloseSidebar();
     };
 
-    const openHiddenSection = () => {
-        galleryContext.openHiddenSection(() => {
-            onCloseSidebar();
-        });
-    };
+    const openHiddenSection = () =>
+        void onShowHiddenSection().then(onCloseSidebar);
 
     const summaryCaption = (collectionSummaryID: number) =>
         collectionSummaries.get(collectionSummaryID)?.fileCount.toString();

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

@@ -135,7 +135,6 @@ const defaultGalleryContext: GalleryContextType = {
     user: null,
     userIDToEmailMap: null,
     emailList: null,
-    openHiddenSection: () => null,
     selectedFile: null,
 };
 
@@ -769,14 +768,10 @@ const Page: React.FC = () => {
             ? dispatch({ type: "showPeople" })
             : dispatch({ type: "showAlbums" });
 
-    const openHiddenSection: GalleryContextType["openHiddenSection"] = (
-        callback,
-    ) => {
-        authenticateUser().then(() => {
-            dispatch({ type: "showHidden" });
-            callback?.();
-        });
-    };
+    const handleShowHiddenSection = useCallback(
+        () => authenticateUser().then(() => dispatch({ type: "showHidden" })),
+        [],
+    );
 
     const handleToggleFavorite = useCallback(
         async (file: EnteFile) => {
@@ -886,7 +881,6 @@ const Page: React.FC = () => {
                 // TODO(RE): Rename
                 userIDToEmailMap: state.emailByUserID,
                 emailList: state.shareSuggestionEmails,
-                openHiddenSection,
                 selectedFile: selected,
             }}
         >
@@ -922,6 +916,7 @@ const Page: React.FC = () => {
                 <FilesDownloadProgress
                     attributesList={filesDownloadProgressAttributesList}
                     setAttributesList={setFilesDownloadProgressAttributesList}
+                    onShowHiddenSection={handleShowHiddenSection}
                 />
                 <FixCreationTime
                     {...fixCreationTimeVisibilityProps}
@@ -1058,6 +1053,7 @@ const Page: React.FC = () => {
                     }
                     onShowPlanSelector={showPlanSelector}
                     onShowCollectionSummary={handleShowCollectionSummary}
+                    onShowHiddenSection={handleShowHiddenSection}
                     onShowExport={showExport}
                     onAuthenticateUser={authenticateUser}
                 />

web/apps/photos/src/types/gallery/index.ts

@@ -44,6 +44,5 @@ export interface GalleryContextType {
     user: User;
     userIDToEmailMap: Map<number, string>;
     emailList: string[];
-    openHiddenSection: (callback?: () => void) => void;
     selectedFile: SelectedState;
 }