stepus53/photos
1
0
Fork 0
mirror of https://github.com/usatiuk/photos.git synced 2025-10-28 15:27:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix photos being downloaded many times

Browse Source
This commit is contained in:
Stepan Usatiuk
2020-12-26 08:24:27 +00:00
committed by Stepan Usatiuk
parent b1adf9afe1
commit 991deaa9bc
1 changed files with 39 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/Photos/Photo.tsx
View File

@@ -25,36 +25,66 @@ export interface IPhotoComponentProps {
export const PhotoComponent: React.FunctionComponent<IPhotoComponentProps> = ( export const PhotoComponent: React.FunctionComponent<IPhotoComponentProps> = (
props, props,
) => { ) => {
const [
smallPreviewFetching,
setSmallPreviewFetching,
] = React.useState<boolean>(false);
const [
largePreviewFetching,
setLargePreviewFetching,
] = React.useState<boolean>(false);
const [originalFetching, setOriginalFetching] = React.useState<boolean>(
false,
);
const [smallPreview, setSmallPreview] = React.useState<string | null>(null); const [smallPreview, setSmallPreview] = React.useState<string | null>(null);
const [largePreview, setLargePreview] = React.useState<string | null>(null); const [largePreview, setLargePreview] = React.useState<string | null>(null);
const [original, setOriginal] = React.useState<string | null>(null); const [original, setOriginal] = React.useState<string | null>(null);
const imgRef = React.useRef<HTMLImageElement>(null); const imgRef = React.useRef<HTMLImageElement>(null);
React.useEffect(() => { React.useEffect(() => {
async function fetchSizes() { async function fetchSmall() {
if (props.photo && !smallPreview) { if (props.photo && !smallPreview && !smallPreviewFetching) {
setSmallPreviewFetching(true);
const smallPreviewFetch = await fetch( const smallPreviewFetch = await fetch(
getPhotoThumbPath(props.photo, PreviewSize), getPhotoThumbPath(props.photo, PreviewSize),
); );
setSmallPreview( setSmallPreview(
URL.createObjectURL(await smallPreviewFetch.blob()), URL.createObjectURL(await smallPreviewFetch.blob()),
); );
//console.log("got small");
} }
if (props.photo && !largePreview) { }
void fetchSmall();
}, [smallPreview, smallPreviewFetching]);
React.useEffect(() => {
async function fetchLarge() {
if (props.photo && !largePreview && !largePreviewFetching) {
setLargePreviewFetching(true);
const largePreviewFetch = await fetch( const largePreviewFetch = await fetch(
getPhotoThumbPath(props.photo, LargeSize), getPhotoThumbPath(props.photo, LargeSize),
); );
setLargePreview( setLargePreview(
URL.createObjectURL(await largePreviewFetch.blob()), URL.createObjectURL(await largePreviewFetch.blob()),
); );
} //console.log("got large");
if (props.photo && !original) {
const originalFetch = await fetch(getPhotoImgPath(props.photo));
setOriginal(URL.createObjectURL(await originalFetch.blob()));
} }
} }
void fetchSizes(); void fetchLarge();
}); }, [largePreview, largePreviewFetching]);
React.useEffect(() => {
async function fetchOriginal() {
if (props.photo && !original && !originalFetching) {
setOriginalFetching(true);
const originalFetch = await fetch(getPhotoImgPath(props.photo));
setOriginal(URL.createObjectURL(await originalFetch.blob()));
//console.log("got original");
}
}
void fetchOriginal();
}, [original, originalFetching]);
if (!props.photo && !props.photoState?.fetching) { if (!props.photo && !props.photoState?.fetching) {
props.fetchPhoto(props.id); props.fetchPhoto(props.id);