From 68d831ef3d356ea424539a7a30aa22992cf58463 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 8 Jul 2025 10:37:40 +0530 Subject: [PATCH] Update --- web/apps/photos/src/components/FileList.tsx | 17 +-- web/apps/photos/src/components/Upload.tsx | 57 ++++---- web/apps/photos/src/pages/shared-albums.tsx | 127 +++++++++--------- .../utils/publicCollectionGallery/index.ts | 16 --- 4 files changed, 91 insertions(+), 126 deletions(-) delete mode 100644 web/apps/photos/src/utils/publicCollectionGallery/index.ts diff --git a/web/apps/photos/src/components/FileList.tsx b/web/apps/photos/src/components/FileList.tsx index e7eaa88228..a113a8adcf 100644 --- 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 = ({ emailByUserID, onItemClick, }) => { - const publicCollectionGalleryContext = useContext( - PublicCollectionGalleryContext, - ); - const [timeStampList, setTimeStampList] = useState([]); const refreshInProgress = useRef(false); const shouldRefresh = useRef(false); @@ -283,15 +278,7 @@ export const FileList: React.FC = ({ } }; main(); - }, [ - width, - height, - annotatedFiles, - header, - footer, - disableGrouping, - publicCollectionGalleryContext.credentials, - ]); + }, [width, height, header, footer, annotatedFiles, disableGrouping]); useEffect(() => { refreshList(); diff --git a/web/apps/photos/src/components/Upload.tsx b/web/apps/photos/src/components/Upload.tsx index 105d55a610..610df422da 100644 --- 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 = ({ user, + publicAlbumsCredentials, isFirstUpload, dragAndDropFiles, onRemotePull, @@ -177,9 +179,6 @@ export const Upload: React.FC = ({ }) => { const { showMiniDialog, onGenericError } = useBaseContext(); const { showNotification, watchFolderView } = usePhotosAppContext(); - const publicCollectionGalleryContext = useContext( - PublicCollectionGalleryContext, - ); const [uploadProgressView, setUploadProgressView] = useState(false); const [uploadPhase, setUploadPhase] = useState("preparing"); @@ -378,7 +377,7 @@ export const Upload: React.FC = ({ setUploadProgressView, }, onUploadFile, - publicCollectionGalleryContext.credentials, + publicAlbumsCredentials, ); if (uploadManager.isUploadRunning()) { @@ -408,7 +407,7 @@ export const Upload: React.FC = ({ 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 = ({ 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 = ({ onCancel: handleCollectionSelectorCancel, }); })(); - }, [webFiles, desktopFiles, desktopFilePaths, desktopZipItems]); + }, [ + publicAlbumsCredentials, + webFiles, + desktopFiles, + desktopFilePaths, + desktopZipItems, + ]); const preCollectionCreationAction = () => { onCloseCollectionSelector?.(); @@ -832,7 +837,7 @@ export const Upload: React.FC = ({ const handlePublicUpload = (uploaderName: string) => { savePublicCollectionUploaderName( - publicCollectionGalleryContext.credentials!.accessToken, + publicAlbumsCredentials!.accessToken, uploaderName, ); @@ -868,6 +873,7 @@ export const Upload: React.FC = ({ void; -}; +} & Pick; /** * 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 = ({ 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 diff --git a/web/apps/photos/src/pages/shared-albums.tsx b/web/apps/photos/src/pages/shared-albums.tsx index 4ec23bae9f..8c3b4e648f 100644 --- 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 ( - - + - - {selected.count > 0 ? ( - - ) : ( - - - - - {onAddPhotos ? ( - - ) : ( - - )} - - )} - + {selected.count > 0 ? ( + + ) : ( + + + + + {onAddPhotos ? ( + + ) : ( + + )} + + )} + - - {blockingLoad && } - - - - + + {blockingLoad && } + + + ); } @@ -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, diff --git a/web/apps/photos/src/utils/publicCollectionGallery/index.ts b/web/apps/photos/src/utils/publicCollectionGallery/index.ts deleted file mode 100644 index 828134098c..0000000000 --- a/web/apps/photos/src/utils/publicCollectionGallery/index.ts +++ /dev/null @@ -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({ - credentials: undefined, - });