update collection progress to use new FileDownloadProgress component

2024-01-18 13:18:35 +05:30 · 2024-01-18 13:18:35 +05:30 · 4c7bb9edc2
parent edfdd2f065
commit 4c7bb9edc2
7 changed files with 126 additions and 125 deletions
--- a/apps/photos/src/components/Collections/CollectionInfoWithOptions.tsx
+++ b/apps/photos/src/components/Collections/CollectionInfoWithOptions.tsx
@ -1,5 +1,4 @@
 import { CollectionInfo } from './CollectionInfo';
-import React from 'react';
 import { Collection, CollectionSummary } from 'types/collection';
 import CollectionOptions from 'components/Collections/CollectionOptions';
 import { SetCollectionNamerAttributes } from 'components/Collections/CollectionNamer';
@ -11,16 +10,14 @@ import Favorite from '@mui/icons-material/FavoriteRounded';
 import ArchiveOutlined from '@mui/icons-material/ArchiveOutlined';
 import PeopleIcon from '@mui/icons-material/People';
 import LinkIcon from '@mui/icons-material/Link';
-import { SetCollectionDownloadProgressAttributes } from 'types/gallery';
+import { SetFilesDownloadProgressAttributesCreator } from 'types/gallery';

 interface Iprops {
    activeCollection: Collection;
    collectionSummary: CollectionSummary;
    setCollectionNamerAttributes: SetCollectionNamerAttributes;
    showCollectionShareModal: () => void;
-    setCollectionDownloadProgressAttributesCreator: (
-        collectionID: number
-    ) => SetCollectionDownloadProgressAttributes;
+    setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator;
    isActiveCollectionDownloadInProgress: () => boolean;
    setActiveCollectionID: (collectionID: number) => void;
 }
--- a/apps/photos/src/components/Collections/CollectionOptions/index.tsx
+++ b/apps/photos/src/components/Collections/CollectionOptions/index.tsx
@ -33,13 +33,11 @@ import { Trans } from 'react-i18next';
 import { t } from 'i18next';
 import { Box } from '@mui/material';
 import CollectionSortOrderMenu from './CollectionSortOrderMenu';
-import { SetCollectionDownloadProgressAttributes } from 'types/gallery';
+import { SetFilesDownloadProgressAttributesCreator } from 'types/gallery';

 interface CollectionOptionsProps {
    setCollectionNamerAttributes: SetCollectionNamerAttributes;
-    setCollectionDownloadProgressAttributesCreator: (
-        collectionID: number
-    ) => SetCollectionDownloadProgressAttributes;
+    setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator;
    isActiveCollectionDownloadInProgress: () => boolean;
    activeCollection: Collection;
    collectionSummaryType: CollectionSummaryType;
@ -76,7 +74,7 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
        setActiveCollectionID,
        setCollectionNamerAttributes,
        showCollectionShareModal,
-        setCollectionDownloadProgressAttributesCreator,
+        setFilesDownloadProgressAttributesCreator,
        isActiveCollectionDownloadInProgress,
    } = props;

