updated the function calls

src/pages/gallery/index.tsx

@@ -6,7 +6,7 @@ import {
     file,
     getFile,
     getPreview,
-    fetchData,
+    syncData,
     localFiles,
 } from 'services/fileService';
 import { getData, LS_KEYS } from 'utils/storage/localStorage';
@@ -17,16 +17,16 @@ import PhotoSwipe from 'components/PhotoSwipe/PhotoSwipe';
 import { Options } from 'photoswipe';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { VariableSizeList as List } from 'react-window';
-import LoadingBar from 'react-top-loading-bar'
+import LoadingBar from 'react-top-loading-bar';
 import Collections from './components/Collections';
 import Upload from './components/Upload';
 import {
     collection,
-    getLatestCollections,
+    syncCollections,
     collectionLatestFile,
     getCollectionLatestFile,
     getFavItemIds,
-    getLocalCollections
+    getLocalCollections,
 } from 'services/collectionService';
 import constants from 'utils/strings/constants';
 
@@ -37,7 +37,7 @@ enum ITEM_TYPE {
 export enum FILE_TYPE {
     IMAGE,
     VIDEO,
-    OTHERS
+    OTHERS,
 }
 
 interface TimeStampListItem {
@@ -75,9 +75,9 @@ const DeadCenter = styled.div`
     flex-direction: column;
 `;
 
-const ListContainer = styled.div<{columns: number}>`
+const ListContainer = styled.div<{ columns: number }>`
     display: grid;
-    grid-template-columns: repeat(${props => props.columns}, 1fr);
+    grid-template-columns: repeat(${(props) => props.columns}, 1fr);
     grid-column-gap: 8px;
     padding: 0 8px;
     max-width: 100%;
@@ -117,7 +117,7 @@ export default function Gallery(props) {
     const fetching: { [k: number]: boolean } = {};
     const [sinceTime, setSinceTime] = useState(0);
 
-    const [progress, setProgress] = useState(0)
+    const [progress, setProgress] = useState(0);
 
     useEffect(() => {
         const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
@@ -142,19 +142,22 @@ export default function Gallery(props) {
     const syncWithRemote = async () => {
         const token = getToken();
         const encryptionKey = await getActualKey();
-        const {isUpdated, collections} = await getLatestCollections(token, encryptionKey);
-        const data = await fetchData(token, collections);
-        const collectionLatestFile = await getCollectionLatestFile(collections, data);
+        const collections = await syncCollections(token, encryptionKey);
+        const { data, isUpdated } = await syncData(token, collections);
+        const collectionLatestFile = await getCollectionLatestFile(
+            collections,
+            data
+        );
         const favItemIds = await getFavItemIds(data);
+        setCollections(collections);
         if (isUpdated) {
-            setCollections(collections);
             setData(data);
         }
         setCollectionLatestFile(collectionLatestFile);
         setFavItemIds(favItemIds);
-        setSinceTime((new Date()).getTime());
+        setSinceTime(new Date().getTime());
         props.setUploadButtonView(true);
-    }
+    };
 
     const updateUrl = (index: number) => (url: string) => {
         data[index] = {
@@ -163,7 +166,10 @@ export default function Gallery(props) {
             w: window.innerWidth,
             h: window.innerHeight,
         };
-        if (data[index].metadata.fileType === FILE_TYPE.VIDEO && !data[index].html) {
+        if (
+            data[index].metadata.fileType === FILE_TYPE.VIDEO &&
+            !data[index].html
+        ) {
             data[index].html = `
                 <div class="video-loading">
                     <img src="${url}" />
@@ -174,7 +180,10 @@ export default function Gallery(props) {
             `;
             delete data[index].src;
         }
-        if (data[index].metadata.fileType === FILE_TYPE.IMAGE && !data[index].src) {
+        if (
+            data[index].metadata.fileType === FILE_TYPE.IMAGE &&
+            !data[index].src
+        ) {
             data[index].src = url;
         }
         setData(data);
@@ -241,7 +250,10 @@ export default function Gallery(props) {
                 // ignore
             }
         }
-        if ((!item.src || item.src === item.msrc) && !fetching[item.dataIndex]) {
+        if (
+            (!item.src || item.src === item.msrc) &&
+            !fetching[item.dataIndex]
+        ) {
             fetching[item.dataIndex] = true;
             const url = await getFile(token, item);
             updateSrcUrl(item.dataIndex, url);
@@ -269,8 +281,8 @@ export default function Gallery(props) {
 
     if (!data || loading) {
         return (
-            <div className='text-center'>
-                <Spinner animation='border' variant='primary' />
+            <div className="text-center">
+                <Spinner animation="border" variant="primary" />
             </div>
         );
     }
@@ -311,7 +323,7 @@ export default function Gallery(props) {
     return (
         <>
             <LoadingBar
-                color='#007bff'
+                color="#007bff"
                 progress={progress}
                 onLoaderFinished={() => setProgress(0)}
             />
@@ -326,7 +338,6 @@ export default function Gallery(props) {
                 showUploadModal={props.showUploadModal}
                 collectionLatestFile={collectionLatestFile}
                 refetchData={syncWithRemote}
-
             />
             {filteredData.length ? (
                 <Container>
@@ -349,20 +360,28 @@ export default function Gallery(props) {
                             filteredData.forEach((item, index) => {
                                 if (
                                     !isSameDay(
-                                        new Date(item.metadata.creationTime / 1000),
+                                        new Date(
+                                            item.metadata.creationTime / 1000
+                                        ),
                                         new Date(currentDate)
                                     )
                                 ) {
-                                    currentDate = item.metadata.creationTime / 1000;
-                                    const dateTimeFormat = new Intl.DateTimeFormat('en-IN', {
-                                        weekday: 'short',
-                                        year: 'numeric',
-                                        month: 'long',
-                                        day: 'numeric',
-                                    });
+                                    currentDate =
+                                        item.metadata.creationTime / 1000;
+                                    const dateTimeFormat = new Intl.DateTimeFormat(
+                                        'en-IN',
+                                        {
+                                            weekday: 'short',
+                                            year: 'numeric',
+                                            month: 'long',
+                                            day: 'numeric',
+                                        }
+                                    );
                                     timeStampList.push({
                                         itemType: ITEM_TYPE.TIME,
-                                        date: dateTimeFormat.format(currentDate),
+                                        date: dateTimeFormat.format(
+                                            currentDate
+                                        ),
                                     });
                                     timeStampList.push({
                                         itemType: ITEM_TYPE.TILE,
@@ -372,7 +391,9 @@ export default function Gallery(props) {
                                     listItemIndex = 1;
                                 } else {
                                     if (listItemIndex < columns) {
-                                        timeStampList[timeStampList.length - 1].items.push(item);
+                                        timeStampList[
+                                            timeStampList.length - 1
+                                        ].items.push(item);
                                         listItemIndex++;
                                     } else {
                                         listItemIndex = 1;
@@ -388,7 +409,8 @@ export default function Gallery(props) {
                             return (
                                 <List
                                     itemSize={(index) =>
-                                        timeStampList[index].itemType === ITEM_TYPE.TIME
+                                        timeStampList[index].itemType ===
+                                        ITEM_TYPE.TIME
                                             ? 45
                                             : 200
                                     }
@@ -398,18 +420,46 @@ export default function Gallery(props) {
                                     key={`${router.query.collection}-${columns}-${sinceTime}`}
                                 >
                                     {({ index, style }) => {
-                                        return (<ListItem style={style}>
-                                            <ListContainer columns={timeStampList[index].itemType === ITEM_TYPE.TIME
-                                                ? 1 : columns}>
-                                                {
-                                                    timeStampList[index].itemType === ITEM_TYPE.TIME
-                                                        ? <DateContainer>{timeStampList[index].date}</DateContainer>
-                                                        : timeStampList[index].items.map((item, idx) =>{
-                                                            return getThumbnail(filteredData, timeStampList[index].itemStartIndex + idx);
-                                                        })
-                                                }
-                                            </ListContainer>
-                                        </ListItem>);
+                                        return (
+                                            <ListItem style={style}>
+                                                <ListContainer
+                                                    columns={
+                                                        timeStampList[index]
+                                                            .itemType ===
+                                                        ITEM_TYPE.TIME
+                                                            ? 1
+                                                            : columns
+                                                    }
+                                                >
+                                                    {timeStampList[index]
+                                                        .itemType ===
+                                                    ITEM_TYPE.TIME ? (
+                                                        <DateContainer>
+                                                            {
+                                                                timeStampList[
+                                                                    index
+                                                                ].date
+                                                            }
+                                                        </DateContainer>
+                                                    ) : (
+                                                        timeStampList[
+                                                            index
+                                                        ].items.map(
+                                                            (item, idx) => {
+                                                                return getThumbnail(
+                                                                    filteredData,
+                                                                    timeStampList[
+                                                                        index
+                                                                    ]
+                                                                        .itemStartIndex +
+                                                                        idx
+                                                                );
+                                                            }
+                                                        )
+                                                    )}
+                                                </ListContainer>
+                                            </ListItem>
+                                        );
                                     }}
                                 </List>
                             );
@@ -426,10 +476,10 @@ export default function Gallery(props) {
                     />
                 </Container>
             ) : (
-                    <DeadCenter>
-                        <div>{constants.NOTHING_HERE}</div>
-                    </DeadCenter>
-                )}
+                <DeadCenter>
+                    <div>{constants.NOTHING_HERE}</div>
+                </DeadCenter>
+            )}
         </>
     );
 }