From 5a59a581a197d18996356114c601c16efe5f95c5 Mon Sep 17 00:00:00 2001
From: Aron Buzogany <aronsaps@gmail.com>
Date: Sun, 12 May 2024 16:39:58 +0200
Subject: [PATCH] Fix #265

---
 .../components/Courses/AllCoursesTeacher.tsx  | 60 +++++++++++++------
 .../src/components/Courses/CourseUtils.tsx    |  3 +-
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/Courses/AllCoursesTeacher.tsx b/frontend/src/components/Courses/AllCoursesTeacher.tsx
index facfa9c2..888d576b 100644
--- a/frontend/src/components/Courses/AllCoursesTeacher.tsx
+++ b/frontend/src/components/Courses/AllCoursesTeacher.tsx
@@ -1,4 +1,14 @@
-import { Button, Dialog, DialogActions, DialogTitle, FormControl, FormHelperText, Grid, Input, InputLabel } from "@mui/material";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogTitle,
+  FormControl,
+  FormHelperText,
+  Grid,
+  Input,
+  InputLabel,
+} from "@mui/material";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -6,20 +16,23 @@ import { SideScrollableCourses } from "./CourseUtilComponents";
 import { Course, callToApiToCreateCourse } from "./CourseUtils";
 import { Title } from "../Header/Title";
 import { useLoaderData } from "react-router-dom";
+import { Me } from "../../types/me";
 
 /**
  * @returns A jsx component representing all courses for a teacher
  */
 export function AllCoursesTeacher(): JSX.Element {
   const [open, setOpen] = useState(false);
-  const courses = (useLoaderData() as Course[]);
+  const { courses, me } = useLoaderData() as { courses: Course[]; me: Me };
 
-  const [courseName, setCourseName] = useState('');
-  const [error, setError] = useState('');
+  const [courseName, setCourseName] = useState("");
+  const [error, setError] = useState("");
 
   const navigate = useNavigate();
 
-  const { t } = useTranslation('translation', { keyPrefix: 'allCoursesTeacher' });
+  const { t } = useTranslation("translation", {
+    keyPrefix: "allCoursesTeacher",
+  });
 
   const handleClickOpen = () => {
     setOpen(true);
@@ -31,14 +44,14 @@ export function AllCoursesTeacher(): JSX.Element {
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setCourseName(event.target.value);
-    setError(''); // Clearing error message when user starts typing
+    setError(""); // Clearing error message when user starts typing
   };
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault(); // Prevents the default form submission behaviour
 
     if (!courseName.trim()) {
-      setError(t('emptyCourseNameError'));
+      setError(t("emptyCourseNameError"));
       return;
     }
 
@@ -47,14 +60,18 @@ export function AllCoursesTeacher(): JSX.Element {
   };
   return (
     <>
-      <Title title={t('title')}></Title>
-      <Grid container direction={'column'} style={{marginTop: '1rem', width:'100vw', height: '80vh'}}>
+      <Title title={t("title")}></Title>
+      <Grid
+        container
+        direction={"column"}
+        style={{ marginTop: "1rem", width: "100vw", height: "80vh" }}
+      >
         <SideScrollableCourses courses={courses}></SideScrollableCourses>
         <Dialog open={open} onClose={handleClose}>
-          <DialogTitle>{t('courseForm')}</DialogTitle>
+          <DialogTitle>{t("courseForm")}</DialogTitle>
           <form style={{ margin: "2rem" }} onSubmit={handleSubmit}>
             <FormControl>
-              <InputLabel htmlFor="course-name">{t('courseName')}</InputLabel>
+              <InputLabel htmlFor="course-name">{t("courseName")}</InputLabel>
               <Input
                 id="course-name"
                 value={courseName}
@@ -62,18 +79,25 @@ export function AllCoursesTeacher(): JSX.Element {
                 error={!!error}
                 aria-describedby="my-helper-text"
               />
-              {error && <FormHelperText id="my-helper-text">{error}</FormHelperText>}
+              {error && (
+                <FormHelperText id="my-helper-text">{error}</FormHelperText>
+              )}
             </FormControl>
             <DialogActions>
-              <Button onClick={handleClose}>{t('cancel')}</Button>
-              <Button type="submit">{t('submit')}</Button>
+              <Button onClick={handleClose}>{t("cancel")}</Button>
+              <Button type="submit">{t("submit")}</Button>
             </DialogActions>
           </form>
         </Dialog>
-        <Grid item style={{position: "absolute", left: "2rem", bottom: "5rem"}}>
-          <Button onClick={handleClickOpen} >{t('create')}</Button>
-        </Grid>
+        {me && me.role === "TEACHER" && (
+          <Grid
+            item
+            style={{ position: "absolute", left: "2rem", bottom: "5rem" }}
+          >
+            <Button onClick={handleClickOpen}>{t("create")}</Button>
+          </Grid>
+        )}
       </Grid>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/Courses/CourseUtils.tsx b/frontend/src/components/Courses/CourseUtils.tsx
index 756e264f..49eeacd0 100644
--- a/frontend/src/components/Courses/CourseUtils.tsx
+++ b/frontend/src/components/Courses/CourseUtils.tsx
@@ -1,6 +1,7 @@
 import { NavigateFunction, Params } from "react-router-dom";
 import { authenticatedFetch } from "../../utils/authenticated-fetch";
 import { Me } from "../../types/me";
+import { fetchMe } from "../../utils/fetches/FetchMe";
 
 export interface Course {
   course_id: string;
@@ -133,7 +134,7 @@ const fetchData = async (url: string, params?: URLSearchParams) => {
 
 export const dataLoaderCourses = async () => {
   //const params = new URLSearchParams({ 'teacher': loggedInUid() });
-  return fetchData(`courses`);
+  return {'courses': await fetchData(`courses`), 'me': await fetchMe()};
 };
 
 const dataLoaderCourse = async (courseId: string) => {