added logic to update data if favorites changes

This commit is contained in:
Abhinav-grd 2021-03-16 15:58:45 +05:30
parent 90d73a660e
commit 8a749abf5e
2 changed files with 12 additions and 13 deletions

View file

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

View file

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