added logic to update data if favorites changes
This commit is contained in:
parent
90d73a660e
commit
8a749abf5e
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue