student overview

frontend/src/App.tsx

@@ -6,7 +6,6 @@ import {
 } from "react-router-dom";
 import Layout from "./components/Header/Layout";
 import { AllCoursesTeacher } from "./components/Courses/AllCoursesTeacher";
-import { CourseDetailTeacher } from "./components/Courses/CourseDetailTeacher";
 import {
   dataLoaderCourseDetail,
   dataLoaderCourses,
@@ -23,6 +22,7 @@ import { synchronizeJoinCode } from "./loaders/join-code.ts";
 import { fetchMe } from "./utils/fetches/FetchMe.ts";
 import {fetchProjectForm} from "./components/ProjectForm/project-form.ts";
 import loadSubmissionOverview from "./loaders/submission-overview-loader.ts";
+import CoursesDetail from "./components/Courses/CoursesDetail.tsx";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -38,7 +38,7 @@ const router = createBrowserRouter(
         <Route path="courses">
           <Route index element={<AllCoursesTeacher />} loader={dataLoaderCourses}/>
           <Route path="join" loader={synchronizeJoinCode} />
-          <Route path=":courseId" element={<CourseDetailTeacher />} loader={dataLoaderCourseDetail} />
+          <Route path=":courseId" element={<CoursesDetail />} loader={dataLoaderCourseDetail} />
         </Route>
         <Route path="projects">
           <Route

frontend/src/components/Courses/CourseDetailStudent.tsx

@@ -0,0 +1,100 @@
+import {
+    Grid,
+    Paper,
+    Typography,
+  } from "@mui/material";
+  import { useTranslation } from "react-i18next";
+  import {
+    Course,    ProjectDetail,
+  } from "./CourseUtils";
+  import {
+    useLoaderData,
+  } from "react-router-dom";
+  import { Title } from "../Header/Title";
+  import { Me } from "../../types/me";
+  import {EmptyOrNotProjects} from "./CourseDetailTeacher"
+
+
+
+  /**
+   *
+   * @returns A jsx component representing the course detail page for a teacher
+   */
+  export  default function CourseDetailStudent() {
+
+
+
+    const courseDetail = useLoaderData() as {
+      course: Course;
+      projects: ProjectDetail[];
+      adminMes: Me[];
+      studentMes: Me[];
+      me:Me;
+    };
+    const { course, projects, adminMes } = courseDetail;
+    const { t } = useTranslation("translation", {
+      keyPrefix: "courseDetailTeacher",
+    });
+
+    return (
+      <>
+        <Title title={course.name}></Title>
+        <Grid
+          container
+          direction={"row"}
+          spacing={2}
+          margin="1rem"
+          style={{ height: "80vh" }}
+        >
+          <Grid item xs={5} height="100%">
+            <Paper
+              style={{ height: "100%", maxHeight: "100%", overflow: "auto" }}
+            >
+              <div style={{ padding: "1rem" }}>
+                <Typography variant="h5">{t("projects")}:</Typography>
+                <EmptyOrNotProjects projects={projects} />
+              </div>
+            </Paper>
+          </Grid>
+          <Grid item xs={5} height="100%">
+            <Grid container direction={"column"} spacing={2} height={"100%"}>
+              <Grid
+                item
+                style={{
+                  height: "50%",
+                }}
+              >
+                <Paper
+                  style={{
+                    overflow: "auto",
+                    height: "100%",
+                  }}
+                >
+                  <Typography variant="h5">{t("admins")}:</Typography>
+                  <Grid container direction={"column"}>
+                    {adminMes.map((admin: Me) => (
+                      <Grid
+                        container
+                        alignItems="center"
+                        spacing={1}
+                        key={admin.uid}
+                      >
+                        <Grid item>
+                          <Typography variant="body1">
+                            {admin.display_name}
+                          </Typography>
+                        </Grid>
+
+                      </Grid>
+                    ))}
+                  </Grid>
+                </Paper>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </>
+    );
+  }
+
+

frontend/src/components/Courses/CourseDetailTeacher.tsx

@@ -113,7 +113,7 @@ function handleDeleteCourse(
  *
  * @returns A jsx component representing the course detail page for a teacher
  */
-export function CourseDetailTeacher(): JSX.Element {
+export  default function CourseDetailTeacher() {
   const [selectedStudents, setSelectedStudents] = useState<string[]>([]);
   const [anchorEl, setAnchorElStudent] = useState<null | HTMLElement>(null);
   const openCodes = Boolean(anchorEl);
@@ -129,8 +129,9 @@ export function CourseDetailTeacher(): JSX.Element {
     projects: ProjectDetail[];
     adminMes: Me[];
     studentMes: Me[];
+    me:Me;
   };
-  const { course, projects, adminMes, studentMes } = courseDetail;
+  const { course, projects, adminMes, studentMes,me } = courseDetail;
   const { t } = useTranslation("translation", {
     keyPrefix: "courseDetailTeacher",
   });
@@ -276,7 +277,7 @@ export function CourseDetailTeacher(): JSX.Element {
  * @param projects - The array of projects.
  * @returns Either a place holder for no projects or a grid of cards describing the projects.
  */
-function EmptyOrNotProjects({
+export function EmptyOrNotProjects({
   projects,
 }: {
   projects: ProjectDetail[];

frontend/src/components/Courses/CourseUtils.tsx

@@ -247,5 +247,6 @@ export const dataLoaderCourseDetail = async ({
   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 };
+  const me = await fetchMe();
+  return { course, projects, adminMes, studentMes, me};
 };

frontend/src/components/Courses/CoursesDetail.tsx

@@ -0,0 +1,20 @@
+import {useLoaderData} from "react-router-dom";
+import {Me} from "../../types/me.ts";
+import {Course, ProjectDetail} from "./CourseUtils.tsx";
+import CourseDetailTeacher from "./CourseDetailTeacher.tsx";
+import CourseDetailStudent from "./CourseDetailStudent.tsx";
+
+export default function CoursesDetail() :JSX.Element {
+  const loader = useLoaderData() as {
+    course: Course;
+    projects: ProjectDetail[];
+    adminMes: Me[];
+    studentMes: Me[];
+    me:Me;
+  };
+  if (loader.me.role == "TEACHER") {
+    return <CourseDetailTeacher/>;
+  } else {
+    return <CourseDetailStudent/>;
+  }
+}