added loader

frontend/src/components/Courses/AllCoursesTeacher.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { SideScrollableCourses } from "./CourseUtilComponents";
-import { Course, callToApiToCreateCourse } from "./CourseUtils";
+import {Course, callToApiToCreateCourse, ProjectDetail} from "./CourseUtils";
 import { Title } from "../Header/Title";
 import { useLoaderData } from "react-router-dom";
 
@@ -12,7 +12,13 @@ import { useLoaderData } from "react-router-dom";
  */
 export function AllCoursesTeacher(): JSX.Element {
   const [open, setOpen] = useState(false);
-  const courses = (useLoaderData() as Course[]);
+  const loader = useLoaderData() as {
+    courses: Course[];
+    projects: { [courseId: string]: ProjectDetail[] }
+  };
+  const courses = loader.courses;
+  const projects = loader.projects;
+
 
   const [courseName, setCourseName] = useState('');
   const [error, setError] = useState('');
@@ -49,7 +55,7 @@ export function AllCoursesTeacher(): JSX.Element {
     <>
       <Title title={t('title')}></Title>
       <Grid container direction={'column'} style={{marginTop: '1rem', width:'100vw', height: '80vh'}}>
-        <SideScrollableCourses courses={courses}></SideScrollableCourses>
+        <SideScrollableCourses courses={courses} projects={projects}></SideScrollableCourses>
         <Dialog open={open} onClose={handleClose}>
           <DialogTitle>{t('courseForm')}</DialogTitle>
           <form style={{ margin: "2rem" }} onSubmit={handleSubmit}>

frontend/src/components/Courses/CourseUtils.tsx

@@ -142,6 +142,7 @@ export const dataLoaderCourses = async () => {
 /**
  * Fetch the projects for the Course component
  * @param courses - All the courses
+ * @returns the projects
  */
 export async function  fetchProjectsCourse (courses:Course[]) {
   const projectPromises = courses.map((course) =>
@@ -152,9 +153,8 @@ export async function  fetchProjectsCourse (courses:Course[]) {
 
   const projectResults = await Promise.all(projectPromises);
   const projectsMap: { [courseId: string]: ProjectDetail[] } = {};
-
-  projectResults.forEach((result, index) => {
-    const detailProjectPromises = result.data.map(async (item: Project) => {
+  for await (const [index, result] of projectResults.entries()) {
+    projectsMap[getIdFromLink(courses[index].course_id)]  = await Promise.all(result.data.map(async (item: Project) => {
       const projectRes = await authenticatedFetch(item.project_id);
       if (projectRes.status !== 200) {
         throw new Response("Failed to fetch project data", {
@@ -177,13 +177,9 @@ export async function  fetchProjectsCourse (courses:Course[]) {
         deadlines: projectDeadlines,
       };
       return project;
-    });
-    Promise.all(detailProjectPromises).then((projects) => {
-      projectsMap[getIdFromLink(courses[index].course_id)] = projects;
-      setProjects({ ...projectsMap });
-    });
-  });
-  setProjects(projectsMap);
+    }));
+  }
+  return { ...projectsMap };
 }
 
 const dataLoaderCourse = async (courseId: string) => {