Render Project List

frontend/src/Components/UserProjectListAdmin.tsx

@@ -1,22 +1,19 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
-import { useEffect, useState } from "react"; // Importing useEffect and useState from React
+import { api } from "../API/API";
-import { api } from "../API/API"; // Importing the api object
+import { Project } from "../Types/goTypes";
-import { Project } from "../Types/goTypes"; // Importing the Project type
 
 const UserProjectListAdmin: React.FC = () => {
-  // Define the functional component UserProjectListAdmin
+  const [projects, setProjects] = useState<Project[]>([]);
-  const [projects, setProjects] = useState<Project[]>([]); // State management for projects
 
   useEffect(() => {
     const fetchProjects = async (): Promise<void> => {
-      // Define the fetchProjects async function
       try {
         const token = localStorage.getItem("accessToken") ?? "";
         const username = getUsernameFromContext(); // Assuming you have a function to get the username from your context
 
-        const response = await api.getUserProjects(username, token); // Fetch projects from API
+        const response = await api.getUserProjects(username, token);
         if (response.success) {
-          setProjects(response.data ?? []); // Update projects state with fetched data
+          setProjects(response.data ?? []);
         } else {
           console.error("Failed to fetch projects:", response.message);
         }
@@ -25,13 +22,20 @@ const UserProjectListAdmin: React.FC = () => {
       }
     };
 
-    void fetchProjects(); // Call fetchProjects when the component mounts
+    void fetchProjects();
-  }, []); // Empty dependency array to run effect only once
+  }, []);
 
   return (
     <div>
       <h2>User Projects</h2>
-      {/* Placeholder for project list */}
+      <ul>
+        {projects.map((project) => (
+          <li key={project.id}>
+            <span>{project.name}</span>
+            {/* Add any additional project details you want to display */}
+          </li>
+        ))}
+      </ul>
     </div>
   );
 };