Update

2025-07-08 10:37:40 +05:30
parent 5b175b3734
commit 68d831ef3d
4 changed files with 91 additions and 126 deletions
--- a/web/apps/photos/src/components/FileList.tsx
+++ b/web/apps/photos/src/components/FileList.tsx
@@ -30,7 +30,7 @@ import { TileBottomTextOverlay } from "ente-new/photos/components/Tiles";
 import { PseudoCollectionID } from "ente-new/photos/services/collection-summary";
 import { t } from "i18next";
 import memoize from "memoize-one";
-import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import {
    VariableSizeList as List,
    type ListChildComponentProps,
@@ -41,7 +41,6 @@ import {
    handleSelectCreator,
    handleSelectCreatorMulti,
 } from "utils/photoFrame";
-import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery";

 export const DATE_CONTAINER_HEIGHT = 48;
 export const SPACE_BTW_DATES = 44;
@@ -210,10 +209,6 @@ export const FileList: React.FC<FileListProps> = ({
    emailByUserID,
    onItemClick,
 }) => {
-    const publicCollectionGalleryContext = useContext(
-        PublicCollectionGalleryContext,
-    );
-
    const [timeStampList, setTimeStampList] = useState<TimeStampListItem[]>([]);
    const refreshInProgress = useRef(false);
    const shouldRefresh = useRef(false);
@@ -283,15 +278,7 @@ export const FileList: React.FC<FileListProps> = ({
            }
        };
        main();
-    }, [
-        width,
-        height,
-        annotatedFiles,
-        header,
-        footer,
-        disableGrouping,
-        publicCollectionGalleryContext.credentials,
-    ]);
+    }, [width, height, header, footer, annotatedFiles, disableGrouping]);

    useEffect(() => {
        refreshList();
--- a/web/apps/photos/src/components/Upload.tsx
+++ b/web/apps/photos/src/components/Upload.tsx
@@ -30,6 +30,7 @@ import {
 } from "ente-base/components/utils/modal";
 import { useBaseContext } from "ente-base/context";
 import { basename, dirname, joinPath } from "ente-base/file-name";
+import type { PublicAlbumsCredentials } from "ente-base/http";
 import log from "ente-base/log";
 import type { CollectionMapping, Electron, ZipItem } from "ente-base/types/ipc";
 import { type UploadTypeSelectorIntent } from "ente-gallery/components/Upload";
@@ -68,13 +69,7 @@ import { redirectToCustomerPortal } from "ente-new/photos/services/user-details"
 import { usePhotosAppContext } from "ente-new/photos/types/context";
 import { firstNonEmpty } from "ente-utils/array";
 import { t } from "i18next";
-import React, {
-    useCallback,
-    useContext,
-    useEffect,
-    useRef,
-    useState,
-} from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import type {
    InProgressUpload,
    SegregatedFinishedUploads,
@@ -84,18 +79,24 @@ import type {
 } from "services/upload-manager";
 import { uploadManager } from "services/upload-manager";
 import watcher from "services/watch";
-import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery";
 import { UploadProgress } from "./UploadProgress";

 interface UploadProps {
    /**
-     * The currently logged in user, if any.
+     * The logged in user, if any.
     *
     * This is only expected to be present when we're running it the context of
     * the photos app, where there is a logged in user. When used by the public
     * albums app, this prop can be omitted.
     */
    user?: LocalUser;
+    /**
+     * The {@link PublicAlbumsCredentials} to use, if any.
+     *
+     * These are expected to be set if we are in the context of the public
+     * albums app, and should be undefined when we're in the photos app context.
+     */
+    publicAlbumsCredentials?: PublicAlbumsCredentials;
    isFirstUpload?: boolean;
    uploadTypeSelectorView: boolean;
    dragAndDropFiles: File[];
@@ -164,6 +165,7 @@ type UploadType = "files" | "folders" | "zips";
 */
 export const Upload: React.FC<UploadProps> = ({
    user,
+    publicAlbumsCredentials,
    isFirstUpload,
    dragAndDropFiles,
    onRemotePull,
@@ -177,9 +179,6 @@ export const Upload: React.FC<UploadProps> = ({
 }) => {
    const { showMiniDialog, onGenericError } = useBaseContext();
    const { showNotification, watchFolderView } = usePhotosAppContext();
-    const publicCollectionGalleryContext = useContext(
-        PublicCollectionGalleryContext,
-    );

    const [uploadProgressView, setUploadProgressView] = useState(false);
    const [uploadPhase, setUploadPhase] = useState<UploadPhase>("preparing");
@@ -378,7 +377,7 @@ export const Upload: React.FC<UploadProps> = ({
                setUploadProgressView,
            },
            onUploadFile,
-            publicCollectionGalleryContext.credentials,
+            publicAlbumsCredentials,
        );

        if (uploadManager.isUploadRunning()) {
@@ -408,7 +407,7 @@ export const Upload: React.FC<UploadProps> = ({
                setDesktopZipItems(zipItems);
            });
        }
-    }, [publicCollectionGalleryContext.credentials]);
+    }, [publicAlbumsCredentials]);

    // Handle selected files when user selects files for upload through the open
    // file / open folder selection dialog, or drag-and-drops them.
@@ -527,10 +526,10 @@ export const Upload: React.FC<UploadProps> = ({
        props.setLoading(false);

        (async () => {
-            if (publicCollectionGalleryContext.credentials) {
+            if (publicAlbumsCredentials) {
                setUploaderName(
                    (await savedPublicCollectionUploaderName(
-                        publicCollectionGalleryContext.credentials.accessToken,
+                        publicAlbumsCredentials.accessToken,
                    )) ?? "",
                );
                showUploaderNameInput();
@@ -591,7 +590,13 @@ export const Upload: React.FC<UploadProps> = ({
                onCancel: handleCollectionSelectorCancel,
            });
        })();
-    }, [webFiles, desktopFiles, desktopFilePaths, desktopZipItems]);
+    }, [
+        publicAlbumsCredentials,
+        webFiles,
+        desktopFiles,
+        desktopFilePaths,
+        desktopZipItems,
+    ]);

    const preCollectionCreationAction = () => {
        onCloseCollectionSelector?.();
@@ -832,7 +837,7 @@ export const Upload: React.FC<UploadProps> = ({

    const handlePublicUpload = (uploaderName: string) => {
        savePublicCollectionUploaderName(
-            publicCollectionGalleryContext.credentials!.accessToken,
+            publicAlbumsCredentials!.accessToken,
            uploaderName,
        );

@@ -868,6 +873,7 @@ export const Upload: React.FC<UploadProps> = ({
            <UploadTypeSelector
                open={props.uploadTypeSelectorView}
                onClose={props.closeUploadTypeSelector}
+                publicAlbumsCredentials={publicAlbumsCredentials}
                intent={props.uploadTypeSelectorIntent}
                pendingUploadType={
                    isInputPending ? selectedUploadType.current : undefined
@@ -1115,7 +1121,7 @@ type UploadTypeSelectorProps = ModalVisibilityProps & {
     * Called when the user selects one of the options.
     */
    onSelect: (type: UploadType) => void;
-};
+} & Pick<UploadProps, "publicAlbumsCredentials">;

 /**
 * Request the user to specify which type of file / folder / zip it is that they
@@ -1129,28 +1135,21 @@ type UploadTypeSelectorProps = ModalVisibilityProps & {
 const UploadTypeSelector: React.FC<UploadTypeSelectorProps> = ({
    open,
    onClose,
+    publicAlbumsCredentials,
    intent,
    pendingUploadType,
    onSelect,
 }) => {
-    const publicCollectionGalleryContext = useContext(
-        PublicCollectionGalleryContext,
-    );
-
    // Directly show the file selector for the public albums app on likely
    // mobile devices.
    const directlyShowUploadFiles = useIsTouchscreen();

    useEffect(() => {
-        if (
-            open &&
-            directlyShowUploadFiles &&
-            publicCollectionGalleryContext.credentials
-        ) {
+        if (open && directlyShowUploadFiles && publicAlbumsCredentials) {
            onSelect("files");
            onClose();
        }
-    }, [open]);
+    }, [open, publicAlbumsCredentials]);

    const handleClose: DialogProps["onClose"] = (_, reason) => {
        // Disable backdrop clicks and esc keypresses if a selection is pending
--- a/web/apps/photos/src/pages/shared-albums.tsx
+++ b/web/apps/photos/src/pages/shared-albums.tsx
@@ -95,7 +95,6 @@ import { type FileWithPath } from "react-dropzone";
 import { Trans } from "react-i18next";
 import { uploadManager } from "services/upload-manager";
 import { getSelectedFiles, type SelectedState } from "utils/file";
-import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery";

 export default function PublicCollectionGallery() {
    const { showMiniDialog, onGenericError } = useBaseContext();
@@ -461,73 +460,69 @@ export default function PublicCollectionGallery() {
        );
    }

-    // TODO: memo this (after the dependencies are traceable).
-    const context = { credentials: credentials.current };
-
    return (
-        <PublicCollectionGalleryContext.Provider value={context}>
-            <FullScreenDropZone
-                disabled={shouldDisableDropzone}
-                onDrop={setDragAndDropFiles}
+        <FullScreenDropZone
+            disabled={shouldDisableDropzone}
+            onDrop={setDragAndDropFiles}
+        >
+            <NavbarBase
+                sx={{
+                    mb: "16px",
+                    px: "24px",
+                    "@media (width < 720px)": { px: "4px" },
+                }}
            >
-                <NavbarBase
-                    sx={{
-                        mb: "16px",
-                        px: "24px",
-                        "@media (width < 720px)": { px: "4px" },
-                    }}
-                >
-                    {selected.count > 0 ? (
-                        <SelectedFileOptions
-                            count={selected.count}
-                            clearSelection={clearSelection}
-                            downloadFilesHelper={downloadFilesHelper}
-                        />
-                    ) : (
-                        <SpacedRow sx={{ flex: 1 }}>
-                            <EnteLogoLink href="https://ente.io">
-                                <EnteLogo height={15} />
-                            </EnteLogoLink>
-                            {onAddPhotos ? (
-                                <AddPhotosButton onClick={onAddPhotos} />
-                            ) : (
-                                <GoToEnte />
-                            )}
-                        </SpacedRow>
-                    )}
-                </NavbarBase>
+                {selected.count > 0 ? (
+                    <SelectedFileOptions
+                        count={selected.count}
+                        clearSelection={clearSelection}
+                        downloadFilesHelper={downloadFilesHelper}
+                    />
+                ) : (
+                    <SpacedRow sx={{ flex: 1 }}>
+                        <EnteLogoLink href="https://ente.io">
+                            <EnteLogo height={15} />
+                        </EnteLogoLink>
+                        {onAddPhotos ? (
+                            <AddPhotosButton onClick={onAddPhotos} />
+                        ) : (
+                            <GoToEnte />
+                        )}
+                    </SpacedRow>
+                )}
+            </NavbarBase>

-                <FileListWithViewer
-                    files={publicFiles}
-                    header={fileListHeader}
-                    footer={fileListFooter}
-                    enableDownload={downloadEnabled}
-                    selectable={downloadEnabled}
-                    selected={selected}
-                    setSelected={setSelected}
-                    activeCollectionID={PseudoCollectionID.all}
-                    onRemotePull={publicAlbumsRemotePull}
-                    onVisualFeedback={handleVisualFeedback}
-                    onAddSaveGroup={onAddSaveGroup}
-                />
-                {blockingLoad && <TranslucentLoadingOverlay />}
-                <Upload
-                    uploadCollection={publicCollection}
-                    setLoading={setBlockingLoad}
-                    setShouldDisableDropzone={setShouldDisableDropzone}
-                    uploadTypeSelectorIntent="collect"
-                    uploadTypeSelectorView={uploadTypeSelectorView}
-                    onRemotePull={publicAlbumsRemotePull}
-                    onUploadFile={handleUploadFile}
-                    closeUploadTypeSelector={closeUploadTypeSelectorView}
-                    onShowSessionExpiredDialog={showPublicLinkExpiredMessage}
-                    {...{ dragAndDropFiles }}
-                />
-                <DownloadStatusNotifications
-                    {...{ saveGroups, onRemoveSaveGroup }}
-                />
-            </FullScreenDropZone>
-        </PublicCollectionGalleryContext.Provider>
+            <FileListWithViewer
+                files={publicFiles}
+                header={fileListHeader}
+                footer={fileListFooter}
+                enableDownload={downloadEnabled}
+                selectable={downloadEnabled}
+                selected={selected}
+                setSelected={setSelected}
+                activeCollectionID={PseudoCollectionID.all}
+                onRemotePull={publicAlbumsRemotePull}
+                onVisualFeedback={handleVisualFeedback}
+                onAddSaveGroup={onAddSaveGroup}
+            />
+            {blockingLoad && <TranslucentLoadingOverlay />}
+            <Upload
+                publicAlbumsCredentials={credentials.current}
+                uploadCollection={publicCollection}
+                setLoading={setBlockingLoad}
+                setShouldDisableDropzone={setShouldDisableDropzone}
+                uploadTypeSelectorIntent="collect"
+                uploadTypeSelectorView={uploadTypeSelectorView}
+                onRemotePull={publicAlbumsRemotePull}
+                onUploadFile={handleUploadFile}
+                closeUploadTypeSelector={closeUploadTypeSelectorView}
+                onShowSessionExpiredDialog={showPublicLinkExpiredMessage}
+                {...{ dragAndDropFiles }}
+            />
+            <DownloadStatusNotifications
+                {...{ saveGroups, onRemoveSaveGroup }}
+            />
+        </FullScreenDropZone>
    );
 }

@@ -688,7 +683,7 @@ interface FileListFooterProps {
 }

 /**
- * The dynamic (prop-depedent) height of {@link FileListFooter}.
+ * The dynamic (prop-dependent) height of {@link FileListFooter}.
 */
 const fileListFooterHeightForProps = ({
    referralCode,
--- a/web/apps/photos/src/utils/publicCollectionGallery/index.ts
+++ b/web/apps/photos/src/utils/publicCollectionGallery/index.ts
@@ -1,16 +0,0 @@
-import type { PublicAlbumsCredentials } from "ente-base/http";
-import { createContext } from "react";
-
-export interface PublicCollectionGalleryContextType {
-    /**
-     * The {@link PublicAlbumsCredentials} to use. These are guaranteed to be
-     * set if we are in the context of the public albums app, and will be
-     * undefined when we're in the default photos app context.
-     */
-    credentials: PublicAlbumsCredentials | undefined;
-}
-
-export const PublicCollectionGalleryContext =
-    createContext<PublicCollectionGalleryContextType>({
-        credentials: undefined,
-    });