56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import {useEffect, useState} from "react";
|
|
import {Photo} from "react-photo-album";
|
|
import Box from '@mui/material/Box';
|
|
import CssBaseline from '@mui/material/CssBaseline';
|
|
import {Folders} from "./ImageGallery/models";
|
|
import {useLocation} from "react-router-dom";
|
|
import ImageGalleryAppBar from "./ImageGallery/ImageGalleryAppBar";
|
|
import DrawerHeader from "./MuiLayout/DrawerHeader";
|
|
import ImageGalleryDrawer from "./ImageGallery/ImageGalleryDrawer";
|
|
import ImageGallery from "./ImageGallery/ImageGallery";
|
|
import Main from "./MuiLayout/Main";
|
|
|
|
const drawerWidth = 240;
|
|
|
|
function ImageGalleryLayout() {
|
|
const [open, setOpen] = useState(true);
|
|
const [folders, setFolders] = useState<Folders>({name: "Home", fullPath: "/", numberOfFiles: 0, children: []});
|
|
const location = useLocation();
|
|
|
|
const handleDrawerOpen = () => {
|
|
setOpen(true);
|
|
};
|
|
|
|
const handleDrawerClose = () => {
|
|
setOpen(false);
|
|
};
|
|
const [images, setImages] = useState<Photo[]>([]);
|
|
|
|
useEffect(() => {
|
|
fetch(`/api/${location.pathname}`)
|
|
.then((res) => res.json())
|
|
.then((data) => setImages(data.images));
|
|
}, [location.pathname]);
|
|
|
|
useEffect(() => {
|
|
fetch("/directories")
|
|
.then((res) => res.json())
|
|
.then((data) => setFolders(data));
|
|
}, []);
|
|
|
|
return (
|
|
<Box sx={{display: 'flex'}}>
|
|
<CssBaseline/>
|
|
<ImageGalleryAppBar open={open} drawerWidth={drawerWidth} onDrawerOpenClick={handleDrawerOpen}/>
|
|
<ImageGalleryDrawer open={open} drawerWidth={drawerWidth} folder={folders} onDrawerCloseClick={handleDrawerClose}/>
|
|
<Main open={open} drawerwidth={drawerWidth}>
|
|
<DrawerHeader/>
|
|
<ImageGallery images={images}/>
|
|
</Main>
|
|
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default ImageGalleryLayout;
|