Hw4

package.json

@@ -13,6 +13,7 @@
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.8.2",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.13.8",
     "react-toastify": "^10.0.5",
     "styled-components": "^5.3.8",
     "uuid": "^9.0.0",

src/App.jsx

@@ -7,6 +7,7 @@ import client from './lib/apolloClient';
 import HomePage from "./pages/HomePage";
 import InfoPage from "./pages/InfoPage";
 import ProjectsPage from "./pages/ProjectsPage";
+import ProjectPage from "./pages/ProjectPage";
 
 const App = () => {
   const [message, setMessage] = useState("");
@@ -31,6 +32,7 @@ const App = () => {
             <Route path="/" element={<HomePage />} />
             <Route path="/info" element={<InfoPage />} />
             <Route path="/projects" element={<ProjectsPage />} />
+            <Route path="/projects/:id" element={<ProjectPage/>} />
             <Route path="*" element={<Navigate to="/" replace />} />
           </Routes>
         </BrowserRouter>

src/components/atoms/Error/Error.jsx

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import { Alert, Button } from "react-bootstrap";
+
+const Error = ({ errorText }) => {
+    const [show , setShow] = useState(true)
+
+    if (show) {
+        return (
+            <Alert variant="danger" onClose={() => setShow(false)} dismissible>
+                <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
+                <p>
+                    { errorText }
+                </p>
+            </Alert>
+        );
+    }
+    return <Button onClick={() => setShow(true)}>Show Alert</Button>;
+}
+
+export default Error;

src/components/atoms/Error/index.js

@@ -0,0 +1 @@
+export { default } from "./Error";

src/components/atoms/Loader/Loader.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { PropagateLoader } from "react-spinners";
+
+const Loader = () => {
+    return(
+        <PropagateLoader color="#36d7b7" />
+    )
+}
+
+export default Loader;

src/components/atoms/Loader/index.js

@@ -0,0 +1 @@
+export { default } from "./Loader";

src/components/organisms/ProjectInfo/ProjectInfo.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { Button, Card } from "react-bootstrap";
+import { Link } from "react-router-dom";
+
+const ProjectInfo = ({ project }) => {
+    return (
+        <Card>
+            <Card.Header>Project name: {project.name}</Card.Header>
+            <Card.Body>
+                <Card.Title>Project description</Card.Title>
+                <Card.Text>{project.description}</Card.Text>
+                <Link to="/projects">
+                    <Button variant="primary">Go back</Button>
+                </Link>
+            </Card.Body>
+        </Card>
+    );
+}
+
+export default ProjectInfo;

src/components/organisms/ProjectInfo/index.js

@@ -0,0 +1 @@
+export { default } from "./ProjectInfo";

src/components/organisms/ProjectsTable/ProjectsTable.jsx

@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom';
+
 import Button from 'react-bootstrap/Button';
 
 import { useState, useContext } from 'react';
@@ -49,7 +51,9 @@ const ProjectsTable = ({ projects }) => {
 
                 <TableColActions>
                   <Button variant="light" onClick={() => {}}>Edit</Button>
-                  <Button variant="light" onClick={() => {}}>Show</Button>
+                  <Link to={`/projects/${id}`}>
+                    <Button variant="light" onClick={() => {}}>Show</Button>
+                  </Link>
                   <Button variant="danger" onClick={() => handleOpenModal({ id, name, description })}>Delete</Button>
                 </TableColActions>
               </tr>

src/graphql/queries/project.js

@@ -4,7 +4,7 @@ import projectFragment from "../fragments/projectFragment";
 
 export default gql`
   ${projectFragment}
-  query Project($projectId: ID!) {
+  query ProjectQuerry($projectId: ID!) {
     project(id: $projectId) {
       ...ProjectInfo
     }

src/lib/apolloClient.js

@@ -2,7 +2,8 @@ import { ApolloClient, InMemoryCache } from '@apollo/client';
 
 const client = new ApolloClient({
   uri: process.env.REACT_APP_API_URL,
-  cache: new InMemoryCache()
+  cache: new InMemoryCache(),
+  connectToDevTools: true,
 });
 
 export default client;

src/lib/hooks/project.js

@@ -1,34 +1,16 @@
 import { useQuery } from "@apollo/client";
 
-import Projects from "src/graphql/queries/projects";
-import Project from "src/graphql/queries/project";
-
-export const useProjects = () => {
-  const { data, loading, error } = useQuery(Projects, {
-    fetchPolicy: "cache-and-network",
-  });
-
-  return {
-    loading,
-    error,
-    projects: data?.projects || [],
-  }
-};
-
-
-
-
-
+import ProjectQuerry from "src/graphql/queries/project";
 
 export const useProject = ({ projectId }) => {
-  const { data, loading, error } = useQuery(Project, {
-    fetchPolicy: "cache-and-network",
-    variables: { projectId }
-  });
-
-  return {
-    project: data?.project || {},
-    loading,
-    error,
-  };
-}
+    const { data, loading, error } = useQuery(ProjectQuerry, {
+        fetchPolicy: "cache-and-network",
+        variables: { projectId },
+    });
+
+    return {
+        loading,
+        error,
+        project: data?.project || {},
+    }
+};

src/lib/hooks/projects.js

@@ -0,0 +1,15 @@
+import { useQuery } from "@apollo/client";
+
+import Projects from "src/graphql/queries/projects";
+
+export const useProjects = () => {
+    const { data, loading, error } = useQuery(Projects, {
+        fetchPolicy: "cache-and-network",
+    });
+
+    return {
+        loading,
+        error,
+        projects: data?.projects || [],
+    }
+};

src/pages/ProjectPage.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+
+import ProjectInfo from "src/components/organisms/ProjectInfo";
+import Error from "src/components/atoms/Error";
+import Loader from "src/components/atoms/Loader";
+
+import { useProject } from "../lib/hooks/project";
+
+import DefaultTemplate from "../components/templates/DefaultTemplate";
+
+const ProjectPage = () => {
+    const { id } = useParams()
+    const { project, loading, error } = useProject({projectId: id})
+    console.log(project)
+
+    return(
+        <DefaultTemplate>
+            <h2> Project info</h2>
+            {error && !loading && 
+                <div>
+                    <Error errorText={error}/>
+                </div>}
+
+            {loading && 
+                <center>
+                    <Loader/>
+                </center>}
+
+            {project && !loading && <ProjectInfo project={project} />}
+        </DefaultTemplate>
+    );
+};
+export default ProjectPage;

src/pages/ProjectsPage.jsx

@@ -1,7 +1,9 @@
+import Error from "../components/atoms/Error";
+import Loader from "../components/atoms/Loader";
 import DefaultTemplate from "../components/templates/DefaultTemplate";
 import ProjectsTable from '../components/organisms/ProjectsTable';
 
-import { useProjects } from "../lib/hooks/project";
+import { useProjects } from "../lib/hooks/projects";
 
 const ProjectsPage = () => {
   const { projects, loading, error } = useProjects();
@@ -10,9 +12,15 @@ const ProjectsPage = () => {
     <DefaultTemplate>
       <h2>Projects List</h2>
 
-      {error && !loading && <div>Ошибка</div>}
+      {error && !loading && 
+        <div>
+          <Error errorText={error}/>
+        </div>}
 
-      {loading && <div>Загрузка...</div>}
+      {loading && 
+        <center>
+          <Loader/>
+        </center>}
 
       {projects && !loading && <ProjectsTable projects={projects} />}
     </DefaultTemplate>