Teacher is now listed as admin on course page (#349)

* teacher is also listed, useMemo instead of useEffect to prevent listing twice

* useMemo bad, reworked the student and admin fetchers

* all fetches straight to loader fetches Me objects after fetching admins and students, no need for useffect

* fixed loader and seeder

backend/seeder/seeder.py

@@ -170,7 +170,7 @@ def into_the_db(my_uid):
             subscribed_students = populate_course_students(
                 session, course_id, students)
             populate_course_projects(
-                session, course_id, subscribed_students, my_uid)
+                session, course_id, subscribed_students)
 
         for _ in range(5):  # 5 courses where my_uid is a student
             teacher_uid = teachers[random.randint(0, len(teachers)-1)].uid
@@ -181,7 +181,7 @@ def into_the_db(my_uid):
             session.commit()
             subscribed_students.append(my_uid)  # my_uid is also a student
             populate_course_projects(
-                session, course_id, subscribed_students, teacher_uid)
+                session, course_id, subscribed_students)
     except SQLAlchemyError as e:
         if session:  # possibly error resulted in session being null
             session.rollback()
@@ -211,12 +211,8 @@ def populate_course_students(session, course_id, students):
     return [student.uid for student in subscribed_students]
 
 
-def populate_course_projects(session, course_id, students, teacher_uid):
+def populate_course_projects(session, course_id, students):
     """Populates the course with projects and submissions, also creates the files"""
-    teacher_relation = course_admin_generator(course_id, teacher_uid)
-    session.add(teacher_relation)
-    session.commit()
-
     num_projects = random.randint(1, 3)
     projects = generate_projects(course_id, num_projects)
     session.add_all(projects)

frontend/src/components/Courses/CourseDetailTeacher.tsx

@@ -24,7 +24,6 @@ import {
   apiHost,
   getIdFromLink,
   getNearestFutureDate,
-  getUser,
   ProjectDetail,
 } from "./CourseUtils";
 import {
@@ -128,42 +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(() => {
-    setAdminObjects([]);
-    admins.forEach((admin) => {
-      getUser(admin.uid).then((user: Me) => {
-        setAdminObjects((prev) => {
-          return [...prev, user];
-        });
-      });
-    });
-  }, [admins]);
-
-  useEffect(() => {
-    setStudentObjects([]);
-    students.forEach((student) => {
-      getUser(student.uid).then((user: Me) => {
-        setStudentObjects((prev) => {
-          return [...prev, user];
-        });
-      });
-    });
-  }, [students]);
-
   const handleCheckboxChange = (
     event: ChangeEvent<HTMLInputElement>,
     uid: string
@@ -176,7 +151,7 @@ export function CourseDetailTeacher(): JSX.Element {
       );
     }
   };
-
+  
   return (
     <>
       <Title title={course.name}></Title>
@@ -216,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"
@@ -252,7 +227,7 @@ export function CourseDetailTeacher(): JSX.Element {
               >
                 <Typography variant="h5">{t("students")}:</Typography>
                 <EmptyOrNotStudents
-                  students={studentObjects}
+                  students={studentMes}
                   selectedStudents={selectedStudents}
                   handleCheckboxChange={handleCheckboxChange}
                 />

frontend/src/components/Courses/CourseUtils.tsx

@@ -224,6 +224,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,
 }: {
@@ -237,5 +241,9 @@ 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 admin_uids = admins.map((admin: {uid: string}) => getIdFromLink(admin.uid));
+  const student_uids = students.map((student: {uid: string}) => getIdFromLink(student.uid));
+  const adminMes = await fetchMes([course.teacher, ...admin_uids]);
+  const studentMes = await fetchMes(student_uids);
+  return { course, projects, adminMes, studentMes };
 };