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 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;

View file

@ -159,9 +159,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();
@ -169,6 +167,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);
@ -184,6 +183,7 @@ export default function Gallery(props: Props) {
setCollectionAndItsLatestFile(collectionAndItsLatestFile);
setFavItemIds(favItemIds);
setSinceTime(new Date().getTime());
loadingBar.current?.complete();
};
const updateUrl = (index: number) => (url: string) => {
@ -235,9 +235,9 @@ export default function Gallery(props: Props) {
setData(data);
};
const handleClose = () => {
const handleClose = (needUpdate) => {
setOpen(false);
// syncWithRemote();
needUpdate && syncWithRemote();
};
const onThumbnailClick = (index: number) => () => {
@ -504,7 +504,6 @@ export default function Gallery(props: Props) {
onClose={handleClose}
gettingData={getSlideData}
favItemIds={favItemIds}
setFavItemIds={setFavItemIds}
loadingBar={loadingBar}
/>
</Container>