Use

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

@@ -129,6 +129,12 @@ import { testUpload } from "../../tests/upload.test";
 import { SubscriptionCard } from "./SubscriptionCard";
 
 type SidebarProps = ModalVisibilityProps & {
+    /**
+     * The latest UI collections.
+     *
+     * These are used to obtain data about the uncategorized, hidden and other
+     * items shown in the shortcut section within the sidebar.
+     */
     collectionSummaries: CollectionSummaries;
 };
 
@@ -138,15 +144,15 @@ export const Sidebar: React.FC<SidebarProps> = ({
     collectionSummaries,
 }) => (
     <RootSidebarDrawer open={open} onClose={onClose}>
-        <HeaderSection closeSidebar={onClose} />
-        <UserDetailsSection sidebarView={open} />
+        <HeaderSection onCloseSidebar={onClose} />
+        <UserDetailsSection sidebarOpen={open} />
         <Stack sx={{ gap: 0.5, mb: 3 }}>
             <ShortcutSection
-                closeSidebar={onClose}
+                onCloseSidebar={onClose}
                 collectionSummaries={collectionSummaries}
             />
-            <UtilitySection closeSidebar={onClose} />
-            <HelpSection closeSidebar={onClose} />
+            <UtilitySection onCloseSidebar={onClose} />
+            <HelpSection onCloseSidebar={onClose} />
             <Divider sx={{ my: "2px" }} />
             <ExitSection />
             <InfoSection />
@@ -160,31 +166,29 @@ const RootSidebarDrawer = styled(SidebarDrawer)(({ theme }) => ({
     },
 }));
 
