Finished Hw-23

src/App.jsx

@@ -1,12 +1,12 @@
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import { useState, useMemo } from "react";
 import { ApolloProvider } from '@apollo/client/react';
-
 import NotifierContext from "./context/NotifierContext";
 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 +31,7 @@ const App = () => {
             <Route path="/" element={<HomePage />} />
             <Route path="/info" element={<InfoPage />} />
             <Route path="/projects" element={<ProjectsPage />} />
+            <Route path="/project/:projectId" element={<ProjectPage />} />
             <Route path="*" element={<Navigate to="/" replace />} />
           </Routes>
         </BrowserRouter>

src/components/atoms/ErrorDisplay/ErrorDisplay.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Alert } from "react-bootstrap";
+
+const ErrorDisplay = ({ message }) => {
+  return (
+    <Alert variant="danger">
+      <Alert.Heading>Error</Alert.Heading>
+      <p>{message}</p>
+    </Alert>
+  );
+};
+
+export default ErrorDisplay;

src/components/atoms/ErrorDisplay/index.js

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

src/components/atoms/SkeletonLoading/ProjectSkeleton/ProjectSkeleton.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { SkeletonWrapper } from "./styled";
+
+const ProjectsSkeleton = () => {
+  return (
+    <SkeletonWrapper>
+          <div className="skeleton-line" style={{ width: "200px" }} />
+          <div className="skeleton-line" style={{ width: "800px" }} />
+    </SkeletonWrapper>
+  );
+};
+
+export default ProjectsSkeleton;

src/components/atoms/SkeletonLoading/ProjectSkeleton/index.js

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

src/components/atoms/SkeletonLoading/ProjectSkeleton/styled.js

@@ -0,0 +1,40 @@
+import styled, { keyframes } from "styled-components";
+
+const wave = keyframes`
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+`;
+
+export const SkeletonWrapper = styled.div`
+  .skeleton-line {
+    height: 20px;
+    background-color: #f0f0f0;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .skeleton-line:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.7) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    animation: ${wave} 3.5s infinite;
+  }
+`;

src/components/atoms/SkeletonLoading/ProjectsSkeleton/ProjectsSkeleton.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { SkeletonWrapper, TableCol, TableColActions, TableHead, Table } from "./styled";
+
+const ProjectSkeleton = () => {
+  return (
+    <SkeletonWrapper>
+      <div className="my-3">
+        <Table>
+          <thead>
+            <tr>
+              <TableHead>id</TableHead>
+              <TableHead>Name</TableHead>
+              <TableHead>Description</TableHead>
+              <TableHead>Actions</TableHead>
+            </tr>
+          </thead>
+          <tbody>
+            {[1, 2, 3, 4, 5, 6, 7].map((item) => (
+              <tr key={item}>
+                <TableCol>
+                  <div className="skeleton-line" style={{ width: "20px" }} />
+                </TableCol>
+                <TableCol>
+                  <div className="skeleton-line" style={{ width: "70px" }} />
+                </TableCol>
+                <TableCol>
+                  <div className="skeleton-line" style={{ width: "900px" }} />
+                </TableCol>
+                <TableColActions>
+                  <div className="skeleton-button" style={{ width: "70px", height: "35px" }} />
+                  <div className="skeleton-button" style={{ width: "70px", height: "35px" }} />
+                  <div className="skeleton-button" style={{ width: "70px", height: "35px" }} />
+                </TableColActions>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+      </div>
+    </SkeletonWrapper>
+  );
+};
+
+export default ProjectSkeleton;

src/components/atoms/SkeletonLoading/ProjectsSkeleton/index.js

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

src/components/atoms/SkeletonLoading/ProjectsSkeleton/styled.js

@@ -0,0 +1,92 @@
+import styled, { keyframes } from "styled-components";
+
+/* Wave Animation for Skeletons(from Yt Tutorial mixed with original table) */
+const wave = keyframes`
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+`;
+
+export const SkeletonWrapper = styled.div`
+
+  .skeleton-line {
+    height: 20px;
+    background-color: #f0f0f0;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .skeleton-line:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.7) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    animation: ${wave} 3.5s infinite;
+  }
+
+  .skeleton-button {
+    width: 100px;
+    height: 35px;
+    background-color: #f0f0f0;
+    border-radius: 4px;
+    margin-right: 10px;
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .skeleton-button:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.7) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    animation: ${wave} 3.5s infinite;
+  }
+`;
+
+export const Table = styled.table`
+  margin: 1rem 0;
+  text-align: left;
+  width: 100%;
+  border-collapse: collapse;
+`;
+
+export const TableHead = styled.th`
+  padding 1rem;
+  border-bottom: 1px solid grey;
+`;
+
+export const TableCol = styled.td`
+  padding: 1rem;
+  border-bottom: 1px solid #dee2e6;
+`;
+
+export const TableColActions = styled(TableCol)`
+  width: 20rem;
+`;
+
+export default SkeletonWrapper;

src/components/organisms/ProjectsTable/ProjectsTable.jsx

@@ -1,9 +1,7 @@
 import Button from 'react-bootstrap/Button';
-
 import { useState, useContext } from 'react';
-
+import { Link } from "react-router-dom";
 import DeleteModal from '../../molecules/DeleteModal';
-
 import { Table, TableHead, TableCol, TableColActions } from './styled';
 import NotifierContext from "../../../context/NotifierContext";
 
@@ -46,14 +44,19 @@ const ProjectsTable = ({ projects }) => {
                 <TableCol>{id}</TableCol>
                 <TableCol>{name}</TableCol>
                 <TableCol>{description}</TableCol>
-
                 <TableColActions>
-                  <Button variant="light" onClick={() => {}}>Edit</Button>
-                  <Button variant="light" onClick={() => {}}>Show</Button>
-                  <Button variant="danger" onClick={() => handleOpenModal({ id, name, description })}>Delete</Button>
+                  <Button variant="light" onClick={() => {}}>
+                    Edit
+                  </Button>
+                  <Link to={`/project/${id}`}>
+                    <Button variant="light">Show</Button>
+                  </Link>
+                  <Button variant="danger" onClick={() => handleOpenModal({ id, name, description })}>
+                    Delete
+                  </Button>
                 </TableColActions>
               </tr>
-            )
+            );
           })}
         </tbody>
       </Table>

