diff --git a/web/apps/photos/src/components/GalleryEmptyState.tsx b/web/apps/photos/src/components/GalleryEmptyState.tsx index 399871782a..0dd01ba15d 100644 --- a/web/apps/photos/src/components/GalleryEmptyState.tsx +++ b/web/apps/photos/src/components/GalleryEmptyState.tsx @@ -9,7 +9,6 @@ import { Box, Button, Stack, Typography, styled } from "@mui/material"; import { t } from "i18next"; import { Trans } from "react-i18next"; import uploadManager from "services/upload/uploadManager"; -import { UploadTypeSelectorIntent } from "types/gallery"; const Wrapper = styled(Box)` display: flex; @@ -61,9 +60,7 @@ export default function GalleryEmptyState({ openUploader }) { "not-allowed", }} color="accent" - onClick={() => - openUploader(UploadTypeSelectorIntent.normalUpload) - } + onClick={() => openUploader("upload")} disabled={!uploadManager.shouldAllowNewUpload()} sx={{ mt: 1.5, @@ -83,9 +80,7 @@ export default function GalleryEmptyState({ openUploader }) { !uploadManager.shouldAllowNewUpload() && "not-allowed", }} - onClick={() => - openUploader(UploadTypeSelectorIntent.import) - } + onClick={() => openUploader("import")} disabled={!uploadManager.shouldAllowNewUpload()} sx={{ mt: 1.5, diff --git a/web/apps/photos/src/components/Upload/UploadButton.tsx b/web/apps/photos/src/components/Upload/UploadButton.tsx index 1b6842f027..171a2253ab 100644 --- a/web/apps/photos/src/components/Upload/UploadButton.tsx +++ b/web/apps/photos/src/components/Upload/UploadButton.tsx @@ -1,9 +1,8 @@ import FileUploadOutlinedIcon from "@mui/icons-material/FileUploadOutlined"; import { Button, ButtonProps, IconButton, styled } from "@mui/material"; +import { type UploadTypeSelectorIntent } from "components/Upload/UploadTypeSelector"; import { t } from "i18next"; - import uploadManager from "services/upload/uploadManager"; -import { UploadTypeSelectorIntent } from "types/gallery"; const Wrapper = styled("div")<{ $disableShrink: boolean }>` display: flex; diff --git a/web/apps/photos/src/components/Upload/UploadTypeSelector/index.tsx b/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx similarity index 82% rename from web/apps/photos/src/components/Upload/UploadTypeSelector/index.tsx rename to web/apps/photos/src/components/Upload/UploadTypeSelector.tsx index 46d951c208..3665c6458c 100644 --- a/web/apps/photos/src/components/Upload/UploadTypeSelector/index.tsx +++ b/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx @@ -9,17 +9,21 @@ import { default as FolderUploadIcon } from "@mui/icons-material/PermMediaOutlin import { Box, Dialog, Stack, Typography } from "@mui/material"; import { t } from "i18next"; import React, { useContext, useEffect, useRef } from "react"; -import { UploadTypeSelectorIntent } from "types/gallery"; import { isMobileOrTable } from "utils/common/deviceDetection"; import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery"; +export type UploadTypeSelectorIntent = "upload" | "import" | "collect"; + interface UploadTypeSelectorProps { + /** If `true`, then the selector is shown. */ + open: boolean; + /** Callback to indicate that the selector should be closed. */ onClose: () => void; - show: boolean; + /** The particular context / scenario in which this upload is occuring. */ + intent: UploadTypeSelectorIntent; uploadFiles: () => void; uploadFolders: () => void; uploadGoogleTakeoutZips: () => void; - uploadTypeSelectorIntent: UploadTypeSelectorIntent; } /** @@ -31,13 +35,13 @@ interface UploadTypeSelectorProps { * upload. But having an explicit easy to reach button is also necessary for new * users, or for cases where drag-and-drop might not be appropriate. */ -const UploadTypeSelector: React.FC = ({ +export const UploadTypeSelector: React.FC = ({ + open, onClose, - show, + intent, uploadFiles, uploadFolders, uploadGoogleTakeoutZips, - uploadTypeSelectorIntent, }) => { const publicCollectionGalleryContext = useContext( PublicCollectionGalleryContext, @@ -46,18 +50,18 @@ const UploadTypeSelector: React.FC = ({ useEffect(() => { if ( - show && + open && directlyShowUploadFiles.current && publicCollectionGalleryContext.accessedThroughSharedURL ) { uploadFiles(); onClose(); } - }, [show]); + }, [open]); return ( ({ maxWidth: "375px", @@ -68,18 +72,15 @@ const UploadTypeSelector: React.FC = ({ onClose={dialogCloseHandler({ onClose })} > - {uploadTypeSelectorIntent === - UploadTypeSelectorIntent.collectPhotos + {intent == "collect" ? t("SELECT_PHOTOS") - : uploadTypeSelectorIntent === - UploadTypeSelectorIntent.import + : intent == "import" ? t("IMPORT") : t("UPLOAD")} - {uploadTypeSelectorIntent !== - UploadTypeSelectorIntent.import && ( + {intent != "import" && ( } @@ -94,8 +95,7 @@ const UploadTypeSelector: React.FC = ({ label={t("UPLOAD_DIRS")} /> - {uploadTypeSelectorIntent !== - UploadTypeSelectorIntent.collectPhotos && ( + {intent !== "collect" && ( } @@ -111,5 +111,3 @@ const UploadTypeSelector: React.FC = ({ ); }; - -export default UploadTypeSelector; diff --git a/web/apps/photos/src/components/Upload/Uploader.tsx b/web/apps/photos/src/components/Upload/Uploader.tsx index bea54c645b..85e660672e 100644 --- a/web/apps/photos/src/components/Upload/Uploader.tsx +++ b/web/apps/photos/src/components/Upload/Uploader.tsx @@ -39,7 +39,6 @@ import { SetCollections, SetFiles, SetLoading, - UploadTypeSelectorIntent, } from "types/gallery"; import { getOrCreateAlbum } from "utils/collection"; import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery"; @@ -50,7 +49,10 @@ import { import { SetCollectionNamerAttributes } from "../Collections/CollectionNamer"; import { CollectionMappingChoiceModal } from "./CollectionMappingChoiceModal"; import UploadProgress from "./UploadProgress"; -import UploadTypeSelector from "./UploadTypeSelector"; +import { + UploadTypeSelector, + type UploadTypeSelectorIntent, +} from "./UploadTypeSelector"; enum PICKED_UPLOAD_TYPE { FILES = "files", @@ -767,12 +769,12 @@ export default function Uploader({ didSelect={didSelectCollectionMapping} /> ( - UploadTypeSelectorIntent.normalUpload, - ); + useState("upload"); const [sidebarView, setSidebarView] = useState(false); @@ -992,12 +990,12 @@ export default function Gallery() { } }; - const openUploader = (intent = UploadTypeSelectorIntent.normalUpload) => { + const openUploader = (intent?: UploadTypeSelectorIntent) => { if (!uploadManager.shouldAllowNewUpload()) { return; } setUploadTypeSelectorView(true); - setUploadTypeSelectorIntent(intent); + setUploadTypeSelectorIntent(intent ?? "upload"); }; const closeCollectionSelector = () => { diff --git a/web/apps/photos/src/pages/shared-albums/index.tsx b/web/apps/photos/src/pages/shared-albums/index.tsx index b35bb7f82c..6962d7c450 100644 --- a/web/apps/photos/src/pages/shared-albums/index.tsx +++ b/web/apps/photos/src/pages/shared-albums/index.tsx @@ -63,7 +63,6 @@ import { SelectedState, SetFilesDownloadProgressAttributes, SetFilesDownloadProgressAttributesCreator, - UploadTypeSelectorIntent, } from "types/gallery"; import { downloadCollectionFiles, isHiddenCollection } from "utils/collection"; import { @@ -582,9 +581,7 @@ export default function PublicCollectionGallery() { uploadTypeSelectorView={uploadTypeSelectorView} closeUploadTypeSelector={closeUploadTypeSelectorView} showSessionExpiredMessage={showPublicLinkExpiredMessage} - uploadTypeSelectorIntent={ - UploadTypeSelectorIntent.collectPhotos - } + uploadTypeSelectorIntent="collect" {...{ dragAndDropFiles, openFileSelector, diff --git a/web/apps/photos/src/types/gallery/index.ts b/web/apps/photos/src/types/gallery/index.ts index 4cf9b40648..f69b6c24b6 100644 --- a/web/apps/photos/src/types/gallery/index.ts +++ b/web/apps/photos/src/types/gallery/index.ts @@ -38,11 +38,7 @@ export type MergedSourceURL = { original: string; converted: string; }; -export enum UploadTypeSelectorIntent { - normalUpload, - import, - collectPhotos, -} + export type GalleryContextType = { showPlanSelectorModal: () => void; setActiveCollectionID: (collectionID: number) => void;