From 0fdfa05f24e7319ca3a639a837457323477987eb Mon Sep 17 00:00:00 2001
From: Maria Marinescu <mariafmarinescu@outlook.com>
Date: Fri, 10 Jan 2025 10:55:04 +0100
Subject: [PATCH] feat: Add Project Details Modal

---
 src/components/projects/ProjectCard.tsx |  25 +---
 src/components/projects/ProjectList.tsx |  74 ++++++++++--
 src/pages/Project.tsx                   | 147 +++++++++---------------
 3 files changed, 123 insertions(+), 123 deletions(-)

diff --git a/src/components/projects/ProjectCard.tsx b/src/components/projects/ProjectCard.tsx
index af24a58..265eda6 100644
--- a/src/components/projects/ProjectCard.tsx
+++ b/src/components/projects/ProjectCard.tsx
@@ -2,8 +2,6 @@ import { MotionLayoutWrapper } from 'components';
 import { Project as ProjectType } from 'interfaces';
 import { FC } from 'react';
 import { Link } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
-import { activeProjectAtom } from '../../store/projects/activeProjectAtom';
 
 /**
  * Project component displays a single project with its details.
@@ -15,29 +13,16 @@ import { activeProjectAtom } from '../../store/projects/activeProjectAtom';
  * @returns {JSX.Element} The rendered component
  */
 