src/lib/apolloClient.js

@@ -1,8 +1,9 @@
 import { ApolloClient, InMemoryCache } from '@apollo/client';
 
 const client = new ApolloClient({
-  uri: process.env.REACT_APP_API_URL,
-  cache: new InMemoryCache()
+  uri: "https://tasktracker-itis-2024-269a840ae88e.herokuapp.com/graphql",
+  cache: new InMemoryCache(),
+  connectToDevTools: true,
 });
 
 export default client;

src/lib/hooks/project.js

@@ -1,34 +1,17 @@
 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 ProjectQuery from "src/graphql/queries/project";
 
 
 export const useProject = ({ projectId }) => {
-  const { data, loading, error } = useQuery(Project, {
+  const { data, loading, error } = useQuery(ProjectQuery, {
     fetchPolicy: "cache-and-network",
-    variables: { projectId }
+    variables: { projectId },
   });
 
   return {
     project: data?.project || {},
     loading,
     error,
   };
-}
+};

src/lib/hooks/projects.js

@@ -0,0 +1,16 @@
+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,24 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import DefaultTemplate from "../components/templates/DefaultTemplate";
+import { useProject } from "../lib/hooks/project";
+import ErrorDisplay from "../components/atoms/ErrorDisplay";
+import ProjectSkeleton from "../components/atoms/SkeletonLoading/ProjectSkeleton";
+
+const ProjectPage = () => {
+  const { projectId } = useParams();
+  const { loading, error, project } = useProject({ projectId });
+
+  return (
+    <DefaultTemplate>
+      {error && <ErrorDisplay message={`Failed to fetch project: ${error.message}`} />}
+      {loading && <ProjectSkeleton />}
+      <div>
+        <h2>{project.name}</h2>
+        <p>{project.description}</p>
+      </div>
+    </DefaultTemplate>
+  );
+};
+
+export default ProjectPage;

src/pages/ProjectsPage.jsx

@@ -1,19 +1,19 @@
+import React from "react";
 import DefaultTemplate from "../components/templates/DefaultTemplate";
-import ProjectsTable from '../components/organisms/ProjectsTable';
+import ProjectsTable from "../components/organisms/ProjectsTable";
+import ErrorDisplay from "../components/atoms/ErrorDisplay";
+import ProjectSkeleton from "../components/atoms/SkeletonLoading/ProjectsSkeleton";
 
-import { useProjects } from "../lib/hooks/project";
+import { useProjects } from "../lib/hooks/projects";
 
 const ProjectsPage = () => {
   const { projects, loading, error } = useProjects();
 
   return (
     <DefaultTemplate>
       <h2>Projects List</h2>
-
-      {error && !loading && <div>Ошибка</div>}
-
-      {loading && <div>Загрузка...</div>}
-
+      {error && <ErrorDisplay message="Failed to fetch projects. Please try again." />}
+      {loading && <ProjectSkeleton />}
       {projects && !loading && <ProjectsTable projects={projects} />}
     </DefaultTemplate>
   );