first dataLoader

frontend/src/dataloaders/StudentLoader.ts

@@ -0,0 +1,17 @@
+import apiFetch from "../utils/ApiFetch.ts";
+import {Project, Subject} from "../utils/ApiInterfaces.ts";
+
+export interface studentLoaderObject {
+    projects: Project[]
+}
+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;
+        }
+    }
+    return {"projects": projects};
+}

frontend/src/main.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom/client'
+import {createRoot} from 'react-dom/client'
 import {createBrowserRouter, RouterProvider,} from "react-router-dom";
 import './index.css'
 import Root from './pages/root.tsx'
@@ -10,6 +10,7 @@ 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";
 
 const router = createBrowserRouter([
     {
@@ -27,14 +28,17 @@ const router = createBrowserRouter([
     },
     {
         path: "/student",
-        element: <HomeStudent/>
+        element: <HomeStudent/>,
+        id: "student",
+        loader: studentLoader
     },
     {
         path: "/teacher",
         element: <HomeTeacher/>
     }
 ]);
-ReactDOM.createRoot(document.getElementById('root')!).render(
+
+createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
         <RouterProvider router={router}/>
     </React.StrictMode>,

frontend/src/pages/student/HomeStudent.tsx

@@ -3,8 +3,15 @@ import {Header} from "../../components/Header.tsx";
 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";
 
 export default function HomeStudent(): JSX.Element {
+
+    // data contains a list of Project in data.projects (i think)
+    const data: studentLoaderObject = useRouteLoaderData("student") as studentLoaderObject
+    console.log(data) // TODO: remove
+
     return (
         <>
             <div className={"main-header"}>

frontend/src/utils/ApiFetch.ts

@@ -0,0 +1,12 @@
+const DEBUG: boolean = true; // should always be false on the repo.
+
+export default function apiFetch(url: string, options?: RequestInit) {
+    if (typeof options === 'undefined') {
+        options = {}
+    }
+    if (DEBUG) {
+        url = "http://127.0.0.1:8000" + url;
+    }
+    // TODO: add auth things in options
+    return fetch(url, options)
+}

frontend/src/utils/ApiInterfaces.ts

@@ -0,0 +1,17 @@
+export interface Subject {
+    id: number,
+    name: string
+}
+
+export interface Project {
+    id: number,
+    name: string,
+    deadline: string | Date,
+    archived: boolean,
+    description: string,
+    requirements: string,
+    visible: string,
+    max_students: number,
+    subject_id: number
+    subject_name: string | undefined | null
+}