Hw 23

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 ProjectInfoPage from "./pages/ProjectInfoPage";
 
 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={<ProjectInfoPage />} />
             <Route path="*" element={<Navigate to="/" replace />} />
           </Routes>
         </BrowserRouter>

src/components/atoms/ErrorWindow/ErrorWindow.jsx

@@ -0,0 +1,14 @@
+// eslint-disable-next-line import/named
+import {ErrorWindowDesc, ErrorWindowTitle, StyledErrorWindow} from './styled';
+
+const ErrorWindow = ({ title, desc }) => {
+
+  return (
+    <StyledErrorWindow>
+      <ErrorWindowTitle> {title}</ErrorWindowTitle>
+      <ErrorWindowDesc>{desc}</ErrorWindowDesc>
+    </StyledErrorWindow>
+  )
+}
+
+export default ErrorWindow;

src/components/atoms/ErrorWindow/index.js

@@ -0,0 +1 @@
+export { default } from './ErrorWindow';

src/components/atoms/ErrorWindow/styled.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const StyledErrorWindow = styled.div`
+    background-color: #CD5C5C;
+    border-radius: 6px;
+    border: 4px solid #C41E3A;
+`;
+
+export const ErrorWindowTitle = styled.h3`
+    padding: 1rem;
+`;
+
+export const ErrorWindowDesc = styled.p`
+    font-weight: bolder;
+    padding: 1rem;
+`;

src/components/atoms/Loader/Loader.jsx

@@ -0,0 +1,10 @@
+import { StyledLoader } from './styled';
+
+const Loader = () => {
+
+  return (
+    <StyledLoader />
+  )
+}
+
+export default Loader;

src/components/atoms/Loader/index.js

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

src/components/atoms/Loader/styled.js

@@ -0,0 +1,15 @@
+import styled, {css, keyframes} from 'styled-components';
+
+const rotate = keyframes`
+  100%   {transform: rotate(360deg)}
+`;
+
+export const StyledLoader = styled.span`
+  width: 48px;
+  height: 48px;
+  border: 5px solid #000;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  margin: 0 auto;
+  animation: ${rotate} 1s linear infinite;
+`;

src/components/organisms/ProjectInfo/ProjectInfo.jsx

@@ -0,0 +1,15 @@
+// eslint-disable-next-line import/named
+import {ProjectDescription, ProjectTitle} from "./styled";
+
+
+const ProjectInfo = ({ project }) => {
+
+  return (
+    <>
+      <ProjectTitle>{project.name}</ProjectTitle>
+      <ProjectDescription>{project.description}</ProjectDescription>
+    </>
+  );
+};
+
+export default ProjectInfo;

src/components/organisms/ProjectInfo/index.js

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

src/components/organisms/ProjectInfo/styled.js

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+export const Table = styled.table`
+  margin: 1rem 0;
+  text-align: left;
+`;
+
+export const ProjectTitle = styled.h2`
+  margin-top: 1rem;
+  text-align: center;
+  text-decoration: underline;
+`;
+
+export const ProjectDescription = styled.p`
+  margin-top: 2rem;
+  text-align: center;
+  font-size: 1.1rem;
+`;

src/components/organisms/ProjectsTable/ProjectsTable.jsx

@@ -49,7 +49,9 @@ const ProjectsTable = ({ projects }) => {
 
                 <TableColActions>
                   <Button variant="light" onClick={() => {}}>Edit</Button>
-                  <Button variant="light" onClick={() => {}}>Show</Button>
+                  <Button variant="light">
+                    <a href={`/projects/${  id}`}>Show</a>
+                  </Button>
                   <Button variant="danger" onClick={() => handleOpenModal({ id, name, description })}>Delete</Button>
                 </TableColActions>
               </tr>

src/lib/hooks/project.js

@@ -27,8 +27,8 @@ export const useProject = ({ projectId }) => {
   });
 
   return {
-    project: data?.project || {},
     loading,
     error,
+    project: data?.project || {}
   };
 }

src/pages/ProjectInfoPage.jsx

@@ -0,0 +1,26 @@
+import {useParams} from "react-router-dom";
+import DefaultTemplate from "../components/templates/DefaultTemplate";
+import {useProject} from "../lib/hooks/project";
+import ProjectInfo from "../components/organisms/ProjectInfo";
+import Loader from "../components/atoms/Loader";
+import ErrorWindow from "../components/atoms/ErrorWindow";
+
+const ProjectInfoPage = () => {
+
+  const {id} = useParams();
+  const { project, loading, error } = useProject({projectId: id});
+
+  return (
+    <DefaultTemplate>
+
+      {error && !loading && <ErrorWindow title="Failed to fetch" desc={`Can't fetch and show project with id = ${  id}`}/>}
+
+      {loading && <Loader />}
+
+      {project && !loading && <ProjectInfo project={project} />}
+
+    </DefaultTemplate>
+  );
+};
+
+export default ProjectInfoPage;

src/pages/ProjectsPage.jsx

@@ -2,6 +2,8 @@ import DefaultTemplate from "../components/templates/DefaultTemplate";
 import ProjectsTable from '../components/organisms/ProjectsTable';
 
 import { useProjects } from "../lib/hooks/project";
+import Loader from "../components/atoms/Loader";
+import ErrorWindow from "../components/atoms/ErrorWindow";
 
 const ProjectsPage = () => {
   const { projects, loading, error } = useProjects();
@@ -10,9 +12,9 @@ const ProjectsPage = () => {
     <DefaultTemplate>
       <h2>Projects List</h2>
 
-      {error && !loading && <div>Ошибка</div>}
+      {error && !loading && <ErrorWindow title="Failed to fetch" desc="Can't fetch and show projects" />}
 
-      {loading && <div>Загрузка...</div>}
+      {loading && <Loader />}
 
       {projects && !loading && <ProjectsTable projects={projects} />}
     </DefaultTemplate>