hngx-org · ASANIYAN · Oct 21, 2023 · Oct 21, 2023 · Oct 21, 2023
diff --git a/context/PortfolioLandingContext.tsx b/context/PortfolioLandingContext.tsx
@@ -13,7 +13,7 @@ import ContactModal from '@modules/portfolio/component/contact-modal';
 import Certifications from '@modules/portfolio/component/certification-modal';
 import Awards from '@modules/portfolio/component/awards-modal';
 import { useAuth } from './AuthContext';
-import ProjectSectionModal from '@modules/portfolio/component/modals/project-section-modal';
+import ProjectSectionModal from '@modules/portfolio/component/modals/project-modal/project-section-modal';
 import { useQueries, UseQueryResult } from '@tanstack/react-query';
 import $http from '../http/axios';
 import { AddShopModal } from '@modules/portfolio/component/addShopErrorModal';

diff --git a/...ortfolio/component/all-projects-modal.tsx → ...dals/project-modal/all-projects-modal.tsx b/...ortfolio/component/all-projects-modal.tsx → ...dals/project-modal/all-projects-modal.tsx
@@ -1,12 +1,12 @@
 import React, { Fragment, useEffect, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
-import { Data, allRouteOptions } from './modals/project-section-modal';
 import Button from '@ui/Button';
 import { Add } from 'iconsax-react';
 import axios from 'axios';
 import { notify } from '@ui/Toast';
 import { Edit2, Trash } from 'iconsax-react';
+import { Data, allRouteOptions } from './project-section-modal';
 
 const endpoint = 'https://hng6-r5y3.onrender.com';
 const AllProjectsModal = ({
@@ -53,6 +53,7 @@ const AllProjectsModal = ({
       .then((res) => {
         handleLoading(false);
         handleSetProjects(res.data.data);
+        console.log(res.data.data, 'all projects');
       })
       .catch((err) => {
         handleLoading(false);
@@ -111,14 +112,25 @@ const AllProjectsModal = ({
                         ))}
                     </div>
 
-                    <Link
-                      href={url}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="font-semibold text-[#5B8DEF] text-sm md:text-base mt-5 font-manropeL"
-                    >
-                      Link to project <span className="ml-1 text-base">&#8599;</span>
-                    </Link>
+                    <section className="flex flex-wrap gap-4">
+                      <Link
+                        href={url}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="font-semibold text-[#5B8DEF] text-sm md:text-base mt-5 font-manropeL block"
+                      >
+                        Link to project <span className="ml-1 text-base">&#8599;</span>
+                      </Link>
+                      <span
+                        onClick={() => {
+                          handleEdit(project);
+                          handleSetRoute('single-project');
+                        }}
+                        className="text-green-600 text-sm md:text-base mt-5 font-manropeL font-semibold cursor-pointer"
+                      >
+                        View More
+                      </span>
+                    </section>
                   </section>
                 </section>
 

diff --git a/...omponent/modals/project-section-modal.tsx → ...s/project-modal/project-section-modal.tsx b/...omponent/modals/project-section-modal.tsx → ...s/project-modal/project-section-modal.tsx
@@ -1,11 +1,12 @@
 import Modal from '@ui/Modal';
 import { useEffect, useState } from 'react';
 import ProjectSection from './projects';
-import AllProjectsModal from '../all-projects-modal';
 import axios from 'axios';
 import Loader from '@ui/Loader';
+import AllProjectsModal from './all-projects-modal';
+import SingleProject from './single-project';
 
-export type allRouteOptions = 'add-project' | 'view-projects';
+export type allRouteOptions = 'add-project' | 'view-projects' | 'single-project';
 
 export type Data = {
   title: string;
@@ -28,7 +29,7 @@ type ProjectModalProps = {
 };
 
 const ProjectSectionModal = ({ isOpen, onCloseModal, onSaveModal, userId }: ProjectModalProps) => {
-  const allRoutes = ['add-project', 'view-projects'];
+  const allRoutes = ['add-project', 'view-projects', 'single-project'];
   const [dataToEdit, setDataToEdit] = useState<Data | null>(null);
   const [route, setRoute] = useState<allRouteOptions>('add-project');
   const [loading, setLoading] = useState<boolean>(false);
@@ -81,7 +82,13 @@ const ProjectSectionModal = ({ isOpen, onCloseModal, onSaveModal, userId }: Proj
   }, []);
 
   return (
-    <Modal size="xxl" closeOnOverlayClick isOpen={isOpen} closeModal={onCloseModal} isCloseIconPresent={false}>
+    <Modal
+      size={route === allRoutes[2] ? 'lg' : 'xxl'}
+      closeOnOverlayClick
+      isOpen={isOpen}
+      closeModal={onCloseModal}
+      isCloseIconPresent={false}
+    >
       {loading ? (
         <>
           <Loader />
@@ -110,6 +117,7 @@ const ProjectSectionModal = ({ isOpen, onCloseModal, onSaveModal, userId }: Proj
               userId={userId}
             />
           )}
+          {route === allRoutes[2] && <SingleProject dataToEdit={dataToEdit} handleSetRoute={handleSetRoute} />}
         </>
       )}
     </Modal>

diff --git a/...s/portfolio/component/modals/projects.tsx → ...mponent/modals/project-modal/projects.tsx b/...s/portfolio/component/modals/projects.tsx → ...mponent/modals/project-modal/projects.tsx
@@ -204,12 +204,11 @@ const ProjectSection: React.FC<ProjectSectionProps> = ({
             });
             handleDataClear();
             onSaveModal();
-            console.log(res);
           })
           .catch((err) => {
             setLoading(false);
             notify({
-              message: 'Error occurred',
+              message: err?.response?.data?.message || 'Error occurred',
               position: 'top-center',
               theme: 'light',
               type: 'error',
@@ -226,7 +225,7 @@ const ProjectSection: React.FC<ProjectSectionProps> = ({
       setYear(year);
       setLink(link);
       setThumbnail(thumbnail);
-      setSelectedTags(tags.split(','));
+      setSelectedTags(tags.trim().split(','));
       setDescription(description);
       setUrlsFromCloudinary(projectsImages);
       setId(id);

diff --git a/modules/portfolio/component/modals/project-modal/single-project.tsx b/modules/portfolio/component/modals/project-modal/single-project.tsx
@@ -0,0 +1,107 @@
+import Link from 'next/link';
+import { AiOutlineClose } from 'react-icons/ai';
+import { Data, allRouteOptions } from './project-section-modal';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import Loader from '@ui/Loader';
+
+type SingleProjectProps = {
+  dataToEdit: Data | null;
+  handleSetRoute: (data: allRouteOptions) => void;
+};
+
+const SingleProject: React.FC<SingleProjectProps> = ({ dataToEdit, handleSetRoute }) => {
+  const [title, setTitle] = useState('');
+  const [link, setLink] = useState('');
+  const [thumbnail, setThumbnail] = useState('');
+  const [tags, setTags] = useState('');
+  const [description, setDescription] = useState('');
+  const [projectsImages, setProjectsImages] = useState<string[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const handleSingleProjectData = () => {
+    setLoading(true);
+    if (dataToEdit !== null) {
+      const { title, year, link, thumbnail, tags, description, media, id, projectsImages } = dataToEdit;
+      setTitle(title);
+      setLink(link);
+      setThumbnail(thumbnail);
+      setTags(tags);
+      setDescription(description);
+      setProjectsImages(projectsImages);
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    handleSingleProjectData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataToEdit]);
+  return (
+    <>
+      {loading ? (
+        <>
+          <Loader />
+          <p className="text-center text-green-400 my-3 font-semibold text-lg animate-pulse">Please wait</p>
+        </>
+      ) : (
+        <section className="space-y-4 p-3">
+          <button
+            className="bg-green-500 w-6 h-6 rounded-lg ml-auto flex justify-center items-center text-white-100"
+            onClick={() => handleSetRoute('view-projects')}
+          >
+            <AiOutlineClose />
+          </button>
+          <section className="min-[920px]:flex-1 font-manropeL">
+            <h2 className="font-manropeEB text-2xl sm:text-3xl md:text-4xl">{title}</h2>
+
+            <section className="flex flex-wrap gap-3 mt-8 mb-5 text-sm text-[#444846] capitalize">
+              {tags.split(',').map((tag, id) => (
+                <span key={id} className="border border-[#8D9290] rounded-full px-2 py-1 font-manropeL">
+                  {tag}
+                </span>
+              ))}
+            </section>
+
+            <p className="font-semibold font-manropeEB mt-9 text-base sm:text-lg text-white-650 md:text-xl md:leading-[2rem]">
+              {description}
+            </p>
+
+            <Link
+              href={link}
+              target="_blank"
+              rel="noreferrer"
+              className="font-semibold text-[#5B8DEF] text-sm md:text-base mt-5 block"
+            >
+              Link to project <span className="ml-1 text-base font-manropeL">&#8599;</span>
+            </Link>
+          </section>
+          <section className="pt-7 space-y-5">
+            <section className="w-full mx-auto h-[350px]">
+              <Image
+                width={undefined}
+                height={undefined}
+                src={thumbnail}
+                className="w-full h-full rounded-lg"
+                alt="Project image"
+              />
+            </section>
+            {projectsImages.map((projectImage) => (
+              <section key={projectImage} className="w-full mx-auto h-[350px]">
+                <Image
+                  width={undefined}
+                  height={undefined}
+                  src={projectImage}
+                  className="w-full h-full rounded-lg"
+                  alt="Project image"
+                />
+              </section>
+            ))}
+          </section>
+        </section>
+      )}
+    </>
+  );
+};
+
+export default SingleProject;
diff --git a/pages/view-components/ProjectModal.tsx b/pages/view-components/ProjectModal.tsx
@@ -6,6 +6,7 @@ import { ProjectModalProps } from '../../@types';
 import projectPlaceholder from '../../public/assets/images/portfolio/project.png';
 import Button from '@ui/Button';
 import Link from 'next/link';
+import { AiOutlineClose } from 'react-icons/ai';
 
 function ProjectModal({
   title = 'Byte Financial App',
@@ -35,35 +36,49 @@ function ProjectModal({
       >
         Toggle Project Modal
       </Button>
-      <Modal size="xxl" isOpen={!isOpen} closeModal={onOpen}>
-        <section className="flex flex-wrap gap-10 mt-10">
-          <section className="w-full min-[920px]:w-[300px] h-[300px]">
-            <Image src={projectPlaceholder} className="w-full h-full" alt="Project sample image" />
-          </section>
+      <Modal size="lg" isOpen={!isOpen} closeModal={onOpen}>
+        <section className="space-y-4 p-3">
+          <button
+            className="bg-green-500 w-6 h-6 rounded-lg ml-auto flex justify-center items-center text-white-100"
+            onClick={onClose}
+          >
+            <AiOutlineClose />
+          </button>
           <section className="min-[920px]:flex-1 font-manropeL">
             <h2 className="font-manropeEB text-2xl sm:text-3xl md:text-4xl">{title}</h2>
 
-            <p className="font-semibold mt-5 text-sm sm:text-base text-white-650 md:text-xl md:leading-[2rem]">
-              {description}
-            </p>
-
-            <div className="flex flex-wrap gap-3 mt-5 mb-5 text-sm text-[#444846] capitalize">
+            <section className="flex flex-wrap gap-3 mt-8 mb-5 text-sm text-[#444846] capitalize">
               {tags.map((tag, id) => (
-                <span key={id} className="border-2 border-[#8D9290] rounded-full px-2 py-1 font-manropeL">
+                <span key={id} className="border border-[#8D9290] rounded-full px-2 py-1 font-manropeL">
                   {tag}
                 </span>
               ))}
-            </div>
+            </section>
+
+            <p className="font-semibold font-manropeEB mt-9 text-base sm:text-lg text-white-650 md:text-xl md:leading-[2rem]">
+              {description}
+            </p>
 
             <Link
               href={url}
               target="_blank"
               rel="noreferrer"
-              className="font-semibold text-[#5B8DEF] text-sm md:text-base mt-5"
+              className="font-semibold text-[#5B8DEF] text-sm md:text-base mt-5 block"
             >
-              Link to project <span className="ml-1 text-base">&#8599;</span>
+              Link to project <span className="ml-1 text-base font-manropeL">&#8599;</span>
             </Link>
           </section>
+          <section className="pt-7 space-y-5">
+            <section className="w-full mx-auto h-[350px]">
+              <Image src={projectPlaceholder} className="w-full h-full rounded-lg" alt="Project sample image" />
+            </section>
+            <section className="w-full mx-auto h-[350px]">
+              <Image src={projectPlaceholder} className="w-full h-full rounded-lg" alt="Project sample image" />
+            </section>
+            <section className="w-full mx-auto h-[350px]">
+              <Image src={projectPlaceholder} className="w-full h-full rounded-lg" alt="Project sample image" />
+            </section>
+          </section>
         </section>
       </Modal>
     </>