1  import { useState, useEffect } from "react";
 2  import { Grid, styled, Box } from "@mui/material";
 3  import useAuth from "app/hooks/useAuth";
 4  import ProjectEvals from "./components/ProjectEvals";
 5  import Breadcrumb from "app/components/Breadcrumb";
 6  import { useParams } from "react-router-dom";
 7  import { useTranslation } from "react-i18next";
 8  import api from "app/utils/api";
 9  
10  const Container = styled("div")(({ theme }) => ({
11    margin: 10,
12    [theme.breakpoints.down("sm")]: { margin: 16 },
13    "& .breadcrumb": { marginBottom: 30, [theme.breakpoints.down("sm")]: { marginBottom: 16 } }
14  }));
15  
16  const ContentBox = styled("div")(({ theme }) => ({
17    margin: "30px",
18    [theme.breakpoints.down("sm")]: { margin: "16px" }
19  }));
20  
21  export default function ProjectEvalsView() {
22    const { t } = useTranslation();
23    const { id } = useParams();
24    const [project, setProject] = useState({});
25    const auth = useAuth();
26  
27    const fetchProject = (projectID) => {
28      return api.get("/projects/" + projectID, auth.user.token)
29        .then((d) => setProject(d))
30        .catch(() => {});
31    };
32  
33    useEffect(() => {
34      fetchProject(id);
35    }, [id]);
36  
37    useEffect(() => {
38      document.title = (process.env.REACT_APP_RESTAI_NAME || "RESTai") + " - " + t("projects.edit.tabs.evals") + " - " + id;
39    }, [id, t]);
40  
41    return (
42      <Container>
43        <Box className="breadcrumb">
44          <Breadcrumb
45            routeSegments={[
46              { name: t("nav.projects"), path: "/projects" },
47              { name: project.name || id, path: "/project/" + id },
48              { name: t("projects.edit.tabs.evals"), path: "/project/" + id + "/evals" },
49            ]}
50          />
51        </Box>
52  
53        <ContentBox>
54          <Grid container spacing={3}>
55            <Grid item lg={12} md={12} sm={12} xs={12}>
56              {project.name && <ProjectEvals project={project} />}
57            </Grid>
58          </Grid>
59        </ContentBox>
60      </Container>
61    );
62  }