Route loader data Phase 2

frontend/src/dataloaders/SharedFunctions.ts

@@ -0,0 +1,32 @@
+import {Project, Subject} from "../utils/ApiInterfaces.ts";
+import apiFetch from "../utils/ApiFetch.ts";
+
+export enum teacherStudentRole {
+    STUDENT = "student",
+    TEACHER = "teacher"
+}
+
+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;
+        }
+    }
+    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,18 +1,15 @@
-import apiFetch from "../utils/ApiFetch.ts";
-import {Project, Subject} from "../utils/ApiInterfaces.ts";
+import {Project} from "../utils/ApiInterfaces.ts";
+import {projectsLoader, teacherStudentRole} from "./SharedFunctions.ts";
 
 export interface studentLoaderObject {
     projects: Project[]
 }
+
+export const STUDENT_ROUTER_ID = "student";
+
+
 export default async function studentLoader(): Promise<studentLoaderObject> {
-    const projects: Project[] = await (await apiFetch("/api/student/projects")).json() as Project[];
-    const subjects: Subject[] = await (await apiFetch("/api/student/subjects")).json() as Subject[];
-    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;
-        }
-    }
+    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 const SUBJECT_TEACHER_ROUTER_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

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

frontend/src/main.tsx

@@ -10,7 +10,10 @@ import HomeStudent from "./pages/student/HomeStudent.tsx";
 import HomeTeacher from "./pages/teacher/HomeTeacher.tsx";
 import 'bulma/css/bulma.min.css';
 import './assets/styles/mainpage.css'
-import studentLoader from "./dataloaders/StudentLoader.ts";
+import studentLoader, {STUDENT_ROUTER_ID} from "./dataloaders/StudentLoader.ts";
+import teacherLoader, {TEACHER_ROUTER_ID} from "./dataloaders/TeacherLoader.ts";
+import SubjectsTeacher from "./pages/teacher/SubjectsTeacher.tsx";
+import subjectsTeacherLoader, {SUBJECT_TEACHER_ROUTER_ID} from "./dataloaders/SubjectsTeacherLoader.ts";
 
 const router = createBrowserRouter([
     {
@@ -29,12 +32,20 @@ const router = createBrowserRouter([
     {
         path: "/student",
         element: <HomeStudent/>,
-        id: "student",
+        id: STUDENT_ROUTER_ID,
         loader: studentLoader
     },
     {
         path: "/teacher",
-        element: <HomeTeacher/>
+        element: <HomeTeacher/>,
+        id: TEACHER_ROUTER_ID,
+        loader: teacherLoader
+    },
+    {
+        path: "/teacher/courses",
+        element: <SubjectsTeacher/>,
+        id: SUBJECT_TEACHER_ROUTER_ID,
+        loader: subjectsTeacherLoader
     }
 ]);
 

frontend/src/pages/student/HomeStudent.tsx

@@ -4,13 +4,13 @@ import {Sidebar} from "../../components/Sidebar.tsx";
 import ProjectCardStudent from "./ProjectCardStudent.tsx";
 import '../../assets/styles/students_components.css'
 import {useRouteLoaderData} from "react-router-dom";
-import {studentLoaderObject} from "../../dataloaders/StudentLoader.ts";
+import {STUDENT_ROUTER_ID, studentLoaderObject} from "../../dataloaders/StudentLoader.ts";
 import DeadlineTable from "./DeadlineTable.tsx";
 
 export default function HomeStudent(): JSX.Element {
 
     // data contains a list of Project in data.projects (i think)
-    const data: studentLoaderObject = useRouteLoaderData("student") as studentLoaderObject
+    const data: studentLoaderObject = useRouteLoaderData(STUDENT_ROUTER_ID) as studentLoaderObject
     console.log(data) // TODO: remove
 
     return (

frontend/src/pages/teacher/HomeTeacher.tsx

@@ -1,6 +1,12 @@
 import {JSX} from "react";
+import {TEACHER_ROUTER_ID, teacherLoaderObject} from "../../dataloaders/TeacherLoader.ts";
+import {useRouteLoaderData} from "react-router-dom";
 
 export default function HomeTeacher(): JSX.Element {
+
+    const data: teacherLoaderObject = useRouteLoaderData(TEACHER_ROUTER_ID) as teacherLoaderObject;
+    console.log(data);
+
     return (
         <>Homescreen for a teacher</>
     )

frontend/src/pages/teacher/SubjectsTeacher.tsx

@@ -0,0 +1,13 @@
+import {JSX} from "react";
+import {SUBJECT_TEACHER_ROUTER_ID, subjectsTeacherLoaderObject} from "../../dataloaders/SubjectsTeacherLoader.ts";
+import {useRouteLoaderData} from "react-router-dom";
+
+export default function SubjectsTeacher(): JSX.Element {
+
+    const data= useRouteLoaderData(SUBJECT_TEACHER_ROUTER_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
+}