Merge branch 'frontend' into gruppDM

frontend/src/API/API.ts

@@ -29,11 +29,6 @@ interface API {
     project: NewProject,
     token: string,
   ): Promise<APIResponse<Project>>;
-  /** Gets all the projects of a user*/
-  getUserProjects(
-    username: string,
-    token: string,
-  ): Promise<APIResponse<Project[]>>;
   /** Submit a weekly report */
   submitWeeklyReport(
     project: NewWeeklyReport,
@@ -46,6 +41,13 @@ interface API {
     week: string,
     token: string,
   ): Promise<APIResponse<NewWeeklyReport>>;
+  /** Gets all the projects of a user*/
+  getUserProjects(
+    username: string,
+    token: string,
+  ): Promise<APIResponse<Project[]>>;
+  /** Gets a project from id*/
+  getProject(id: number): Promise<APIResponse<Project>>;
 }
 
 // Export an instance of the API
@@ -148,7 +150,10 @@ export const api: API = {
     }
   },
 
-  async getUserProjects(token: string): Promise<APIResponse<Project[]>> {
+  async getUserProjects(
+    username: string,
+    token: string,
+  ): Promise<APIResponse<Project[]>> {
     try {
       const response = await fetch("/api/getUserProjects", {
         method: "GET",
@@ -156,6 +161,7 @@ export const api: API = {
           "Content-Type": "application/json",
           Authorization: "Bearer " + token,
         },
+        body: JSON.stringify({ username }),
       });
 
       if (!response.ok) {
@@ -253,4 +259,30 @@ export const api: API = {
       return Promise.resolve({ success: false, message: "Failed to login" });
     }
   },
+
+  // Gets a projet by id, currently untested since we have no javascript-based tests
+  async getProject(id: number): Promise<APIResponse<Project>> {
+    try {
+      const response = await fetch(`/api/project/${id}`, {
+        method: "GET",
+      });
+
+      if (!response.ok) {
+        return {
+          success: false,
+          message: "Failed to get project: Response code " + response.status,
+        };
+      } else {
+        const data = (await response.json()) as Project;
+        return { success: true, data };
+      }
+      // The code below is garbage but satisfies the linter
+      // This needs fixing, do not copy this pattern
+    } catch (e: unknown) {
+      return {
+        success: false,
+        message: "Failed to get project: " + (e as Error).toString(),
+      };
+    }
+  },
 };

frontend/src/Components/EditWeeklyReport.tsx

@@ -50,8 +50,8 @@ export default function GetWeeklyReport(): JSX.Element {
       }
     };
 
-    fetchWeeklyReport();
-  }, []);
+    void fetchWeeklyReport();
+  }, [projectName, token, username, week]);
 
   const handleNewWeeklyReport = async (): Promise<void> => {
     const newWeeklyReport: NewWeeklyReport = {

frontend/src/Components/Register.tsx

@@ -23,6 +23,7 @@ export default function Register(): JSX.Element {
       nav("/"); // Instantly navigate to the login page
     } else {
       setErrMessage(response.message ?? "Unknown error");
+      console.error(errMessage);
     }
   };
 
@@ -47,7 +48,7 @@ export default function Register(): JSX.Element {
           <InputField
             label="Username"
             type="text"
-            value={username}
+            value={username ?? ""}
             onChange={(e) => {
               setUsername(e.target.value);
             }}
@@ -55,7 +56,7 @@ export default function Register(): JSX.Element {
           <InputField
             label="Password"
             type="password"
-            value={password}
+            value={password ?? ""}
             onChange={(e) => {
               setPassword(e.target.value);
             }}

frontend/src/Components/UserProjectListAdmin.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from "react";
+import { api } from "../API/API";
+import { Project } from "../Types/goTypes";
+
+const UserProjectListAdmin: React.FC = () => {
+  const [projects, setProjects] = useState<Project[]>([]);
+
+  useEffect(() => {
+    const fetchProjects = async (): Promise<void> => {
+      try {
+        const token = localStorage.getItem("accessToken") ?? "";
+        const username = "NoUser"; // getUsernameFromContext(); // Assuming you have a function to get the username from your context
+
+        const response = await api.getUserProjects(username, token);
+        if (response.success) {
+          setProjects(response.data ?? []);
+        } else {
+          console.error("Failed to fetch projects:", response.message);
+        }
+      } catch (error) {
+        console.error("Error fetching projects:", error);
+      }
+    };
+
+    void fetchProjects();
+  }, []);
+
+  return (
+    <div>
+      <h2>User Projects</h2>
+      <ul>
+        {projects.map((project) => (
+          <li key={project.id}>
+            <span>{project.name}</span>
+            {/* Add any additional project details you want to display */}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default UserProjectListAdmin;

frontend/src/Pages/AdminPages/AdminAddUser.tsx

@@ -1,5 +1,5 @@
+import BackButton from "../../Components/BackButton";
 import BasicWindow from "../../Components/BasicWindow";
-import Button from "../../Components/Button";
 import Register from "../../Components/Register";
 
 function AdminAddUser(): JSX.Element {
@@ -11,13 +11,7 @@ function AdminAddUser(): JSX.Element {
 
   const buttons = (
     <>
-      <Button
-        text="Back"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
+      <BackButton />
     </>
   );
 

frontend/src/Pages/AdminPages/AdminViewUserInfo.tsx

@@ -1,15 +1,12 @@
-import { useLocation } from "react-router-dom";
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
 import BackButton from "../../Components/BackButton";
+import UserProjectListAdmin from "../../Components/UserProjectListAdmin";
 
 function AdminViewUserInfo(): JSX.Element {
   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 h-[65vh] w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
-        <p>Put relevant info on user from database here</p>
-      </div>
+      <UserProjectListAdmin />
     </>
   );
 

frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx

@@ -1,3 +1,4 @@
+import BackButton from "../../Components/BackButton";
 import BasicWindow from "../../Components/BasicWindow";
 import TimeReport from "../../Components/NewWeeklyReport";
 import BackButton from "../../Components/BackButton";

frontend/src/Pages/ProjectManagerPages/PMViewUnsignedReport.tsx

@@ -1,3 +1,4 @@
+import BackButton from "../../Components/BackButton";
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
 import TimeReport from "../../Components/NewWeeklyReport";

frontend/src/Pages/YourProjectsPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, createContext, useEffect } from "react";
+import { useState, createContext, useEffect } from "react";
 import { Project } from "../Types/goTypes";
 import { api } from "../API/API";
 import { Link } from "react-router-dom";
@@ -62,6 +62,7 @@ function UserProjectPage(): JSX.Element {
   const buttons = <></>;
 
   return <BasicWindow content={content} buttons={buttons} />;
+  return <BasicWindow content={content} buttons={buttons} />;
 }
 
 export default UserProjectPage;