all fetches straight to loader fetches Me objects after fetching admi…

…ns and students, no need for useffect
SELab-2 · May 12, 2024 · adf395f · adf395f
1 parent e47ebc7
commit adf395f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 43 deletions.
diff --git a/frontend/src/components/Courses/CourseDetailTeacher.tsx b/frontend/src/components/Courses/CourseDetailTeacher.tsx
@@ -24,7 +24,6 @@ import {
   apiHost,
   getIdFromLink,
   getNearestFutureDate,
-  getUser,
   ProjectDetail,
 } from "./CourseUtils";
 import {
@@ -128,53 +127,18 @@ export function CourseDetailTeacher(): JSX.Element {
   const courseDetail = useLoaderData() as {
     course: Course;
     projects: ProjectDetail[];
-    admins: UserUid[];
-    students: UserUid[];
+    adminMes: Me[];
+    studentMes: Me[];
   };
-
-  const { course, projects, admins, students } = courseDetail;
-  const [adminObjects, setAdminObjects] = useState<Me[]>([]);
-  const [studentObjects, setStudentObjects] = useState<Me[]>([]);
+  const { course, projects, adminMes, studentMes } = courseDetail;
   const { t } = useTranslation("translation", {
     keyPrefix: "courseDetailTeacher",
   });
+
   const { i18n } = useTranslation();
   const lang = i18n.language;
   const navigate = useNavigate();
 
-  useEffect(() => {
-    const fetchAdminData = async () => {
-      setAdminObjects([]);
-      const admins_and_teacher = admins.concat({ uid: course.teacher });
-      const adminObjects: Me[] = [];
-
-      for (const admin of admins_and_teacher) {
-        const user = await getUser(admin.uid);
-        adminObjects.push(user);
-      }
-
-      setAdminObjects(adminObjects);
-    };
-
-    fetchAdminData();
-  }, [admins, course]);
-
-  useEffect(() => {
-    const fetchStudentData = async () => {
-      setStudentObjects([]);
-      const studentObjects: Me[] = [];
-
-      for (const student of students) {
-        const user = await getUser(student.uid);
-        studentObjects.push(user);
-      }
-
-      setStudentObjects(studentObjects);
-    };
-
-    fetchStudentData();
-  }, [students]);
-
   const handleCheckboxChange = (
     event: ChangeEvent<HTMLInputElement>,
     uid: string
@@ -227,7 +191,7 @@ export function CourseDetailTeacher(): JSX.Element {
               >
                 <Typography variant="h5">{t("admins")}:</Typography>
                 <Grid container direction={"column"}>
-                  {adminObjects.map((admin) => (
+                  {adminMes.map((admin: Me) => (
                     <Grid
                       container
                       alignItems="center"
@@ -263,7 +227,7 @@ export function CourseDetailTeacher(): JSX.Element {
               >
                 <Typography variant="h5">{t("students")}:</Typography>
                 <EmptyOrNotStudents
-                  students={studentObjects}
+                  students={studentMes}
                   selectedStudents={selectedStudents}
                   handleCheckboxChange={handleCheckboxChange}
                 />

diff --git a/frontend/src/components/Courses/CourseUtils.tsx b/frontend/src/components/Courses/CourseUtils.tsx
@@ -174,6 +174,10 @@ const dataLoaderStudents = async (courseId: string) => {
   return fetchData(`courses/${courseId}/students`);
 };
 
+const fetchMes = async (uids: string[]) => {
+  return Promise.all(uids.map((uid) => getUser(uid)));
+}
+
 export const dataLoaderCourseDetail = async ({
   params,
 }: {
@@ -187,5 +191,8 @@ export const dataLoaderCourseDetail = async ({
   const projects = await dataLoaderProjects(courseId);
   const admins = await dataLoaderAdmins(courseId);
   const students = await dataLoaderStudents(courseId);
-  return { course, projects, admins, students };
+
+  const adminMes = await fetchMes([course.teacher, ...admins]);
+  const studentMes = await fetchMes(students);
+  return { course, projects, adminMes, studentMes };
 };