Final push

package.json

@@ -10,6 +10,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
+    "react-epic-spinners": "^0.5.0",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.8.2",
     "react-scripts": "5.0.1",

src/App.jsx

@@ -7,6 +7,8 @@ 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("");
@@ -23,6 +25,8 @@ const App = () => {
     [message, errorMessage],
   );
 
+  console.log("CLIENT URI : ", client.link)
+
   return (
     <NotifierContext.Provider value={context}>
       <ApolloProvider client={client}>
@@ -31,6 +35,7 @@ const App = () => {
             <Route path="/" element={<HomePage />} />
             <Route path="/info" element={<InfoPage />} />
             <Route path="/projects" element={<ProjectsPage />} />
+            <Route path="/projects/:projectId" element={<ProjectPage />} />
             <Route path="*" element={<Navigate to="/" replace />} />
           </Routes>
         </BrowserRouter>

src/Fonts/info.txt

@@ -0,0 +1,2 @@
+license: Freeware
+link: https://www.fontspace.com/mouldy-cheese-font-f95405

src/components/molecules/DeleteModal/DeleteModal.jsx

@@ -14,7 +14,7 @@ const DeleteModal = ({ isOpen, projectName, onCancel, onDelete }) => {
       </Modal.Header>
 
       <Modal.Body>
-        The project <strong>Project</strong> will be permanently deleted. Are you sure?
+        The project <strong>{projectName}</strong> will be permanently deleted. Are you sure?
       </Modal.Body>
 
       <Modal.Footer>

src/components/molecules/ErrorComponent/ProjectFetchingError.jsx

@@ -0,0 +1,21 @@
+import { Button } from 'react-bootstrap';
+import { ErrorContainer, ErrorImage, ErrorMessage } from './styled';
+import Image from './fetchingErrorImg.png';
+
+const ProjectFetchingError = ({ errorMessage }) => {
+
+    const handleRefresh = () => {
+        window.location.reload();
+    };
+
+  return (
+    <ErrorContainer>
+      <ErrorImage src={Image} alt="Error" />
+      <ErrorMessage>{errorMessage}</ErrorMessage>
+
+      <Button variant='btn btn-outline-info' onClick={handleRefresh}>Refresh</Button>
+    </ErrorContainer>
+  );
+};
+
+export default ProjectFetchingError;

src/components/molecules/ErrorComponent/index.js

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

src/components/molecules/ErrorComponent/styled.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+export const ErrorContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  animation: appear 0.5s ease-in forwards;
+  transition: transform 0.5s ease-in;
+`;
+
+export const ErrorImage = styled.img`
+  width: 200px;
+  height: 200px;
+  margin-bottom: 20px;
+  animation: shake 1s infinite alternate;
+
+  @keyframes shake {
+    0% { transform: rotate(-5deg); }
+    100% { transform: rotate(5deg); }
+  }
+`;
+
+export const ErrorMessage = styled.p`
+  font-size: 2rem;
+  font-weight: 400;
+  font-family: 'Funky', sans-serif;                                 
+  color: #000;
+  text-align: center;
+  transition: transform 1s ease-in;
+`;

src/components/molecules/Loader/Loader.jsx

@@ -0,0 +1,42 @@
+import { CirclesToRhombusesSpinner } from 'react-epic-spinners'
+import { LoaderText, LoaderContainer } from './styled';
+
+const Loader = () => {
+    const letters = ['L', 'O', 'A', 'D', 'I', 'N', 'G'];
+
+    const generateUniqueId = () => {
+      let id = 0;
+      return () => {
+        id += 1;
+        return id.toString();
+      };
+    };
+
+    const uniqueIdGenerator = generateUniqueId();
+
+    return (
+      <LoaderContainer>
+        {letters.map((letter, index) => {
+          if (index === 1) {
+            return (
+              <CirclesToRhombusesSpinner
+                key={uniqueIdGenerator()}
+                animation-duration={1200}
+                circles-num={3}
+                circle-size={50}
+                color="#000"
+              />
+            );
+          }
+          return (
+            <LoaderText key={uniqueIdGenerator()} bounceIndex={index}>
+              {letter}
+            </LoaderText>
+          );
+        })}
+      </LoaderContainer>
+    );
+  };
+
+  export default Loader;
+

src/components/molecules/Loader/index.js

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

src/components/molecules/Loader/styled.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+export const LoaderText = styled.h3 `
+    font-size: 4rem;
+    font-weight: 400;
+    color: #000;
+    animation: bounce 1s infinite alternate;
+    animation-delay: ${({ bounceIndex }) => bounceIndex * 0.2}s;
+
+    @keyframes bounce {
+        0% { transform: translateY(0); }
+        100% { transform: translateY(-10px); }
+    }
+`;
+
+
+
+export const LoaderContainer = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+`;

src/components/organisms/ProjectDetails/ProjectDetails.jsx

@@ -0,0 +1,46 @@
+import ProjectFetchingError from 'src/components/molecules/ErrorComponent/ProjectFetchingError';
+import { useParams } from 'react-router-dom';
+import { ListGroup } from 'react-bootstrap';
+import { useProject } from "../../../lib/hooks/project";
+import Loader from "../../molecules/Loader/Loader";
+import { ProjectCard, CardHeader, CardBody, ListGroupItem, ListGroupItemLabel } from "./styled";
+
+const ProjectDetails = () => {
+    const { projectId } = useParams();
+    const { project, loading, error } = useProject({ projectId });
+    const isProjectIdNull = project.id === undefined;
+
+    console.log(isProjectIdNull)
+    console.log(project.id)
+    return (
+        <>
+            {loading && (
+                <Loader />
+            )}
+
+            {!loading && error && (
+                <ProjectFetchingError errorMessage={error.message} />
+            )}
+
+            {!loading && !error && isProjectIdNull && (
+              <ProjectFetchingError errorMessage='404! No Project Has Benn Found' />
+            )}
+
+            {!loading && !error && !isProjectIdNull && (
+              <ProjectCard>
+                  <CardHeader>Project Details</CardHeader>
+                      <CardBody>
+                        <ListGroup className="list-group-flush">
+                          <ListGroupItem><ListGroupItemLabel>ID: </ListGroupItemLabel>{project.id}</ListGroupItem>
+                          <ListGroupItem><ListGroupItemLabel>Name: </ListGroupItemLabel>{project.name}</ListGroupItem>
+                          <ListGroupItem><ListGroupItemLabel>Description: </ListGroupItemLabel>{project.description}</ListGroupItem>
+                          <ListGroupItem><ListGroupItemLabel>Created-At: </ListGroupItemLabel>{project.createdAt}</ListGroupItem>
+                      </ListGroup>
+                  </CardBody>
+              </ProjectCard>
+            )}
+        </>
+    );
+};
+
+export default ProjectDetails;

src/components/organisms/ProjectDetails/index.js

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

src/components/organisms/ProjectDetails/styled.js

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+import Card from 'react-bootstrap/Card';
+import ListGroup from 'react-bootstrap/ListGroup';
+
+export const ProjectCard = styled(Card)`
+    width: 30rem;
+    border-radius: 10px;
+    background-color: #6f42c1;
+    color: #fff;
+    margin: 0 auto;
+    margin-bottom: 20px;
+    overflow: hidden;
+`;
+
+export const CardHeader = styled(Card.Header)`
+    font-size: 2.5rem;
+    font-weight: 700;
+    background-color: #6610f2;
+    border-radius: 10px 10px 0 0;
+`;
+
+export const CardBody = styled(Card.Body)`
+    padding: 2rem;
+    background-color: #fff;
+    border-radius: 0 0 10px 10px;
+    transform: translateY(-10px);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+`;
+
+export const ListGroupItem = styled(ListGroup.Item)`
+    font-weight: 400;
+    font-size: 1.5rem;
+    color: #6f42c1;
+`;
+
+export const ListGroupItemLabel = styled.span`
+    font-weight: 700;
+    font-size: 1.2rem;
+    color: #6f42c1;
+`;