Only shows create course button when you have privilege to see it

frontend/src/components/Courses/AllCoursesTeacher.tsx

@@ -1,30 +1,42 @@
-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";
 import { SideScrollableCourses } from "./CourseUtilComponents";
-import {Course, callToApiToCreateCourse, ProjectDetail} from "./CourseUtils";
+import { Course, callToApiToCreateCourse, ProjectDetail } 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 loader = useLoaderData() as {
+  const { courses, projects, me } = useLoaderData() as {
     courses: Course[];
+    me: Me;
     projects: { [courseId: string]: ProjectDetail[] };
   };
-  const courses = loader.courses;
-  const projects = loader.projects;
 
-  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);
@@ -36,14 +48,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;
     }
 
@@ -52,33 +64,47 @@ export function AllCoursesTeacher(): JSX.Element {
   };
   return (
     <>
-      <Title title={t('title')}></Title>
-      <Grid container direction={'column'} style={{marginTop: '1rem', width:'100vw', height: '80vh'}}>
-        <SideScrollableCourses courses={courses} projects={projects}></SideScrollableCourses>
+      <Title title={t("title")}></Title>
+      <Grid
+        container
+        direction={"column"}
+        style={{ marginTop: "1rem", width: "100vw", height: "80vh" }}
+      >
+        <SideScrollableCourses
+          courses={courses}
+          projects={projects}
+        ></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}
                 onChange={handleInputChange}
                 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>
     </>
   );
-}
+}

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;
@@ -125,11 +126,12 @@ export const dataLoaderCourses = async () => {
 
   const courses =  await fetchData(`courses`);
   const projects = await fetchProjectsCourse(courses);
+  const me = await fetchMe();
   for( const c of courses){
     const teacher = await fetchData(`users/${c.teacher}`)
     c.teacher = teacher.display_name
   }
-  return {courses, projects}
+  return {courses, projects, me}
 };
 
 /**