diff --git a/web/apps/photos/src/components/Upload/Uploader.tsx b/web/apps/photos/src/components/Upload/Uploader.tsx index a34f9a3e1f..505fd992ae 100644 --- a/web/apps/photos/src/components/Upload/Uploader.tsx +++ b/web/apps/photos/src/components/Upload/Uploader.tsx @@ -6,7 +6,7 @@ import type { CollectionMapping, Electron, ZipItem } from "@/base/types/ipc"; import type { Collection } from "@/media/collection"; import type { EnteFile } from "@/media/file"; import { UploaderNameInput } from "@/new/albums/components/UploaderNameInput"; -import { CollectionMappingChoiceDialog } from "@/new/photos/components/CollectionMappingChoiceDialog"; +import { CollectionMappingChoice } from "@/new/photos/components/CollectionMappingChoice"; import type { CollectionSelectorAttributes } from "@/new/photos/components/CollectionSelector"; import { downloadAppDialogAttributes } from "@/new/photos/components/utils/download"; import { exportMetadataDirectoryName } from "@/new/photos/services/export"; @@ -134,7 +134,8 @@ export default function Uploader({ const [percentComplete, setPercentComplete] = useState(0); const [hasLivePhotos, setHasLivePhotos] = useState(false); - const [openChoiceDialog, setOpenChoiceDialog] = useState(false); + const [openCollectionMappingChoice, setOpenCollectionMappingChoice] = + useState(false); const [importSuggestion, setImportSuggestion] = useState( DEFAULT_IMPORT_SUGGESTION, ); @@ -221,8 +222,8 @@ export default function Uploader({ const closeUploadProgress = () => setUploadProgressView(false); - const handleChoiceModalClose = () => { - setOpenChoiceDialog(false); + const handleCollectionMappingChoiceClose = () => { + setOpenCollectionMappingChoice(false); uploadRunning.current = false; }; @@ -465,7 +466,7 @@ export default function Uploader({ let showNextModal = () => {}; if (importSuggestion.hasNestedFolders) { - showNextModal = () => setOpenChoiceDialog(true); + showNextModal = () => setOpenCollectionMappingChoice(true); } else { showNextModal = () => showCollectionCreateModal(importSuggestion.rootFolderName); @@ -740,7 +741,7 @@ export default function Uploader({ } }; - const didSelectCollectionMapping = (mapping: CollectionMapping) => { + const handleCollectionMappingSelect = (mapping: CollectionMapping) => { switch (mapping) { case "root": uploadToSingleNewCollection( @@ -781,10 +782,10 @@ export default function Uploader({ return ( <> - = ({ - ); diff --git a/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx b/web/packages/new/photos/components/CollectionMappingChoice.tsx similarity index 81% rename from web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx rename to web/packages/new/photos/components/CollectionMappingChoice.tsx index 5859c2b8f5..ce0019f853 100644 --- a/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx +++ b/web/packages/new/photos/components/CollectionMappingChoice.tsx @@ -15,16 +15,21 @@ import { t } from "i18next"; import React from "react"; import { DialogCloseIconButton } from "./mui/Dialog"; -type CollectionMappingChoiceModalProps = ModalVisibilityProps & { - didSelect: (mapping: CollectionMapping) => void; +type CollectionMappingChoiceProps = ModalVisibilityProps & { + /** + * Callback invoked with the mapping choice selected by the user. + * + * The dialog is automatically closed before this callback is invoked. + */ + onSelect: (mapping: CollectionMapping) => void; }; /** * A {@link Dialog} that allow the user to choose a collection mapping. */ -export const CollectionMappingChoiceDialog: React.FC< - CollectionMappingChoiceModalProps -> = ({ open, onClose, didSelect }) => ( +export const CollectionMappingChoice: React.FC< + CollectionMappingChoiceProps +> = ({ open, onClose, onSelect }) => ( } onClick={() => { onClose(); - didSelect("root"); + onSelect("root"); }} > {t("upload_to_single_album")} @@ -64,7 +69,7 @@ export const CollectionMappingChoiceDialog: React.FC< startIcon={} onClick={() => { onClose(); - didSelect("parent"); + onSelect("parent"); }} > {t("upload_to_album_per_folder")}