1  import { useState, useEffect } from "react";
 2  import { Grid, styled, Box } from "@mui/material";
 3  import useAuth from "app/hooks/useAuth";
 4  import ProjectEdit from "./components/ProjectEdit";
 5  import Breadcrumb from "app/components/Breadcrumb";
 6  import { useParams } from "react-router-dom";
 7  import api from "app/utils/api";
 8  
 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  
22  export default function ProjectNewView() {
23    const { id } = useParams();
24    const [projects, setProjects] = useState([]);
25    const [project, setProject] = useState({});
26    const [info, setInfo] = useState({ "version": "", "embeddings": [], "llms": [], "loaders": [] });
27    const auth = useAuth();
28  
29  
30    const fetchProjects = () => {
31      return api.get("/projects", auth.user.token)
32        .then((d) => {
33          setProjects(d.projects)
34        })
35        .catch(() => {});
36    }
37  
38    const fetchInfo = () => {
39      return api.get("/info", auth.user.token)
40        .then((d) => setInfo(d))
41        .catch(() => {});
42    }
43  
44    const fetchProject = (projectID) => {
45      return api.get("/projects/" + projectID, auth.user.token)
46        .then((d) => {
47          setProject(d)
48          return d
49        }).catch(() => {});
50    }
51  
52    useEffect(() => {
53      fetchProject(id);
54    }, [id]);
55  
56    useEffect(() => {
57      document.title = (process.env.REACT_APP_RESTAI_NAME || "RESTai") + ' - Edit Project - ' + id;
58      fetchProjects();
59      fetchInfo();
60    }, []);
61  
62  
63    return (
64      <Container>
65        <Box className="breadcrumb">
66          <Breadcrumb routeSegments={[{ name: "Projects", path: "/projects"}, { name: id, path: "/project/" + id }, { name: "Edit" }]} />
67        </Box>
68  
69        <ContentBox className="analytics">
70          <Grid container spacing={3}>
71            <Grid item lg={12} md={8} sm={12} xs={12}>
72              <ProjectEdit project={project} projects={projects} info={info} />
73            </Grid>
74          </Grid>
75        </ContentBox>
76      </Container>
77    );
78  }