Merge branch 'master' into stripe-integration

src/components/PhotoSwipe/PhotoSwipe.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Photoswipe from 'photoswipe';
 import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default';
 import classnames from 'classnames';
@@ -16,12 +16,11 @@ interface Iprops {
     isOpen: boolean;
     items: any[];
     currentIndex?: number;
-    onClose?: () => void;
+    onClose?: (needUpdate: boolean) => void;
     gettingData: (instance: any, index: number, item: file) => void;
     id?: string;
     className?: string;
     favItemIds: Set<number>;
-    setFavItemIds: (favItemIds: Set<number>) => void;
     loadingBar: any;
 }
 
@@ -31,6 +30,7 @@ function PhotoSwipe(props: Iprops) {
 
     const { isOpen } = props;
     const [isFav, setIsFav] = useState(false);
+    const needUpdate = useRef(false);
 
     useEffect(() => {
         if (!pswpElement) {
@@ -88,6 +88,7 @@ function PhotoSwipe(props: Iprops) {
         });
         photoSwipe.listen('beforeChange', updateFavButton);
         photoSwipe.init();
+        needUpdate.current = false;
         setPhotoSwipe(photoSwipe);
     };
 
@@ -106,8 +107,8 @@ function PhotoSwipe(props: Iprops) {
 
     const handleClose = () => {
         const { onClose } = props;
-        if (onClose) {
-            onClose();
+        if (typeof onClose === 'function') {
+            onClose(needUpdate.current);
         }
         var videoTags = document.getElementsByTagName('video');
         for (var videoTag of videoTags) {
@@ -122,18 +123,17 @@ function PhotoSwipe(props: Iprops) {
     };
 
     const onFavClick = async (file) => {
-        const { favItemIds, setFavItemIds } = props;
+        const { favItemIds } = props;
         if (!isInFav(file)) {
             favItemIds.add(file.id);
             await addToFavorites(file);
             setIsFav(true);
-            setFavItemIds(favItemIds);
         } else {
             favItemIds.delete(file.id);
             await removeFromFavorites(file);
             setIsFav(false);
-            setFavItemIds(favItemIds);
         }
+        needUpdate.current = true;
     };
     const downloadFile = async (file) => {
         const { loadingBar } = props;

src/pages/gallery/index.tsx

@@ -166,9 +166,7 @@ export default function Gallery(props: Props) {
             const favItemIds = await getFavItemIds(data);
             setFavItemIds(favItemIds);
 
-            loadingBar.current?.continuousStart();
             await syncWithRemote();
-            loadingBar.current?.complete();
             setIsFirstLoad(false);
         };
         main();
@@ -176,6 +174,7 @@ export default function Gallery(props: Props) {
     }, []);
 
     const syncWithRemote = async () => {
+        loadingBar.current?.continuousStart();
         const collections = await syncCollections();
         const { data, isUpdated } = await syncData(collections);
         const nonEmptyCollections = getNonEmptyCollections(collections, data);
@@ -191,6 +190,7 @@ export default function Gallery(props: Props) {
         setCollectionAndItsLatestFile(collectionAndItsLatestFile);
         setFavItemIds(favItemIds);
         setSinceTime(new Date().getTime());
+        loadingBar.current?.complete();
     };
 
     const updateUrl = (index: number) => (url: string) => {
@@ -242,9 +242,9 @@ export default function Gallery(props: Props) {
         setData(data);
     };
 
-    const handleClose = () => {
+    const handleClose = (needUpdate) => {
         setOpen(false);
-        // syncWithRemote();
+        needUpdate && syncWithRemote();
     };
 
     const onThumbnailClick = (index: number) => () => {
@@ -526,7 +526,6 @@ export default function Gallery(props: Props) {
                         onClose={handleClose}
                         gettingData={getSlideData}
                         favItemIds={favItemIds}
-                        setFavItemIds={setFavItemIds}
                         loadingBar={loadingBar}
                     />
                 </Container>

src/services/fileService.ts

@@ -72,13 +72,14 @@ export const syncFiles = async (collections: collection[]) => {
         let fetchedFiles =
             (await getFiles(collection, lastSyncTime, DIFF_LIMIT)) ?? [];
         files.push(...fetchedFiles);
-        var latestVersionFiles = new Map<number, file>();
+        var latestVersionFiles = new Map<string, file>();
         files.forEach((file) => {
+            const uid = `${file.collectionID}-${file.id}`;
             if (
-                !latestVersionFiles.has(file.id) ||
-                latestVersionFiles.get(file.id).updationTime < file.updationTime
+                !latestVersionFiles.has(uid) ||
+                latestVersionFiles.get(uid).updationTime < file.updationTime
             ) {
-                latestVersionFiles.set(file.id, file);
+                latestVersionFiles.set(uid, file);
             }
         });
         files = [];

src/services/userService.ts

@@ -4,7 +4,7 @@ import { getEndpoint } from 'utils/common/apiUtil';
 import { clearKeys } from 'utils/storage/sessionStorage';
 import router from 'next/router';
 import { clearData } from 'utils/storage/localStorage';
-import localForage from 'localforage';
+import localForage from 'utils/storage/localForage';
 
 const ENDPOINT = getEndpoint();