From 95d50cc3c3c92c44f0ce14e64557a022e198016a Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Mon, 8 Feb 2021 21:45:21 +0530 Subject: [PATCH] updated the function calls --- src/pages/gallery/index.tsx | 146 ++++++++++++++++++++++++------------ 1 file changed, 98 insertions(+), 48 deletions(-) diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index 679beb225..8ed08ecde 100644 --- a/src/pages/gallery/index.tsx +++ b/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 = `
@@ -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 ( -
- +
+
); } @@ -311,7 +323,7 @@ export default function Gallery(props) { return ( <> setProgress(0)} /> @@ -326,7 +338,6 @@ export default function Gallery(props) { showUploadModal={props.showUploadModal} collectionLatestFile={collectionLatestFile} refetchData={syncWithRemote} - /> {filteredData.length ? ( @@ -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 ( - 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 ( - - { - timeStampList[index].itemType === ITEM_TYPE.TIME - ? {timeStampList[index].date} - : timeStampList[index].items.map((item, idx) =>{ - return getThumbnail(filteredData, timeStampList[index].itemStartIndex + idx); - }) - } - - ); + return ( + + + {timeStampList[index] + .itemType === + ITEM_TYPE.TIME ? ( + + { + timeStampList[ + index + ].date + } + + ) : ( + timeStampList[ + index + ].items.map( + (item, idx) => { + return getThumbnail( + filteredData, + timeStampList[ + index + ] + .itemStartIndex + + idx + ); + } + ) + )} + + + ); }} ); @@ -426,10 +476,10 @@ export default function Gallery(props) { /> ) : ( - -
{constants.NOTHING_HERE}
- - )} + +
{constants.NOTHING_HERE}
+ + )} ); }