From 4c7bb9edc2b5079505a4b59c66dfa58263a33484 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Thu, 18 Jan 2024 13:18:35 +0530 Subject: [PATCH] update collection progress to use new FileDownloadProgress component --- .../Collections/CollectionInfoWithOptions.tsx | 7 +- .../Collections/CollectionOptions/index.tsx | 28 ++++---- .../src/components/Collections/index.tsx | 58 ++++----------- .../src/components/FilesDownloadProgress.tsx | 10 ++- apps/photos/src/pages/gallery/index.tsx | 58 ++++++++++++++- apps/photos/src/types/gallery/index.ts | 18 +++-- apps/photos/src/utils/collection/index.ts | 72 ++++--------------- 7 files changed, 126 insertions(+), 125 deletions(-) diff --git a/apps/photos/src/components/Collections/CollectionInfoWithOptions.tsx b/apps/photos/src/components/Collections/CollectionInfoWithOptions.tsx index b65948a68..3ec310876 100644 --- 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; } diff --git a/apps/photos/src/components/Collections/CollectionOptions/index.tsx b/apps/photos/src/components/Collections/CollectionOptions/index.tsx index 775a97d27..2016f5a7b 100644 --- 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 ); } }; diff --git a/apps/photos/src/components/Collections/index.tsx b/apps/photos/src/components/Collections/index.tsx index 6a3e6de0c..8678be85b 100644 --- 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([]); - const [collectionListSortBy, setCollectionListSortBy] = useLocalState( 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} /> - ); } diff --git a/apps/photos/src/components/FilesDownloadProgress.tsx b/apps/photos/src/components/FilesDownloadProgress.tsx index 5c1285486..0451fd71a 100644 --- 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 = ({ } }; + console.log('attributesList', attributesList); + return ( <> {attributesList.map((attributes, index) => ( @@ -121,7 +129,7 @@ export const FilesDownloadProgress: React.FC = ({ key={attributes.collectionID} horizontal="left" sx={{ '&&': { bottom: `${index * 80 + 20}px` } }} - open + open={isFilesDownloadStarted(attributes)} onClose={handleClose(attributes)} keepOpenOnClick attributes={{ diff --git a/apps/photos/src/pages/gallery/index.tsx b/apps/photos/src/pages/gallery/index.tsx index e477367a5..4e068a90b 100644 --- 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([]); + const openHiddenSection: GalleryContextType['openHiddenSection'] = ( callback ) => { @@ -816,6 +827,40 @@ export default function Gallery() { return
; } + 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} /> + setFixCreationTimeView(false)} @@ -1042,6 +1092,12 @@ export default function Gallery() { hiddenCollectionSummaries={hiddenCollectionSummaries} setCollectionNamerAttributes={setCollectionNamerAttributes} setPhotoListHeader={setPhotoListHeader} + setFilesDownloadProgressAttributesCreator={ + setFilesDownloadProgressAttributesCreator + } + filesDownloadProgressAttributesList={ + filesDownloadProgressAttributesList + } /> >; export type SetCollectionSelectorAttributes = React.Dispatch< React.SetStateAction >; -export type SetCollectionDownloadProgressAttributes = React.Dispatch< - React.SetStateAction ->; +export type SetFilesDownloadProgressAttributes = ( + value: + | Partial + | (( + prev: FilesDownloadProgressAttributes + ) => FilesDownloadProgressAttributes) +) => void; + +export type SetFilesDownloadProgressAttributesCreator = ( + folderName: string, + collectionID?: number, + isHidden?: boolean +) => SetFilesDownloadProgressAttributes; export type MergedSourceURL = { original: string; diff --git a/apps/photos/src/utils/collection/index.ts b/apps/photos/src/utils/collection/index.ts index 2341ed2f4..89f20613e 100644 --- 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(