90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import Box from "@mui/material/Box";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
import Toolbar from "@mui/material/Toolbar";
|
|
import { Chip, Divider } from "@mui/material";
|
|
import { FolderPreview, ImageWithThumbnail } from "./models";
|
|
import { Spinner } from "./Spinner";
|
|
import { FolderGallery } from "./FolderGallery";
|
|
import { ImageGallery } from "./ImageGallery";
|
|
|
|
export const ImageGalleryMain = ({
|
|
setError,
|
|
}: {
|
|
setError: (_: boolean) => void;
|
|
}) => {
|
|
const [imagesLoaded, setImagesLoaded] = useState(false);
|
|
const [images, setImages] = useState<ImageWithThumbnail[]>([]);
|
|
|
|
const [foldersPreview, setFoldersPreview] = useState<
|
|
FolderPreview[] | undefined
|
|
>([]);
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
setFoldersPreview(undefined);
|
|
setImages([]);
|
|
setError(false);
|
|
setImagesLoaded(false);
|
|
fetch(`/folderspreview${location.pathname}`, {
|
|
headers: {
|
|
Accept: "application/json",
|
|
},
|
|
})
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
setFoldersPreview(data);
|
|
});
|
|
fetch(`/images${location.pathname}`, {
|
|
headers: {
|
|
Accept: "application/json",
|
|
},
|
|
})
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
if (data.images === undefined) {
|
|
if (location.pathname !== "/") {
|
|
navigate("/");
|
|
} else {
|
|
setError(true);
|
|
}
|
|
} else {
|
|
setImages(data.images);
|
|
setImagesLoaded(true);
|
|
}
|
|
});
|
|
}, [location.pathname]);
|
|
|
|
return (
|
|
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
|
<Toolbar />
|
|
{!imagesLoaded || !foldersPreview ? (
|
|
<Spinner />
|
|
) : (
|
|
<>
|
|
{foldersPreview.length > 0 && (
|
|
<>
|
|
<Divider style={{ marginBottom: "10px" }}>
|
|
<Chip label="Folders" size="small" />
|
|
</Divider>
|
|
<FolderGallery folders={foldersPreview} />
|
|
</>
|
|
)}
|
|
{images.length > 0 && foldersPreview.length > 0 && (
|
|
<Divider style={{ marginBottom: "10px" }}>
|
|
<Chip label="Images" size="small" />
|
|
</Divider>
|
|
)}
|
|
{images.length > 0 && <ImageGallery images={images} />}
|
|
{images.length == 0 && foldersPreview.length == 0 && (
|
|
<p>
|
|
No images available. You may want to add images to this directory.
|
|
</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|