Course details

frontend/public/locales/en/translation.json

@@ -17,7 +17,7 @@
     "welcomeDescription": "Welcome to Peristerónas, the online submission platform of UGent",
     "login": "Login"
   },
-  "courseDetailTeacher": {
+  "courseDetail": {
     "title": "Course Details",
     "deleteCourse": "Delete Course",
     "unauthorizedDelete": "You are unauthorized to delete this course",

frontend/src/App.tsx

@@ -6,7 +6,7 @@ import {
 } from "react-router-dom";
 import Layout from "./components/Header/Layout";
 import { AllCoursesTeacher } from "./components/Courses/AllCoursesTeacher";
-import { CourseDetailTeacher } from "./components/Courses/CourseDetailTeacher";
+import { CourseDetail } from "./components/Courses/CourseDetail.tsx";
 import {
   dataLoaderCourseDetail,
   dataLoaderCourses,
@@ -41,7 +41,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={<CourseDetail />} loader={dataLoaderCourseDetail} />
         </Route>
         <Route path="projects">
           <Route

frontend/src/components/Courses/CourseDetail.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { fetchMe } from "../../utils/fetches/FetchMe";
+import { CourseDetailStudent } from "./CourseDetailStudent";
+import { CourseDetailTeacher } from "./CourseDetailTeacher";
+import { Me } from "../../types/me";
+
+/**
+ *
+ * @returns The right course detail component according to the role of the user.
+ */
+export function CourseDetail(): JSX.Element {
+  const [me, setMe] = useState<Me | null>(null);
+
+  useEffect(() => {
+    fetchMe().then((data) => {
+      setMe(data);
+    });
+  }, []);
+
+  if (me?.role === "STUDENT") {
+    return <CourseDetailStudent />;
+  }
+  if (me === undefined) {
+    return <></>;
+  }
+  return <CourseDetailTeacher />;
+}

frontend/src/components/Courses/CourseDetailStudent.tsx

@@ -0,0 +1,49 @@
+import { 
+  Grid, 
+  Paper, 
+  Typography 
+} from "@mui/material";
+import { useLoaderData } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Course } from "../../types/course";
+import { ProjectDetail } from "./CourseUtils";
+import { Title } from "../Header/Title";
+import { EmptyOrNotProjects } from "./CourseDetailTeacher";
+
+/**
+ *
+ * @returns The component representing the course details page for a student.
+ */
+export function CourseDetailStudent(): JSX.Element {
+  const courseDetail = useLoaderData() as {
+    course: Course;
+    projects: ProjectDetail[];
+  };
+
+  const { course, projects } = courseDetail;
+  const { t } = useTranslation("translation", {
+    keyPrefix: "courseDetail",
+  });
+
+  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" }}
+          >
+            <Typography variant="h5">{t("projects")}:</Typography>
+            <EmptyOrNotProjects projects={projects} />
+          </Paper>
+        </Grid>
+      </Grid>
+    </>
+  );
+}

frontend/src/components/Courses/CourseDetailTeacher.tsx

@@ -136,7 +136,7 @@ export function CourseDetailTeacher(): JSX.Element {
   const [adminObjects, setAdminObjects] = useState<Me[]>([]);
   const [studentObjects, setStudentObjects] = useState<Me[]>([]);
   const { t } = useTranslation("translation", {
-    keyPrefix: "courseDetailTeacher",
+    keyPrefix: "courseDetail",
   });
   const { i18n } = useTranslation();
   const lang = i18n.language;
@@ -303,13 +303,13 @@ 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[];
 }): JSX.Element {
   const { t } = useTranslation("translation", {
-    keyPrefix: "courseDetailTeacher",
+    keyPrefix: "courseDetail",
   });
   if (projects === undefined || projects.length === 0) {
     return <Typography variant="h6">{t("noProjects")}</Typography>;
@@ -474,7 +474,7 @@ function JoinCodeMenu({
   anchorEl: HTMLElement | null;
 }) {
   const { t } = useTranslation("translation", {
-    keyPrefix: "courseDetailTeacher",
+    keyPrefix: "courseDetail",
   });
 
   const [codes, setCodes] = useState<JoinCode[]>([]);

frontend/src/types/course.ts

@@ -1,4 +1,6 @@
 export interface Course {
   name: string;
+  teacher: string;
+  projects: [string];
   course_id: string;
 }

frontend/src/types/project.ts

@@ -0,0 +1,12 @@
+export interface Project {
+  title: string;
+  description: string;
+  assignment_file: string;
+  deadline: string;
+  course_id: string;
+  visible_for_students: boolean;
+  archived: boolean;
+  test_path: string;
+  script_name: string;
+  regex_expressions: [string];
+}