-export const ProjectCard: FC<{ project?: ProjectType }> = ({ project }) => {
-  const setProjectIdInStore = useSetRecoilState(activeProjectAtom);
-
-  // Set the project ID in the store when the component mounts
-  const setProjectId = () => {
-    if (project?.id) {
-      setProjectIdInStore(project);
-    }
-  };
-
-  // // Reset the project ID in the store when the component unmounts
-  // useEffect(() => {
-  //   return () => {
-  //     setProjectIdInStore(null);
-  //   };
-  // }, [setProjectId]);
-
+export const ProjectCard: FC<{
+  project?: ProjectType;
+  setProjectDetailsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}> = ({ project, setProjectDetailsModalOpen }) => {
   return (
     <MotionLayoutWrapper>
       <Link
         to={`/ji-yun/projects/${project?.id}`}
         aria-label="Single Project"
-        onClick={setProjectId}
+        onClick={() => setProjectDetailsModalOpen(true)}
       >
         <div className="bg-secondary-light dark:bg-ternary-dark mb-10 cursor-pointer rounded-xl shadow-lg hover:shadow-xl sm:mb-0">
           <div>
diff --git a/src/components/projects/ProjectList.tsx b/src/components/projects/ProjectList.tsx
index 5cbfcd4..5f24899 100644
--- a/src/components/projects/ProjectList.tsx
+++ b/src/components/projects/ProjectList.tsx
@@ -1,23 +1,73 @@
-import { useState } from 'react';
-import { useRecoilState } from 'recoil';
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 import { projectsData } from 'src/data';
-import { activeProjectAtom } from '../../store/projects/activeProjectAtom';
+import { Project } from 'src/pages/Project';
 import { ProjectCard } from './ProjectCard';
 
+interface Project {
+  id: string;
+  client: string;
+  description: string;
+  headline: string;
+  img: string;
+  year: string;
+  location: string;
+  tags: string[];
+  referenceWebsite?: string;
+}
+
 const ProjectList = () => {
   const [projects] = useState(projectsData);
-  const projectId = useRecoilState(activeProjectAtom);
+  const [openProjectDetailsModal, setProjectDetailsModalOpen] = useState(false);
+  const [activeProject, setActiveProject] = useState<Project | null>(null);
+  const { projectId } = useParams();
+  const navigate = useNavigate();
+
+  const setUpNewProject = useCallback(() => {
+    if (projectId) {
+      const activeProjectData = projectsData.find(
+        (project) => project.id === projectId
+      );
+      if (activeProjectData) {
+        setActiveProject(activeProjectData);
+      }
+    }
+  }, [projectId]);
+
+  useEffect(() => setUpNewProject(), [setUpNewProject]);
+
+  useEffect(() => {
+    if (activeProject) {
+      setProjectDetailsModalOpen(true);
+    }
+  }, [activeProject]);
 
-  console.log(projectId);
+  const closeProjectDetailsModal = () => {
+    setProjectDetailsModalOpen(false);
+    navigate('/ji-yun/projects', { replace: true });
+  };
 
   return (
-    <section className="py-5 sm:py-10">
-      <div className="grid grid-cols-1 sm:grid-cols-2 sm:gap-10 lg:grid-cols-3">
-        {projects.map((project) => (
-          <ProjectCard project={project} key={project.id} />
-        ))}
-      </div>
-    </section>
+    <>
+      {openProjectDetailsModal ? (
+        <Project
+          activeProject={activeProject}
+          setProjectDetailsModalOpen={closeProjectDetailsModal}
+          projectDetailsModalOpen={openProjectDetailsModal}
+        />
+      ) : null}
+      <section className="py-5 sm:py-10">
+        <div className="grid grid-cols-1 sm:grid-cols-2 sm:gap-10 lg:grid-cols-3">
+          {projects.map((project) => (
+            <ProjectCard
+              project={project}
+              key={project.id}
+              setProjectDetailsModalOpen={setProjectDetailsModalOpen}
+            />
+          ))}
+        </div>
+      </section>
+    </>
   );
 };
 
diff --git a/src/pages/Project.tsx b/src/pages/Project.tsx
index 36a7baf..123eebb 100644
--- a/src/pages/Project.tsx
+++ b/src/pages/Project.tsx
@@ -1,107 +1,72 @@
+import { Modal } from 'components/Modal';
 import { ProjectSlider } from 'components/projects';
-import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
-import { projectsData } from '../data/projects';
-import { activeProjectAtom } from '../store/projects/activeProjectAtom';
 
-const Project = () => {
-  const [activeStoredProject, setActiveProject] =
-    useRecoilState(activeProjectAtom);
-  const { projectId } = useParams();
+interface Project {
+  id: string;
+  client: string;
+  description: string;
+  headline: string;
+  img: string;
+  year: string;
+  location: string;
+  tags: string[];
+  referenceWebsite?: string;
+}
+interface ProjectProps {
+  setProjectDetailsModalOpen?: () => void;
+  projectDetailsModalOpen?: boolean;
+  activeProject?: Project | null;
+}
 
-  useEffect(() => {
-    if (!activeStoredProject) {
-      const activeProject = projectsData.find(
-        (project) => project.id === projectId
-      );
-      if (activeProject) setActiveProject(activeProject);
-    }
-  }, [activeStoredProject]);
+export const Project: React.FC<ProjectProps> = ({
+  setProjectDetailsModalOpen,
+  projectDetailsModalOpen,
+  activeProject,
+}) => {
+  if (!setProjectDetailsModalOpen || !activeProject || !projectDetailsModalOpen)
+    return null;
 
   return (
-    <div className="flex h-full w-full flex-col">
-      <p className="font-general-regular text-secondary-dark dark:text-secondary-light mt-2 text-start text-3xl font-semibold">
-        {activeStoredProject?.client}
-      </p>
-      <div className="mt-14 block gap-0 sm:flex sm:gap-10">
-        <div className="w-full text-left sm:w-1/3">
-          {/* Single project client details */}
-
-          {/* Single project objectives */}
-          <div className="mb-7">
-            <p className="font-general-regular text-ternary-dark dark:text-ternary-light mb-2 text-2xl font-semibold">
-              Description
-            </p>
-            <p className="font-general-regular text-primary-dark dark:text-ternary-light">
-              {activeStoredProject?.headline}
-            </p>
-          </div>
-          {/* <div className="mb-7">
-            <p className="font-general-regular text-primary-dark dark:text-ternary-light">
-            </p>
-          </div> */}
-
-          {activeStoredProject?.referenceWebsite ? (
+    <Modal onClose={setProjectDetailsModalOpen} open={projectDetailsModalOpen}>
+      <div className="h-10/12 mx-auto flex w-10/12 flex-col bg-white">
+        <p className="font-general-regular text-secondary-dark dark:text-secondary-light mt-2 text-start text-3xl font-semibold">
+          {activeProject?.client}
+        </p>
+        <div className="mt-14 block gap-0 sm:flex sm:gap-10">
+          <div className="w-full text-left sm:w-1/3">
             <div className="mb-7">
-              <p className="font-general-regular text-ternary-dark dark:text-ternary-light">
-                <span className="font-semibold">Website: </span>
-                <a
-                  href={activeStoredProject.referenceWebsite}
-                  className="cursor-pointer duration-300 hover:text-indigo-500 hover:underline dark:hover:text-indigo-400"
-                  aria-label="Project Website"
-                >
-                  {activeStoredProject.referenceWebsite}
-                </a>
+              <p className="font-general-regular text-ternary-dark dark:text-ternary-light mb-2 text-2xl font-semibold">
+                Description
+              </p>
+              <p className="font-general-regular text-primary-dark dark:text-ternary-light">
+                {activeProject?.headline}
               </p>
             </div>
-          ) : null}
-
-          {/* Single project technologies */}
-          {/* <div className="mb-7">
-          <p className="font-general-regular text-ternary-dark dark:text-ternary-light mb-2 text-2xl font-semibold">
-            {singleProjectData.ProjectInfo.Technologies[0].title}
-          </p>
-          <p className="font-general-regular text-primary-dark dark:text-ternary-light">
-            {singleProjectData.ProjectInfo.Technologies[0].techs.join(', ')}
-          </p>
-        </div> */}
 
-          {/* Single project social sharing */}
-          {/* <div>
-          <p className="font-general-regular text-ternary-dark dark:text-ternary-light mb-2 text-2xl font-semibold">
-            {singleProjectData.ProjectInfo.SocialSharingHeading}
-          </p>
-          <div className="mt-5 flex items-center gap-3">
-            {singleProjectData.ProjectInfo.SocialSharing.map((social) => {
-              return (
-                <a
-                  key={social.id}
-                  href={social.url}
-                  target="__blank"
-                  aria-label="Share Project"
-                  className="bg-ternary-light dark:bg-ternary-dark hover:text-primary-dark dark:hover:text-primary-light rounded-lg p-2 text-gray-400 shadow-sm duration-500"
-                >
-                  <span className="text-lg lg:text-2xl">{social.icon}</span>
-                </a>
-              );
-            })}
+            {activeProject?.referenceWebsite ? (
+              <div className="mb-7">
+                <p className="font-general-regular text-ternary-dark dark:text-ternary-light">
+                  <span className="font-semibold">Website: </span>
+                  <a
+                    href={activeProject.referenceWebsite}
+                    className="cursor-pointer duration-300 hover:text-indigo-500 hover:underline dark:hover:text-indigo-400"
+                    aria-label="Project Website"
+                  >
+                    {activeProject.referenceWebsite}
+                  </a>
+                </p>
+              </div>
+            ) : null}
           </div>
-        </div> */}
-        </div>
 
-        {/*  Single project right section */}
-        <div className="mt-10 w-full flex-col gap-4 text-left sm:mt-0 sm:flex sm:w-2/3">
-          <div className="flex h-fit w-full justify-center bg-transparent">
-            <ProjectSlider />
+          <div className="mt-10 w-full flex-col gap-4 text-left sm:mt-0 sm:flex sm:w-2/3">
+            <div className="flex h-fit w-full justify-center bg-transparent">
+              <ProjectSlider />
+            </div>
+            <div className="w-full">{activeProject?.description}</div>
           </div>
-          <div className="w-full">{activeStoredProject?.description}</div>
-
-          {/* })} */}
         </div>
       </div>
-    </div>
+    </Modal>
   );
 };
-
-export default Project;