Small fixes in all files that fetches user projects, so that they pass username as argument to GetProjects-function

frontend/src/API/API.ts

@@ -114,10 +114,14 @@ interface API {
   ): Promise<APIResponse<WeeklyReport[]>>;
 
   /** Gets all the projects of a user
+   * @param {string} username - The authentication token.
    * @param {string} token - The authentication token.
    * @returns {Promise<APIResponse<Project[]>>} A promise containing the API response with the user's projects.
    */
-  getUserProjects(token: string): Promise<APIResponse<Project[]>>;
+  getUserProjects(
+    username: string,
+    token: string,
+  ): Promise<APIResponse<Project[]>>;
 
   /** Gets a project by its id.
    * @param {number} id The id of the project to retrieve.
@@ -302,9 +306,12 @@ 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", {
+      const response = await fetch(`/api/getUserProjects/${username}`, {
         method: "GET",
         headers: {
           "Content-Type": "application/json",

frontend/src/Components/DisplayUserProjects.tsx

@@ -1,7 +1,7 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { Project } from "../Types/goTypes";
 import { Link } from "react-router-dom";
-import { api } from "../API/API";
+import GetProjects from "./GetProjects";
 
 /**
  * Renders a component that displays the projects a user is a part of and links to the projects start-page.
@@ -10,21 +10,10 @@ import { api } from "../API/API";
 function DisplayUserProject(): JSX.Element {
   const [projects, setProjects] = useState<Project[]>([]);
 
-  const getProjects = async (): Promise<void> => {
-    const token = localStorage.getItem("accessToken") ?? "";
-    const response = await api.getUserProjects(token);
-    console.log(response);
-    if (response.success) {
-      setProjects(response.data ?? []);
-    } else {
-      console.error(response.message);
-    }
-  };
-
-  // Call getProjects when the component mounts
-  useEffect(() => {
-    void getProjects();
-  }, []);
+  GetProjects({
+    setProjectsProp: setProjects,
+    username: localStorage.getItem("username") ?? "",
+  });
 
   return (
     <>

frontend/src/Components/GetProjects.tsx

@@ -12,6 +12,7 @@ import { api } from "../API/API";
  */
 function GetProjects(props: {
   setProjectsProp: Dispatch<React.SetStateAction<Project[]>>;
+  username: string;
 }): void {
   const setProjects: Dispatch<React.SetStateAction<Project[]>> =
     props.setProjectsProp;
@@ -19,7 +20,7 @@ function GetProjects(props: {
     const fetchUsers = async (): Promise<void> => {
       try {
         const token = localStorage.getItem("accessToken") ?? "";
-        const response = await api.getUserProjects(token);
+        const response = await api.getUserProjects(props.username, token);
         if (response.success) {
           setProjects(response.data ?? []);
         } else {
@@ -31,7 +32,7 @@ function GetProjects(props: {
     };
 
     void fetchUsers();
-  }, [setProjects]);
+  }, [props.username, setProjects]);
 }
 
 export default GetProjects;

frontend/src/Components/UserInfoModal.tsx

@@ -42,7 +42,7 @@ function UserInfoModal(props: {
             Member of these projects:
           </h2>
           <div className="pr-6 pl-6">
-            <UserProjectListAdmin />
+            <UserProjectListAdmin username={props.username} />
           </div>
         </div>
         <div className="items-center space-x-6 pr-6 pl-6">

frontend/src/Components/UserProjectListAdmin.tsx

@@ -2,16 +2,16 @@ import { useEffect, useState } from "react";
 import { api } from "../API/API";
 import { Project } from "../Types/goTypes";
 
-function UserProjectListAdmin(): JSX.Element {
+function UserProjectListAdmin(props: { username: string }): JSX.Element {
   const [projects, setProjects] = useState<Project[]>([]);
 
   useEffect(() => {
     const fetchProjects = async (): Promise<void> => {
       try {
         const token = localStorage.getItem("accessToken") ?? "";
-        // const username = props.username;
+        const username = props.username;
 
-        const response = await api.getUserProjects(token);
+        const response = await api.getUserProjects(username, token);
         if (response.success) {
           setProjects(response.data ?? []);
         } else {
@@ -23,7 +23,7 @@ function UserProjectListAdmin(): JSX.Element {
     };
 
     void fetchProjects();
-  }, []);
+  }, [props.username]);
 
   return (
     <div className="border-2 border-black bg-white p-2 rounded-lg text-center">

frontend/src/Pages/AdminPages/AdminManageProjects.tsx

@@ -9,7 +9,10 @@ import { useState } from "react";
 
 function AdminManageProjects(): JSX.Element {
   const [projects, setProjects] = useState<Project[]>([]);
-  GetProjects({ setProjectsProp: setProjects });
+  GetProjects({
+    setProjectsProp: setProjects,
+    username: localStorage.getItem("username") ?? "",
+  });
   const content = (
     <>
       <h1 className="font-bold text-[30px] mb-[20px]">Manage Projects</h1>