-interface HeaderSectionProps {
-    closeSidebar: () => void;
+interface SectionProps {
+    onCloseSidebar: SidebarProps["onClose"];
 }
 
-const HeaderSection: React.FC<HeaderSectionProps> = ({ closeSidebar }) => {
-    return (
-        <SpacedRow sx={{ my: "4px 4px", pl: "12px" }}>
-            <EnteLogo />
-            <IconButton
-                aria-label={t("close")}
-                onClick={closeSidebar}
-                color="secondary"
-            >
-                <CloseIcon fontSize="small" />
-            </IconButton>
-        </SpacedRow>
-    );
-};
+const HeaderSection: React.FC<SectionProps> = ({ onCloseSidebar }) => (
+    <SpacedRow sx={{ my: "4px 4px", pl: "12px" }}>
+        <EnteLogo />
+        <IconButton
+            aria-label={t("close")}
+            onClick={onCloseSidebar}
+            color="secondary"
+        >
+            <CloseIcon fontSize="small" />
+        </IconButton>
+    </SpacedRow>
+);
 
 interface UserDetailsSectionProps {
-    sidebarView: boolean;
+    sidebarOpen: boolean;
 }
 
 const UserDetailsSection: React.FC<UserDetailsSectionProps> = ({
-    sidebarView,
+    sidebarOpen,
 }) => {
     const galleryContext = useContext(GalleryContext);
     const userDetails = useUserDetailsSnapshot();
@@ -197,8 +201,8 @@ const UserDetailsSection: React.FC<UserDetailsSectionProps> = ({
         setMemberSubscriptionManageView(false);
 
     useEffect(() => {
-        if (sidebarView) void syncUserDetails();
-    }, [sidebarView]);
+        if (sidebarOpen) void syncUserDetails();
+    }, [sidebarOpen]);
 
     const isNonAdminFamilyMember = useMemo(
         () =>
@@ -417,13 +421,12 @@ function MemberSubscriptionManage({ open, userDetails, onClose }) {
     );
 }
 
-interface ShortcutSectionProps {
-    closeSidebar: () => void;
-    collectionSummaries: CollectionSummaries;
-}
+type ShortcutSectionProps = SectionProps & {
+    collectionSummaries: SidebarProps["collectionSummaries"];
+};
 
 const ShortcutSection: React.FC<ShortcutSectionProps> = ({
-    closeSidebar,
+    onCloseSidebar,
     collectionSummaries,
 }) => {
     const galleryContext = useContext(GalleryContext);
@@ -431,35 +434,31 @@ const ShortcutSection: React.FC<ShortcutSectionProps> = ({
         useState<number>();
 
     useEffect(() => {
-        const main = async () => {
-            const unCategorizedCollection = await getUncategorizedCollection();
-            if (unCategorizedCollection) {
-                setUncategorizedCollectionID(unCategorizedCollection.id);
-            } else {
-                setUncategorizedCollectionID(DUMMY_UNCATEGORIZED_COLLECTION);
-            }
-        };
-        main();
+        void getUncategorizedCollection().then((uncat) =>
+            setUncategorizedCollectionID(
+                uncat?.id ?? DUMMY_UNCATEGORIZED_COLLECTION,
+            ),
+        );
     }, []);
 
     const openUncategorizedSection = () => {
         galleryContext.setActiveCollectionID(uncategorizedCollectionId);
-        closeSidebar();
+        onCloseSidebar();
     };
 
     const openTrashSection = () => {
         galleryContext.setActiveCollectionID(TRASH_SECTION);
-        closeSidebar();
+        onCloseSidebar();
     };
 
     const openArchiveSection = () => {
         galleryContext.setActiveCollectionID(ARCHIVE_SECTION);
-        closeSidebar();
+        onCloseSidebar();
     };
 
     const openHiddenSection = () => {
         galleryContext.openHiddenSection(() => {
-            closeSidebar();
+            onCloseSidebar();
         });
     };
 
@@ -506,12 +505,11 @@ const ShortcutSection: React.FC<ShortcutSectionProps> = ({
     );
 };
 
-const UtilitySection: React.FC<Pick<SidebarProps, "closeSidebar">> = ({
-    closeSidebar,
-}) => {
-    const router = useRouter();
+const UtilitySection: React.FC<SectionProps> = ({ onCloseSidebar }) => {
     const { watchFolderView, setWatchFolderView } = usePhotosAppContext();
 
+    const router = useRouter();
+
     const { show: showAccount, props: accountVisibilityProps } =
         useModalVisibility();
     const { show: showPreferences, props: preferencesVisibilityProps } =
@@ -552,18 +550,16 @@ const UtilitySection: React.FC<Pick<SidebarProps, "closeSidebar">> = ({
                     onClose={handleCloseWatchFolder}
                 />
             )}
-            <Account {...accountVisibilityProps} onRootClose={closeSidebar} />
+            <Account {...accountVisibilityProps} onRootClose={onCloseSidebar} />
             <Preferences
                 {...preferencesVisibilityProps}
-                onRootClose={closeSidebar}
+                onRootClose={onCloseSidebar}
             />
         </>
     );
 };
 
-const HelpSection: React.FC<Pick<SidebarProps, "closeSidebar">> = ({
-    closeSidebar,
-}) => {
+const HelpSection: React.FC<SectionProps> = ({ onCloseSidebar }) => {
     const { showMiniDialog } = useBaseContext();
     const { openExportModal } = useContext(GalleryContext);
 
@@ -591,7 +587,7 @@ const HelpSection: React.FC<Pick<SidebarProps, "closeSidebar">> = ({
                 }
                 onClick={handleExport}
             />
-            <Help {...helpVisibilityProps} onRootClose={closeSidebar} />
+            <Help {...helpVisibilityProps} onRootClose={onCloseSidebar} />
         </>
     );
 };

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

@@ -208,11 +208,6 @@ const Page: React.FC = () => {
     const [uploadTypeSelectorIntent, setUploadTypeSelectorIntent] =
         useState<UploadTypeSelectorIntent>("upload");
 
-    const [sidebarView, setSidebarView] = useState(false);
-
-    const closeSidebar = () => setSidebarView(false);
-    const openSidebar = () => setSidebarView(true);
-
     const [authenticateUserModalView, setAuthenticateUserModalView] =
         useState(false);
 
@@ -249,6 +244,8 @@ const Page: React.FC = () => {
     const [collectionSelectorAttributes, setCollectionSelectorAttributes] =
         useState<CollectionSelectorAttributes | undefined>();
 
+    const { show: showSidebar, props: sidebarVisibilityProps } =
+        useModalVisibility();
     const { show: showPlanSelector, props: planSelectorVisibilityProps } =
         useModalVisibility();
     const { show: showWhatsNew, props: whatsNewVisibilityProps } =
@@ -447,10 +444,10 @@ const Page: React.FC = () => {
         }
         // if any of the modals are open, don't select all
         if (
-            sidebarView ||
             uploadTypeSelectorView ||
             openCollectionSelector ||
             collectionNamerView ||
+            sidebarVisibilityProps.open ||
             planSelectorVisibilityProps.open ||
             fixCreationTimeVisibilityProps.open ||
             exportVisibilityProps.open ||
@@ -927,21 +924,19 @@ const Page: React.FC = () => {
                         />
                     ) : (
                         <NormalNavbarContents
-                            {...{
-                                openSidebar,
-                                openUploader,
-                                isInSearchMode,
-                                onShowSearchInput: () =>
-                                    dispatch({ type: "enterSearchMode" }),
-                                onSelectSearchOption: handleSelectSearchOption,
-                                onSelectPeople: () =>
-                                    dispatch({ type: "showPeople" }),
-                                onSelectPerson: (personID) =>
-                                    dispatch({
-                                        type: "showPerson",
-                                        personID,
-                                    }),
-                            }}
+                            {...{ isInSearchMode }}
+                            onSidebar={showSidebar}
+                            onUpload={openUploader}
+                            onShowSearchInput={() =>
+                                dispatch({ type: "enterSearchMode" })
+                            }
+                            onSelectSearchOption={handleSelectSearchOption}
+                            onSelectPeople={() =>
+                                dispatch({ type: "showPeople" })
+                            }
+                            onSelectPerson={(personID) =>
+                                dispatch({ type: "showPerson", personID })
+                            }
                         />
                     )}
                 </NavbarBase>
@@ -1002,9 +997,8 @@ const Page: React.FC = () => {
                     }}
                 />
                 <Sidebar
-                    collectionSummaries={collectionSummaries}
-                    sidebarView={sidebarView}
-                    closeSidebar={closeSidebar}
+                    {...sidebarVisibilityProps}
+                    {...{ collectionSummaries }}
                 />
                 <WhatsNew {...whatsNewVisibilityProps} />
                 {!isInSearchMode &&
@@ -1099,19 +1093,25 @@ const preloadImage = (imgBasePath: string) => {
 };
 
 type NormalNavbarContentsProps = SearchBarProps & {
-    openSidebar: () => void;
-    openUploader: () => void;
+    /**
+     * Called when the user activates the sidebar icon.
+     */
+    onSidebar: () => void;
+    /**
+     * Called when the user activates the upload button.
+     */
+    onUpload: () => void;
 };
 
 const NormalNavbarContents: React.FC<NormalNavbarContentsProps> = ({
-    openSidebar,
-    openUploader,
+    onSidebar,
+    onUpload,
     ...props
 }) => (
     <>
-        {!props.isInSearchMode && <SidebarButton onClick={openSidebar} />}
+        {!props.isInSearchMode && <SidebarButton onClick={onSidebar} />}
         <SearchBar {...props} />
-        {!props.isInSearchMode && <UploadButton onClick={openUploader} />}
+        {!props.isInSearchMode && <UploadButton onClick={onUpload} />}
     </>
 );