subjectsTeacherDataLoader

frontend/src/dataloaders/SharedFunctions.ts

@@ -1,20 +1,32 @@
 import {Project, Subject} from "../utils/ApiInterfaces.ts";
 import apiFetch from "../utils/ApiFetch.ts";
 
-export enum projectLoaderRole {
+export enum teacherStudentRole {
     STUDENT = "student",
     TEACHER = "teacher"
 }
 
-export async function projectLoader(role: projectLoaderRole): Promise<Project[]> {
-    const projects: Project[] = await (await apiFetch(`/api/${role}/projects`)).json() as Project[];
-    const subjects: Subject[] = await (await apiFetch(`/api/${role}/subjects`)).json() as Subject[];
+export async function projectsLoader(role: teacherStudentRole): Promise<Project[]> {
+    const getter = await getAllProjectsAndSubjects(role);
+    const subjects = getter.subjects;
+    const projects = getter.projects;
+    // TODO: add submission data
     for (let i = 0; i < projects.length; i++) {
         const subject: Subject | undefined = subjects.find(subject => subject.id === projects[i].subject_id);
         if (subject !== undefined) {
             projects[i].subject_name = subject.name;
         }
     }
-    // TODO: add submission data
     return projects;
 }
+
+export interface projectsAndSubjects {
+    projects: Project[],
+    subjects: Subject[]
+}
+
+export async function getAllProjectsAndSubjects(role: teacherStudentRole): Promise<projectsAndSubjects> {
+    const projects: Project[] = await (await apiFetch(`/${role}/projects`)).json() as Project[];
+    const subjects: Subject[] = await (await apiFetch(`/${role}/subjects`)).json() as Subject[];
+    return {projects, subjects}
+}

frontend/src/dataloaders/StudentLoader.ts

@@ -1,11 +1,11 @@
 import {Project} from "../utils/ApiInterfaces.ts";
-import {projectLoader, projectLoaderRole} from "./SharedFunctions.ts";
+import {projectsLoader, teacherStudentRole} from "./SharedFunctions.ts";
 
 export interface studentLoaderObject {
     projects: Project[]
 }
 export default async function studentLoader(): Promise<studentLoaderObject> {
-    const projects: Project[] = await projectLoader(projectLoaderRole.STUDENT);
+    const projects: Project[] = await projectsLoader(teacherStudentRole.STUDENT);
     // TODO: add submission data
     return {"projects": projects};
 }

frontend/src/dataloaders/SubjectsTeacherLoader.ts

@@ -0,0 +1,27 @@
+import {Project, properSubject, Subject} from "../utils/ApiInterfaces.ts";
+import {getAllProjectsAndSubjects, projectsAndSubjects, teacherStudentRole} from "./SharedFunctions.ts";
+
+export interface subjectsTeacherLoaderObject {
+    subjects: properSubject[]
+}
+
+export let SUBJECT_TEACHER_ID = "subjectTeacher";
+
+export default async function subjectsTeacherLoader(): Promise<subjectsTeacherLoaderObject> {
+    const temp: projectsAndSubjects = await getAllProjectsAndSubjects(teacherStudentRole.TEACHER);
+    const subjects: Subject[] = temp.subjects;
+    const projects: Project[] = temp.projects;
+
+    const p_subjects: properSubject[] = subjects.map(subject => {
+        const active_projects = projects.filter(project =>
+            project.archived && project.subject_id === subject.id
+        );
+        return {
+            id: subject.id,
+            name: subject.name,
+            active_projects: active_projects.length,
+            first_deadline: null // TODO: add deadlines when needed api endpoints are added.
+        };
+    });
+    return {"subjects": p_subjects}
+}

frontend/src/dataloaders/TeacherLoader.ts

@@ -1,10 +1,10 @@
 import {Project} from "../utils/ApiInterfaces.ts";
-import {projectLoader, projectLoaderRole} from "./SharedFunctions.ts";
+import {projectsLoader, teacherStudentRole} from "./SharedFunctions.ts";
 
 export interface teacherLoaderObject {
     projects: Project[]
 }
 export default async function teacherLoader(): Promise<teacherLoaderObject> {
-    const projects: Project[] = await projectLoader(projectLoaderRole.TEACHER);
+    const projects: Project[] = await projectsLoader(teacherStudentRole.TEACHER);
     return {"projects": projects}
 }

frontend/src/main.tsx

@@ -12,6 +12,8 @@ import 'bulma/css/bulma.min.css';
 import './assets/styles/mainpage.css'
 import studentLoader from "./dataloaders/StudentLoader.ts";
 import teacherLoader from "./dataloaders/TeacherLoader.ts";
+import SubjectsTeacher from "./pages/teacher/SubjectsTeacher.tsx";
+import subjectsTeacherLoader, {SUBJECT_TEACHER_ID} from "./dataloaders/SubjectsTeacherLoader.ts";
 
 const router = createBrowserRouter([
     {
@@ -38,6 +40,12 @@ const router = createBrowserRouter([
         element: <HomeTeacher/>,
         id: "teacher",
         loader: teacherLoader
+    },
+    {
+        path: "/teacher/courses",
+        element: <SubjectsTeacher/>,
+        id: SUBJECT_TEACHER_ID,
+        loader: subjectsTeacherLoader
     }
 ]);
 

frontend/src/pages/teacher/SubjectsTeacher.tsx

@@ -0,0 +1,13 @@
+import {JSX} from "react";
+import {SUBJECT_TEACHER_ID, subjectsTeacherLoaderObject} from "../../dataloaders/SubjectsTeacherLoader.ts";
+import {useRouteLoaderData} from "react-router-dom";
+
+export default function SubjectsTeacher(): JSX.Element {
+
+    const data: subjectsTeacherLoaderObject = useRouteLoaderData(SUBJECT_TEACHER_ID) as subjectsTeacherLoaderObject;
+    console.log(data);
+
+    return(
+        <p>hier ziet de lkr al zijn vakken.</p>
+    )
+}

frontend/src/utils/ApiFetch.ts

@@ -4,6 +4,7 @@ export default function apiFetch(url: string, options?: RequestInit) {
     if (typeof options === 'undefined') {
         options = {}
     }
+    url = "/api" + url;
     if (DEBUG) {
         url = "http://127.0.0.1:8000" + url;
     }

frontend/src/utils/ApiInterfaces.ts

@@ -15,3 +15,10 @@ export interface Project {
     subject_id: number,
     subject_name: string | undefined | null
 }
+
+export interface properSubject {
+    id: number,
+    name: string,
+    active_projects: number,
+    first_deadline: Date | null | string
+}