Add ProjectNameContext to NewWeeklyReport and handle project selection in YourProjectsPage

frontend/src/Components/NewWeeklyReport.tsx

@@ -3,6 +3,7 @@ import { NewWeeklyReport } from "../Types/goTypes";
 import { api } from "../API/API";
 import { useNavigate } from "react-router-dom";
 import Button from "./Button";
+import { ProjectNameContext } from "../Pages/YourProjectsPage";
 
 export default function NewWeeklyReport(): JSX.Element {
   const [week, setWeek] = useState(0);
@@ -13,7 +14,7 @@ export default function NewWeeklyReport(): JSX.Element {
   const [studyTime, setStudyTime] = useState(0);
   const [testingTime, setTestingTime] = useState(0);
 
-  // const projectName = useContext(projectNameContext);
+  const projectName = useContext(ProjectNameContext);
   const token = localStorage.getItem("accessToken") ?? "";
 
   const handleNewWeeklyReport = async (): Promise<void> => {

frontend/src/Pages/YourProjectsPage.tsx

@@ -1,11 +1,14 @@
-import React, { useState } from "react";
+import React, { useState, createContext, useEffect } from "react";
 import { Project } from "../Types/goTypes";
 import { api } from "../API/API";
 import { Link } from "react-router-dom";
 import BasicWindow from "../Components/BasicWindow";
 
+export const ProjectNameContext = createContext("");
+
 function UserProjectPage(): JSX.Element {
   const [projects, setProjects] = useState<Project[]>([]);
+  const [selectedProject, setSelectedProject] = useState("");
 
   const getProjects = async (): Promise<void> => {
     const username = localStorage.getItem("username") ?? ""; // replace with actual username
@@ -18,20 +21,34 @@ function UserProjectPage(): JSX.Element {
       console.error(response.message);
     }
   };
+  // Call getProjects when the component mounts
+  useEffect(() => {
+    getProjects();
+  }, []);
+
+  const handleProjectClick = (projectName: string): void => {
+    setSelectedProject(projectName);
+  };
 
   const content = (
-    <>
+    <ProjectNameContext.Provider value={selectedProject}>
       <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 key={index} to={`/project/${project.id}`}>
+          <Link
+            to={`/project/${project.id}`}
+            onClick={() => {
+              handleProjectClick(project.name);
+            }}
+            key={index}
+          >
             <h1 className="font-bold underline text-[30px] cursor-pointer">
               {project.name}
             </h1>
           </Link>
         ))}
       </div>
-    </>
+    </ProjectNameContext.Provider>
   );
 
   const buttons = <></>;