beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix ui not udpating issue

Browse source
This commit is contained in:
Abhinav 2022-06-11 15:53:33 +05:30
parent fc0d7bb5d9
commit dfedbdc5ff
5 changed files with 72 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/components/UploadProgress/dialog.tsx
View file

@ -1,7 +1,7 @@
import { DialogContent } from '@mui/material';
import constants from 'utils/strings/constants';
import { UPLOAD_STAGES, UPLOAD_RESULT } from 'constants/upload';
import React, { useContext, useMemo } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import { UploadProgressFooter } from './footer';
import { UploadProgressHeader } from './header';
import { InProgressSection } from './inProgressSection';
@ -16,19 +16,22 @@ export function UploadProgressDialog() {
UploadProgressContext
);
const hasUnUploadedFiles = useMemo(() => {
if (
finishedUploads.get(UPLOAD_RESULT.ALREADY_UPLOADED)?.length > 0 ||
finishedUploads.get(UPLOAD_RESULT.BLOCKED)?.length > 0 ||
finishedUploads.get(UPLOAD_RESULT.FAILED)?.length > 0 ||
finishedUploads.get(UPLOAD_RESULT.LARGER_THAN_AVAILABLE_STORAGE)
?.length > 0 ||
finishedUploads.get(UPLOAD_RESULT.TOO_LARGE)?.length > 0 ||
finishedUploads.get(UPLOAD_RESULT.UNSUPPORTED)?.length > 0
) {
return true;
} else {
return false;
const [hasUnUploadedFiles, setHasUnUploadedFiles] = useState(false);
useEffect(() => {
if (!hasUnUploadedFiles) {
if (
finishedUploads.get(UPLOAD_RESULT.ALREADY_UPLOADED)?.length >
0 ||
finishedUploads.get(UPLOAD_RESULT.BLOCKED)?.length > 0 ||
finishedUploads.get(UPLOAD_RESULT.FAILED)?.length > 0 ||
finishedUploads.get(UPLOAD_RESULT.LARGER_THAN_AVAILABLE_STORAGE)
?.length > 0 ||
finishedUploads.get(UPLOAD_RESULT.TOO_LARGE)?.length > 0 ||
finishedUploads.get(UPLOAD_RESULT.UNSUPPORTED)?.length > 0
) {
setHasUnUploadedFiles(true);
}
}
}, [finishedUploads]);

38
src/components/UploadProgress/index.tsx
View file

@ -1,6 +1,6 @@
import { UploadProgressDialog } from './dialog';
import { MinimizedUploadProgress } from './minimized';
import React, { useContext, useMemo, useState } from 'react';
import React, { useContext, useState } from 'react';
import constants from 'utils/strings/constants';
import { UPLOAD_STAGES } from 'constants/upload';
@ -9,10 +9,8 @@ import { dialogCloseHandler } from 'components/DialogBox/base';
import {
UploadFileNames,
UploadCounter,
InProgressUploads,
InProgressUpload,
FinishedUploads,
SegregatedFinishedUploads,
InProgressUpload,
} from 'types/upload/ui';
import UploadProgressContext from 'contexts/uploadProgress';
@ -23,9 +21,9 @@ interface Props {
uploadStage: UPLOAD_STAGES;
percentComplete: number;
retryFailed: () => void;
inProgressUploads: InProgressUploads;
inProgressUploads: InProgressUpload[];
uploadFileNames: UploadFileNames;
finishedUploads: FinishedUploads;
finishedUploads: SegregatedFinishedUploads;
hasLivePhotos: boolean;
cancelUploads: () => void;
}
@ -38,37 +36,13 @@ export default function UploadProgress({
retryFailed,
uploadFileNames,
hasLivePhotos,
inProgressUploads,
finishedUploads,
...props
}: Props) {
const appContext = useContext(AppContext);
const [expanded, setExpanded] = useState(true);
const inProgressUploads = useMemo(
() =>
[...props.inProgressUploads.entries()].map(
([localFileID, progress]) =>
({
localFileID,
progress,
} as InProgressUpload)
),
[props.inProgressUploads]
);
const finishedUploads = useMemo(() => {
const finishedUploads = new Map() as SegregatedFinishedUploads;
for (const [localID, result] of props.finishedUploads) {
if (!finishedUploads.has(result)) {
finishedUploads.set(result, []);
}
finishedUploads.get(result).push(localID);
}
return finishedUploads;
}, [props.finishedUploads]);
console.log(finishedUploads);
function confirmCancelUpload() {
appContext.setDialogMessage({
title: constants.STOP_UPLOADS_HEADER,

16
src/components/pages/gallery/Upload.tsx
View file

@ -28,9 +28,9 @@ import DiscFullIcon from '@mui/icons-material/DiscFull';
import { NotificationAttributes } from 'types/Notification';
import {
UploadFileNames,
InProgressUploads,
UploadCounter,
FinishedUploads,
SegregatedFinishedUploads,
InProgressUpload,
} from 'types/upload/ui';
import { UPLOAD_STAGES } from 'constants/upload';
@ -87,11 +87,11 @@ export default function Upload(props: Props) {
finished: 0,
total: 0,
});
const [inProgressUploads, setInProgressUploads] =
useState<InProgressUploads>(new Map());
const [finishedUploads, setFinishedUploads] = useState<FinishedUploads>(
new Map()
);
const [inProgressUploads, setInProgressUploads] = useState<
InProgressUpload[]
>([]);
const [finishedUploads, setFinishedUploads] =
useState<SegregatedFinishedUploads>(new Map());
const [percentComplete, setPercentComplete] = useState(0);
const [hasLivePhotos, setHasLivePhotos] = useState(false);
@ -180,7 +180,7 @@ export default function Upload(props: Props) {
const uploadInit = function () {
setUploadStage(UPLOAD_STAGES.START);
setUploadCounter({ finished: 0, total: 0 });
setInProgressUploads(new Map());
setInProgressUploads([]);
setFinishedUploads(new Map());
setPercentComplete(0);
props.closeCollectionSelector();

42
src/services/upload/uiService.ts
View file

@ -3,14 +3,20 @@ import {
RANDOM_PERCENTAGE_PROGRESS_FOR_PUT,
UPLOAD_STAGES,
} from 'constants/upload';
import { ProgressUpdater } from 'types/upload/ui';
import {
FinishedUploads,
InProgressUpload,
InProgressUploads,
ProgressUpdater,
SegregatedFinishedUploads,
} from 'types/upload/ui';
class UIService {
private perFileProgress: number;
private filesUploaded: number;
private totalFileCount: number;
private inProgressUploads: Map<number, number>;
private finishedUploads: Map<number, UPLOAD_RESULT>;
private inProgressUploads: InProgressUploads;
private finishedUploads: FinishedUploads;
private progressUpdater: ProgressUpdater;
init(progressUpdater: ProgressUpdater) {
@ -88,8 +94,12 @@ class UIService {
}
setPercentComplete(percentComplete);
setInProgressUploads(this.inProgressUploads);
setFinishedUploads(this.finishedUploads);
setInProgressUploads(
this.convertInProgressUploadsToList(this.inProgressUploads)
);
setFinishedUploads(
this.segregatedFinishedUploadsToList(this.finishedUploads)
);
}
trackUploadProgress(
@ -127,6 +137,28 @@ class UIService {
},
};
}
convertInProgressUploadsToList(inProgressUploads) {
return [...inProgressUploads.entries()].map(
([localFileID, progress]) =>
({
localFileID,
progress,
} as InProgressUpload)
);
}
segregatedFinishedUploadsToList(finishedUploads: FinishedUploads) {
const segregatedFinishedUploads =
new Map() as SegregatedFinishedUploads;
for (const [localID, result] of finishedUploads) {
if (!segregatedFinishedUploads.has(result)) {
segregatedFinishedUploads.set(result, []);
}
segregatedFinishedUploads.get(result).push(localID);
}
return segregatedFinishedUploads;
}
}
export default new UIService();

6
src/types/upload/ui.ts
View file

@ -32,9 +32,11 @@ export interface ProgressUpdater {
setUploadCounter: React.Dispatch<React.SetStateAction<UploadCounter>>;
setUploadStage: React.Dispatch<React.SetStateAction<UPLOAD_STAGES>>;
setInProgressUploads: React.Dispatch<
React.SetStateAction<InProgressUploads>
React.SetStateAction<InProgressUpload[]>
>;
setFinishedUploads: React.Dispatch<
React.SetStateAction<SegregatedFinishedUploads>
>;
setFinishedUploads: React.Dispatch<React.SetStateAction<FinishedUploads>>;
setUploadFilenames: React.Dispatch<React.SetStateAction<UploadFileNames>>;
setHasLivePhotos: React.Dispatch<React.SetStateAction<boolean>>;
}