@ -219,21 +217,25 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
            return;
        }
        if (collectionSummaryType === CollectionSummaryType.hiddenItems) {
-            const setCollectionDownloadProgressAttributes =
-                setCollectionDownloadProgressAttributesCreator(
-                    HIDDEN_ITEMS_SECTION
+            const setFilesDownloadProgressAttributes =
+                setFilesDownloadProgressAttributesCreator(
+                    activeCollection.name,
+                    HIDDEN_ITEMS_SECTION,
+                    true
                );
            downloadDefaultHiddenCollectionHelper(
-                setCollectionDownloadProgressAttributes
+                setFilesDownloadProgressAttributes
            );
        } else {
-            const setCollectionDownloadProgressAttributes =
-                setCollectionDownloadProgressAttributesCreator(
-                    activeCollection.id
+            const setFilesDownloadProgressAttributes =
+                setFilesDownloadProgressAttributesCreator(
+                    activeCollection.name,
+                    activeCollection.id,
+                    isHiddenCollection(activeCollection)
                );
            downloadCollectionHelper(
                activeCollection.id,
-                setCollectionDownloadProgressAttributes
+                setFilesDownloadProgressAttributes
            );
        }
    };
--- a/apps/photos/src/components/Collections/index.tsx
+++ b/apps/photos/src/components/Collections/index.tsx
@ -16,12 +16,11 @@ import { useLocalState } from '@ente/shared/hooks/useLocalState';
 import { sortCollectionSummaries } from 'services/collectionService';
 import { LS_KEYS } from '@ente/shared/storage/localStorage';
 import {
-    CollectionDownloadProgress,
-    CollectionDownloadProgressAttributes,
-    isCollectionDownloadCancelled,
-    isCollectionDownloadCompleted,
-} from './CollectionDownloadProgress';
-import { SetCollectionDownloadProgressAttributes } from 'types/gallery';
+    FilesDownloadProgressAttributes,
+    isFilesDownloadCancelled,
+    isFilesDownloadCompleted,
+} from '../FilesDownloadProgress';
+import { SetFilesDownloadProgressAttributesCreator } from 'types/gallery';

 interface Iprops {
    activeCollection: Collection;
@ -33,6 +32,8 @@ interface Iprops {
    hiddenCollectionSummaries: CollectionSummaries;
    setCollectionNamerAttributes: SetCollectionNamerAttributes;
    setPhotoListHeader: (value: TimeStampListItem) => void;
+    filesDownloadProgressAttributesList: FilesDownloadProgressAttributes[];
+    setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator;
 }

 export default function Collections(props: Iprops) {
@ -46,17 +47,14 @@ export default function Collections(props: Iprops) {
        hiddenCollectionSummaries,
        setCollectionNamerAttributes,
        setPhotoListHeader,
+        filesDownloadProgressAttributesList,
+        setFilesDownloadProgressAttributesCreator,
    } = props;

    const [allCollectionView, setAllCollectionView] = useState(false);
    const [collectionShareModalView, setCollectionShareModalView] =
        useState(false);

-    const [
-        collectionDownloadProgressAttributesList,
-        setCollectionDownloadProgressAttributesList,
-    ] = useState<CollectionDownloadProgressAttributes[]>([]);
-
    const [collectionListSortBy, setCollectionListSortBy] =
        useLocalState<COLLECTION_LIST_SORT_BY>(
            LS_KEYS.COLLECTION_SORT_BY,
@ -86,38 +84,16 @@ export default function Collections(props: Iprops) {
        [collectionListSortBy, toShowCollectionSummaries]
    );

-    const setCollectionDownloadProgressAttributesCreator =
-        (collectionID: number): SetCollectionDownloadProgressAttributes =>
-        (value) => {
-            setCollectionDownloadProgressAttributesList((prev) => {
-                const attributes = prev?.find(
-                    (attr) => attr.collectionID === collectionID
-                );
-                const updatedAttributes =
-                    typeof value === 'function' ? value(attributes) : value;
-
-                const updatedAttributesList = attributes
-                    ? prev.map((attr) =>
-                          attr.collectionID === collectionID
-                              ? updatedAttributes
-                              : attr
-                      )
-                    : [...prev, updatedAttributes];
-
-                return updatedAttributesList;
-            });
-        };
-
    const isActiveCollectionDownloadInProgress = useCallback(() => {
-        const attributes = collectionDownloadProgressAttributesList.find(
+        const attributes = filesDownloadProgressAttributesList.find(
            (attr) => attr.collectionID === activeCollectionID
        );
        return (
            attributes &&
-            !isCollectionDownloadCancelled(attributes) &&
-            !isCollectionDownloadCompleted(attributes)
+            !isFilesDownloadCancelled(attributes) &&
+            !isFilesDownloadCompleted(attributes)
        );
-    }, [activeCollectionID, collectionDownloadProgressAttributesList]);
+    }, [activeCollectionID, filesDownloadProgressAttributesList]);

    useEffect(() => {
        if (isInSearchMode) {
@ -134,8 +110,8 @@ export default function Collections(props: Iprops) {
                    showCollectionShareModal={() =>
                        setCollectionShareModalView(true)
                    }
-                    setCollectionDownloadProgressAttributesCreator={
-                        setCollectionDownloadProgressAttributesCreator
+                    setFilesDownloadProgressAttributesCreator={
+                        setFilesDownloadProgressAttributesCreator
                    }
                    isActiveCollectionDownloadInProgress={
                        isActiveCollectionDownloadInProgress
@ -195,10 +171,6 @@ export default function Collections(props: Iprops) {
                onClose={closeCollectionShare}
                collection={activeCollection}
            />
-            <CollectionDownloadProgress
-                attributesList={collectionDownloadProgressAttributesList}
-                setAttributesList={setCollectionDownloadProgressAttributesList}
-            />
        </>
    );
 }
--- a/apps/photos/src/components/FilesDownloadProgress.tsx
+++ b/apps/photos/src/components/FilesDownloadProgress.tsx
@ -23,6 +23,12 @@ interface FilesDownloadProgressProps {
    setAttributesList: (value: FilesDownloadProgressAttributes[]) => void;
 }

+export const isFilesDownloadStarted = (
+    attributes: FilesDownloadProgressAttributes
+) => {
+    return attributes && attributes.total > 0;
+};
+
 export const isFilesDownloadCompleted = (
    attributes: FilesDownloadProgressAttributes
 ) => {
@ -114,6 +120,8 @@ export const FilesDownloadProgress: React.FC<FilesDownloadProgressProps> = ({
        }
    };

+    console.log('attributesList', attributesList);
+
    return (
        <>
            {attributesList.map((attributes, index) => (
@ -121,7 +129,7 @@ export const FilesDownloadProgress: React.FC<FilesDownloadProgressProps> = ({
                    key={attributes.collectionID}
                    horizontal="left"
                    sx={{ '&&': { bottom: `${index * 80 + 20}px` } }}
-                    open
+                    open={isFilesDownloadStarted(attributes)}
                    onClose={handleClose(attributes)}
                    keepOpenOnClick
                    attributes={{
--- a/apps/photos/src/pages/gallery/index.tsx
+++ b/apps/photos/src/pages/gallery/index.tsx
@ -97,6 +97,8 @@ import { EnteFile } from 'types/file';
 import {
    GalleryContextType,
    SelectedState,
+    SetFilesDownloadProgressAttributes,
+    SetFilesDownloadProgressAttributesCreator,
    UploadTypeSelectorIntent,
 } from 'types/gallery';
 import Collections from 'components/Collections';
@ -131,6 +133,10 @@ import { ClipService } from 'services/clipService';
 import isElectron from 'is-electron';
 import downloadManager from 'services/download';
 import { APPS } from '@ente/shared/apps/constants';
+import {
+    FilesDownloadProgress,
+    FilesDownloadProgressAttributes,
+} from 'components/FilesDownloadProgress';

 export const DeadCenter = styled('div')`
    flex: 1;
@ -280,6 +286,11 @@ export default function Gallery() {

    const [isInHiddenSection, setIsInHiddenSection] = useState(false);

+    const [
+        filesDownloadProgressAttributesList,
+        setFilesDownloadProgressAttributesList,
+    ] = useState<FilesDownloadProgressAttributes[]>([]);
+
    const openHiddenSection: GalleryContextType['openHiddenSection'] = (
        callback
    ) => {
@ -816,6 +827,40 @@ export default function Gallery() {
        return <div />;
    }

+    const setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator =
+        (folderName, collectionID, isHidden) => {
+            const id = filesDownloadProgressAttributesList?.length ?? 0;
+            const updater: SetFilesDownloadProgressAttributes = (value) => {
+                setFilesDownloadProgressAttributesList((prev) => {
+                    const attributes = prev?.find((attr) => attr.id === id);
+                    const updatedAttributes =
+                        typeof value === 'function'
+                            ? value(attributes)
+                            : { ...attributes, ...value };
+                    console.log('value', attributes, updatedAttributes);
+                    const updatedAttributesList = attributes
+                        ? prev.map((attr) =>
+                              attr.id === id ? updatedAttributes : attr
+                          )
+                        : [...prev, updatedAttributes];
+
+                    return updatedAttributesList;
+                });
+            };
+            updater({
+                id,
+                folderName,
+                collectionID,
+                isHidden,
+                canceller: null,
+                total: 0,
+                success: 0,
+                failed: 0,
+                downloadDirPath: null,
+            });
+            return updater;
+        };
+
    const collectionOpsHelper =
        (ops: COLLECTION_OPS_TYPE) => async (collection: Collection) => {
            startLoading();
@ -874,7 +919,8 @@ export default function Gallery() {
                    toProcessFiles,
                    setDeletedFileIds,
                    setHiddenFileIds,
-                    setFixCreationTimeAttributes
+                    setFixCreationTimeAttributes,
+                    setFilesDownloadProgressAttributesCreator
                );
            }
            clearSelection();
@ -1013,6 +1059,10 @@ export default function Gallery() {
                    attributes={collectionSelectorAttributes}
                    collections={collections}
                />
+                <FilesDownloadProgress
+                    attributesList={filesDownloadProgressAttributesList}
+                    setAttributesList={setFilesDownloadProgressAttributesList}
+                />
                <FixCreationTime
                    isOpen={fixCreationTimeView}
                    hide={() => setFixCreationTimeView(false)}
@ -1042,6 +1092,12 @@ export default function Gallery() {
                    hiddenCollectionSummaries={hiddenCollectionSummaries}
                    setCollectionNamerAttributes={setCollectionNamerAttributes}
                    setPhotoListHeader={setPhotoListHeader}
+                    setFilesDownloadProgressAttributesCreator={
+                        setFilesDownloadProgressAttributesCreator
+                    }
+                    filesDownloadProgressAttributesList={
+                        filesDownloadProgressAttributesList
+                    }
                />

                <Uploader
--- a/apps/photos/src/types/gallery/index.ts
+++ b/apps/photos/src/types/gallery/index.ts
@ -1,4 +1,4 @@
-import { CollectionDownloadProgressAttributes } from 'components/Collections/CollectionDownloadProgress';
+import { FilesDownloadProgressAttributes } from 'components/FilesDownloadProgress';
 import { CollectionSelectorAttributes } from 'components/Collections/CollectionSelector';
 import { TimeStampListItem } from 'components/PhotoList';
 import { Collection } from 'types/collection';
@ -17,9 +17,19 @@ export type SetLoading = React.Dispatch<React.SetStateAction<boolean>>;
 export type SetCollectionSelectorAttributes = React.Dispatch<
    React.SetStateAction<CollectionSelectorAttributes>
 >;
-export type SetCollectionDownloadProgressAttributes = React.Dispatch<
-    React.SetStateAction<CollectionDownloadProgressAttributes>
->;
+export type SetFilesDownloadProgressAttributes = (
+    value:
+        | Partial<FilesDownloadProgressAttributes>
+        | ((
+              prev: FilesDownloadProgressAttributes
+          ) => FilesDownloadProgressAttributes)
+) => void;
+
+export type SetFilesDownloadProgressAttributesCreator = (
+    folderName: string,
+    collectionID?: number,
+    isHidden?: boolean
+) => SetFilesDownloadProgressAttributes;

 export type MergedSourceURL = {
    original: string;
--- a/apps/photos/src/utils/collection/index.ts
+++ b/apps/photos/src/utils/collection/index.ts
@ -12,7 +12,7 @@ import {
    updatePublicCollectionMagicMetadata,
    updateSharedCollectionMagicMetadata,
 } from 'services/collectionService';
-import { downloadFiles, downloadFilesDesktop } from 'utils/file';
+import { downloadFilesWithProgress } from 'utils/file';
 import { getAllLocalFiles, getLocalFiles } from 'services/fileService';
 import { EnteFile } from 'types/file';
 import { CustomError } from '@ente/shared/error';
@ -34,7 +34,6 @@ import {
    SYSTEM_COLLECTION_TYPES,
    MOVE_TO_NOT_ALLOWED_COLLECTION,
    ADD_TO_NOT_ALLOWED_COLLECTION,
-    HIDDEN_ITEMS_SECTION,
    DEFAULT_HIDDEN_COLLECTION_USER_FACING_NAME,
 } from 'constants/collection';
 import { getUnixTimeInMicroSecondsWithDelta } from '@ente/shared/time';
@ -44,14 +43,13 @@ import { getAlbumsURL } from '@ente/shared/network/api';
 import bs58 from 'bs58';
 import { t } from 'i18next';
 import isElectron from 'is-electron';
-import { SetCollectionDownloadProgressAttributes } from 'types/gallery';
+import { SetFilesDownloadProgressAttributes } from 'types/gallery';
 import ElectronAPIs from '@ente/shared/electron';
 import {
    getCollectionExportPath,
    getUniqueCollectionExportName,
 } from 'utils/export';
 import exportService from 'services/export';
-import { CollectionDownloadProgressAttributes } from 'components/Collections/CollectionDownloadProgress';

 export enum COLLECTION_OPS_TYPE {
    ADD,
@ -100,7 +98,7 @@ export function getSelectedCollection(

 export async function downloadCollectionHelper(
    collectionID: number,
-    setCollectionDownloadProgressAttributes: SetCollectionDownloadProgressAttributes
+    setFilesDownloadProgressAttributes: SetFilesDownloadProgressAttributes
 ) {
    try {
        const allFiles = await getAllLocalFiles();
@ -116,10 +114,8 @@ export async function downloadCollectionHelper(
        }
        await downloadCollectionFiles(
            collection.name,
-            collection.id,
-            isHiddenCollection(collection),
            collectionFiles,
-            setCollectionDownloadProgressAttributes
+            setFilesDownloadProgressAttributes
        );
    } catch (e) {
        logError(e, 'download collection failed ');
@ -127,7 +123,7 @@ export async function downloadCollectionHelper(
 }

 export async function downloadDefaultHiddenCollectionHelper(
-    setCollectionDownloadProgressAttributes: SetCollectionDownloadProgressAttributes
+    setFilesDownloadProgressAttributes: SetFilesDownloadProgressAttributes
 ) {
    try {
        const hiddenCollections = await getLocalCollections('hidden');
@ -139,10 +135,8 @@ export async function downloadDefaultHiddenCollectionHelper(
        );
        await downloadCollectionFiles(
            DEFAULT_HIDDEN_COLLECTION_USER_FACING_NAME,
-            HIDDEN_ITEMS_SECTION,
-            true,
            defaultHiddenCollectionFiles,
-            setCollectionDownloadProgressAttributes
+            setFilesDownloadProgressAttributes
        );
    } catch (e) {
        logError(e, 'download hidden files failed ');
@ -151,66 +145,28 @@ export async function downloadDefaultHiddenCollectionHelper(

 async function downloadCollectionFiles(
    collectionName: string,
-    collectionID: number,
-    isHidden: boolean,
    collectionFiles: EnteFile[],
-    setCollectionDownloadProgressAttributes: SetCollectionDownloadProgressAttributes
+    setFilesDownloadProgressAttributes: SetFilesDownloadProgressAttributes
 ) {
    if (!collectionFiles.length) {
        return;
    }
-    const canceller = new AbortController();
-    const increaseSuccess = () => {
-        if (canceller.signal.aborted) return;
-        setCollectionDownloadProgressAttributes((prev) => ({
-            ...prev,
-            success: prev.success + 1,
-        }));
-    };
-    const increaseFailed = () => {
-        if (canceller.signal.aborted) return;
-        setCollectionDownloadProgressAttributes((prev) => ({
-            ...prev,
-            failed: prev.failed + 1,
-        }));
-    };
-    const isCancelled = () => canceller.signal.aborted;
-    const initialProgressAttributes: CollectionDownloadProgressAttributes = {
-        collectionName,
-        collectionID,
-        isHidden,
-        canceller,
-        total: collectionFiles.length,
-        success: 0,
-        failed: 0,
-        downloadDirPath: null,
-    };
+    let downloadDirPath: string;
    if (isElectron()) {
        const selectedDir = await ElectronAPIs.selectDirectory();
        if (!selectedDir) {
            return;
        }
-        const downloadDirPath = await createCollectionDownloadFolder(
+        downloadDirPath = await createCollectionDownloadFolder(
            selectedDir,
            collectionName
        );
-        setCollectionDownloadProgressAttributes({
-            ...initialProgressAttributes,
-            downloadDirPath,
-        });
-        await downloadFilesDesktop(
-            collectionFiles,
-            { increaseSuccess, increaseFailed, isCancelled },
-            downloadDirPath
-        );
-    } else {
-        setCollectionDownloadProgressAttributes(initialProgressAttributes);
-        await downloadFiles(collectionFiles, {
-            increaseSuccess,
-            increaseFailed,
-            isCancelled,
-        });
    }
+    await downloadFilesWithProgress(
+        collectionFiles,
+        downloadDirPath,
+        setFilesDownloadProgressAttributes
+    );
 }

 async function createCollectionDownloadFolder(