Add project navigation based on user and pm role

frontend/src/Components/DisplayUserProjects.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { Project } from "../Types/goTypes";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { api } from "../API/API";
 
 /**
@@ -9,6 +9,7 @@ import { api } from "../API/API";
  */
 function DisplayUserProject(): JSX.Element {
   const [projects, setProjects] = useState<Project[]>([]);
+  const navigate = useNavigate();
 
   const getProjects = async (): Promise<void> => {
     const token = localStorage.getItem("accessToken") ?? "";
@@ -21,6 +22,26 @@ function DisplayUserProject(): JSX.Element {
     }
   };
 
+  const handleProjectClick = async (projectName: string): Promise<void> => {
+    const username = localStorage.getItem("username") ?? "";
+    const token = localStorage.getItem("accessToken") ?? "";
+    const response = await api.checkIfProjectManager(
+      username,
+      projectName,
+      token,
+    );
+    if (response.success) {
+      if (response.data) {
+        navigate(`/PMProjectPage/${projectName}`);
+      } else {
+        navigate(`/project/${projectName}`);
+      }
+    } else {
+      // handle error
+      console.error(response.message);
+    }
+  };
+
   // Call getProjects when the component mounts
   useEffect(() => {
     void getProjects();
@@ -30,12 +51,15 @@ function DisplayUserProject(): JSX.Element {
     <>
       <h1 className="font-bold text-[30px] mb-[20px]">Your Projects</h1>
       <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
-        {projects.map((project, index) => (
-          <Link to={`/project/${project.name}`} key={index}>
+        {projects.map((project) => (
+          <div
+            onClick={() => void handleProjectClick(project.name)}
+            key={project.id}
+          >
             <h1 className="font-bold underline text-[30px] cursor-pointer">
               {project.name}
             </h1>
-          </Link>
+          </div>
         ))}
       </div>
     </>