timetable page does correct fetch, and pages now have correct height to account for navbar

Author: TobbleCobble

client/src/components/timetable.tsx

@@ -374,7 +374,7 @@ function Timetable({ timetable_tasks_props }: TimetableProps) {
     >
       <div
         id="timetable-content"
-        className="h-full w-full overflow-auto overscroll-none"
+        className="h-full w-full overflow-auto overscroll-none scrollbar"
         onScroll={resizeAndPositionTimetableElements}
       >
         <div

client/src/pages/focus.tsx

@@ -152,7 +152,7 @@ const CountdownTimer = () => {
   }
 
   return (
-    <div className="h-screen bg-slate-800 p-8 font-inter">
+    <div className="h-[calc(100vh-64px)] bg-slate-800 p-8 font-inter">
       <div className="flex flex-col items-center justify-start rounded-xl bg-slate-700 p-8 font-mono text-white shadow-inner shadow-slate-900">
         <p className="p-4 font-inter text-4xl font-semibold">focus</p>
         <div className="flex flex-row justify-center">

client/src/pages/schedule.tsx

@@ -5,6 +5,7 @@ import Timetable, {
   resizeAndPositionTimetableElements,
 } from "@/components/timetable";
 import { TimetableTaskProps } from "@/components/timetable_task";
+import { useRouter } from "next/router";
 
 /*
 Database representation of Time.
@@ -59,6 +60,8 @@ Page containing a Timetable to visually represent the times that tasks have been
 assigned.
 */
 function Schedule() {
+
+  const router = useRouter();
   const [timetableTasksProps, setTimetableTasksProps] = useState<
     TimetableTaskProps[]
   >([]);
@@ -82,13 +85,35 @@ function Schedule() {
     to be displayed. Sets the timetableTasksProps State variable once finished.
     */
     async function fetchTasks() {
-      const API_URL = "http://localhost:8000/api/planner/tasks/";
+      
       try {
-        const response = await fetch(API_URL);
-        if (!response.ok) {
-          throw new Error(`Response status: ${response.status}`);
+        const token = localStorage.getItem("access");
+        if (!token) {
+          router.push("/login"); //redirect to login if unauthorised
+          return;
+        }
+        const auth = await fetch(
+          "http://localhost:8000/api/planner/protected/",
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          },
+        );
+        if (!auth.ok) {
+          router.push("/login"); //redirect to login if unauthorised
+          return;
         }
-        const data = await response.json();
+        const tasksFetch = await fetch(
+          `http://localhost:8000/api/planner/tasks/`,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          },
+        );
+
+        const data = await tasksFetch.json();
         let timetable_task_props =
           await formatTaskDataToTimetableTaskProps(data);
         timetable_task_props =
@@ -269,12 +294,12 @@ function Schedule() {
     return () => {
       removeEventListeners();
     };
-  }, []);
+  }, [router]);
   /* This should be dependent on timetableTasksProps however doing so causes it
   to run in an infinite loop. */
 
   return (
-    <div className="content-container min-w-screen min-h-screen flex w-full flex-row bg-slate-950">
+    <div className="content-container min-w-screen h-[calc(100vh-64px)] flex w-full flex-row bg-slate-950">
       <div className="timetable-container max-h-[90vh] w-full p-3">
         <Timetable timetable_tasks_props={timetableTasksProps} />
       </div>

client/src/styles/globals.css

@@ -92,5 +92,6 @@
 @layer base {
   body {
     @apply bg-background text-foreground;
+    @apply font-inter;
   }
 }