1  import { useState, useEffect } from "react";
 2  import { styled, Box } from "@mui/material";
 3  import useAuth from "app/hooks/useAuth";
 4  import ProjectLogs from "./components/ProjectLogs";
 5  import Breadcrumb from "app/components/Breadcrumb";
 6  import { useParams } from "react-router-dom";
 7  import api from "app/utils/api";
 8  
 9  const Container = styled("div")(({ theme }) => ({
10    margin: 10,
11    [theme.breakpoints.down("sm")]: { margin: 16 },
12    "& .breadcrumb": { marginBottom: 30, [theme.breakpoints.down("sm")]: { marginBottom: 16 } }
13  }));
14  
15  const ContentBox = styled("div")(({ theme }) => ({
16    margin: "30px",
17    [theme.breakpoints.down("sm")]: { margin: "16px" }
18  }));
19  
20  export default function Logs() {
21    const { id } = useParams();
22    const [project, setProject] = useState({});
23    const auth = useAuth();
24  
25    const fetchProject = (projectID) => {
26      auth.checkAuth();
27      return api.get("/projects/" + projectID, auth.user.token)
28        .then((d) => {
29          setProject(d)
30          return d
31        }).catch(() => {});
32    }
33  
34    useEffect(() => {
35      document.title = (process.env.REACT_APP_RESTAI_NAME || "RESTai") + ' - Logs - ' + id;
36      fetchProject(id);
37    }, [id]);
38  
39    return (
40      <Container>
41        <Box className="breadcrumb">
42          <Breadcrumb routeSegments={[{ name: "Projects", path: "/projects" }, { name: id, path: "/project/" + id }, { name: "Logs", path: "/project/" + id + "/logs" }]} />
43        </Box>
44  
45        <ContentBox className="analytics">
46          <ProjectLogs project={project} />
47        </ContentBox>
48      </Container>
49    );
50  }