Merge branch 'frontend' into dev

frontend/src/API/API.ts

@@ -42,10 +42,7 @@ interface API {
     token: string,
   ): Promise<APIResponse<NewWeeklyReport>>;
   /** Gets all the projects of a user*/
-  getUserProjects(
+  getUserProjects(token: string): Promise<APIResponse<Project[]>>;
-    username: string,
-    token: string,
-  ): Promise<APIResponse<Project[]>>;
   /** Gets a project from id*/
   getProject(id: number): Promise<APIResponse<Project>>;
 }
@@ -150,10 +147,7 @@ export const api: API = {
     }
   },
 
-  async getUserProjects(
+  async getUserProjects(token: string): Promise<APIResponse<Project[]>> {
-    username: string,
-    token: string,
-  ): Promise<APIResponse<Project[]>> {
     try {
       const response = await fetch("/api/getUserProjects", {
         method: "GET",
@@ -161,7 +155,6 @@ export const api: API = {
           "Content-Type": "application/json",
           Authorization: "Bearer " + token,
         },
-        body: JSON.stringify({ username }),
       });
 
       if (!response.ok) {
@@ -176,7 +169,7 @@ export const api: API = {
     } catch (e) {
       return Promise.resolve({
         success: false,
-        message: "Failed to get user projects",
+        message: "API fucked",
       });
     }
   },

frontend/src/Components/Header.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Link } from "react-router-dom";
+import backgroundImage from "../assets/1.jpg";
 
 function Header(): JSX.Element {
   const [isOpen, setIsOpen] = useState(false);
@@ -11,7 +12,7 @@ function Header(): JSX.Element {
   return (
     <header
       className="fixed top-0 left-0 right-0 border-[1.75px] border-black text-black p-3 pl-5 flex items-center justify-between bg-cover"
-      style={{ backgroundImage: `url('src/assets/1.jpg')` }}
+      style={{ backgroundImage: `url(${backgroundImage})` }}
     >
       <Link to="/your-projects">
         <img

frontend/src/Components/NewWeeklyReport.tsx

@@ -1,9 +1,8 @@
-import { useState, useContext } from "react";
+import { useState } from "react";
-import type { NewWeeklyReport } from "../Types/goTypes";
+import { NewWeeklyReport } from "../Types/goTypes";
 import { api } from "../API/API";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import Button from "./Button";
-import { ProjectNameContext } from "../Pages/YourProjectsPage";
 
 export default function NewWeeklyReport(): JSX.Element {
   const [week, setWeek] = useState(0);
@@ -14,12 +13,12 @@ export default function NewWeeklyReport(): JSX.Element {
   const [studyTime, setStudyTime] = useState(0);
   const [testingTime, setTestingTime] = useState(0);
 
-  const projectName = useContext(ProjectNameContext);
+  const { projectName } = useParams();
   const token = localStorage.getItem("accessToken") ?? "";
 
   const handleNewWeeklyReport = async (): Promise<void> => {
     const newWeeklyReport: NewWeeklyReport = {
-      projectName,
+      projectName: projectName ?? "",
       week,
       developmentTime,
       meetingTime,
@@ -46,7 +45,7 @@ export default function NewWeeklyReport(): JSX.Element {
             }
             e.preventDefault();
             void handleNewWeeklyReport();
-            navigate("/project");
+            navigate(-1);
           }}
         >
           <div className="flex flex-col items-center">

frontend/src/Pages/App.tsx

@@ -13,7 +13,7 @@ function App(): JSX.Element {
     } else if (authority === 2) {
       navigate("/pm");
     } else if (authority === 3) {
-      navigate("/user");
+      navigate("/yourProjects");
     }
   }, [authority, navigate]);
 

frontend/src/Pages/NotFoundPage.tsx

@@ -0,0 +1,18 @@
+import Button from "../Components/Button";
+
+export default function NotFoundPage(): JSX.Element {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-white">
+      <h1 className="text-[30px]">404 Page Not Found</h1>
+      <a href="/">
+        <Button
+          text="Go to Home Page"
+          onClick={(): void => {
+            localStorage.clear();
+          }}
+          type="button"
+        />
+      </a>
+    </div>
+  );
+}

frontend/src/Pages/UserPages/UserProjectPage.tsx

@@ -1,18 +1,20 @@
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useParams } from "react-router-dom";
 import BasicWindow from "../../Components/BasicWindow";
 import BackButton from "../../Components/BackButton";
 
 function UserProjectPage(): JSX.Element {
+  const { projectName } = useParams();
+
   const content = (
     <>
       <h1 className="font-bold text-[30px] mb-[20px]">{useLocation().state}</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]">
-        <Link to="/project-page">
+        <Link to={`/projectPage/${projectName}`}>
           <h1 className="font-bold underline text-[30px] cursor-pointer">
             Your Time Reports
           </h1>
         </Link>
-        <Link to="/new-time-report">
+        <Link to={`/newTimeReport/${projectName}`}>
           <h1 className="font-bold underline text-[30px] cursor-pointer">
             New Time Report
           </h1>

frontend/src/Pages/YourProjectsPage.tsx

@@ -7,10 +7,10 @@ import BasicWindow from "../Components/BasicWindow";
 export const ProjectNameContext = createContext("");
 
 function UserProjectPage(): JSX.Element {
-  const [projects, setProjects] = useState<Project[]>([]);
+  /*   const [projects, setProjects] = useState<Project[]>([]);
-  const [selectedProject, setSelectedProject] = useState("");
+   */ const [selectedProject, setSelectedProject] = useState("");
 
-  const getProjects = async (): Promise<void> => {
+  /* const getProjects = async (): Promise<void> => {
     const username = localStorage.getItem("username") ?? ""; // replace with actual username
     const token = localStorage.getItem("accessToken") ?? ""; // replace with actual token
     const response = await api.getUserProjects(username, token);
@@ -23,8 +23,16 @@ function UserProjectPage(): JSX.Element {
   };
   // Call getProjects when the component mounts
   useEffect(() => {
-    void getProjects();
+    getProjects();
-  }, []);
+  }, []); */
+
+  // Mock data
+  const projects: Project[] = [
+    { id: "1", name: "Project Test App" },
+    { id: "2", name: "Project 2" },
+    { id: "3", name: "Project 3" },
+    // Add more mock projects as needed
+  ];
 
   const handleProjectClick = (projectName: string): void => {
     setSelectedProject(projectName);
@@ -36,7 +44,7 @@ function UserProjectPage(): JSX.Element {
       <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.id}`}
+            to={`/project/${project.name}`}
             onClick={() => {
               handleProjectClick(project.name);
             }}

frontend/src/main.tsx

@@ -29,12 +29,14 @@ import AdminProjectManageMembers from "./Pages/AdminPages/AdminProjectManageMemb
 import AdminProjectStatistics from "./Pages/AdminPages/AdminProjectStatistics.tsx";
 import AdminProjectViewMemberInfo from "./Pages/AdminPages/AdminProjectViewMemberInfo.tsx";
 import AdminProjectPage from "./Pages/AdminPages/AdminProjectPage.tsx";
+import NotFoundPage from "./Pages/NotFoundPage.tsx";
 
 // This is where the routes are mounted
 const router = createBrowserRouter([
   {
     path: "/",
     element: <App />,
+    errorElement: <NotFoundPage />,
   },
   {
     path: "/admin",
@@ -44,30 +46,26 @@ const router = createBrowserRouter([
     path: "/pm",
     element: <YourProjectsPage />,
   },
-  {
-    path: "/user",
-    element: <YourProjectsPage />,
-  },
   {
     path: "/yourProjects",
     element: <YourProjectsPage />,
   },
   {
-    path: "/editTimeReport",
+    path: "/project/:projectName",
-    element: <UserEditTimeReportPage />,
-  },
-  {
-    path: "/newTimeReport",
-    element: <UserNewTimeReportPage />,
-  },
-  {
-    path: "/project",
     element: <UserProjectPage />,
   },
   {
-    path: "/projectPage",
+    path: "/newTimeReport/:projectName",
+    element: <UserNewTimeReportPage />,
+  },
+  {
+    path: "/projectPage/:projectName",
     element: <UserViewTimeReportsPage />,
   },
+  {
+    path: "/editTimeReport",
+    element: <UserEditTimeReportPage />,
+  },
   {
     path: "/changeRole",
     element: <PMChangeRole />,