Merge remote-tracking branch 'origin/issue-7-Allow_CRUD_Operations_on_Tasks' into timetable-fixes

Author: TobbleCobble

client/src/components/task_form.tsx

@@ -51,6 +51,13 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+
+    const token = localStorage.getItem("access");
+    if (!token) {
+      console.error("No access token");
+      return;
+    }
+
     try {
       const existing_topic_ids = topics
         .filter((t) => t.type === "existing")
@@ -63,6 +70,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
         },
         body: JSON.stringify({
           name: taskName,

client/src/components/task_item.tsx

@@ -82,6 +82,9 @@ export function TaskItem({
 
   async function saveEdit() {
     setSaving(true);
+
+    const token = localStorage.getItem("access");
+
     try {
       const existing_topic_ids = draftTopics
         .filter((t) => t.type === "existing")
@@ -98,7 +101,10 @@ export function TaskItem({
         `http://localhost:8000/api/planner/tasks/${item.id}/`,
         {
           method: "PUT",
-          headers: { "Content-Type": "application/json" },
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
           body: JSON.stringify({
             name: draftName,
             description: draftDescription,

client/src/pages/tasks.tsx

@@ -49,7 +49,8 @@ export default function TasksPage() {
           router.push("/login"); //redirect to login if unauthorised
           return;
         }
-        const auth = await fetch( "http://localhost:8000/api/planner/protected/",
+        const auth = await fetch(
+          "http://localhost:8000/api/planner/protected/",
           {
             headers: {
               Authorization: `Bearer ${token}`,
@@ -102,13 +103,16 @@ export default function TasksPage() {
     const task = items.find((t) => t.id === id);
     if (!task) return;
 
+    const token = localStorage.getItem("access");
+
     try {
       const response = await fetch(
         `http://localhost:8000/api/planner/tasks/${id}/toggle_complete/`,
         {
           method: "PATCH",
           headers: {
             "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
           },
           body: JSON.stringify({ completed: !task.completed }),
         },
@@ -135,10 +139,17 @@ export default function TasksPage() {
   async function handleTaskDeleted(id: number) {
     if (!window.confirm("Delete this task?")) return;
 
+    const token = localStorage.getItem("access");
+
     try {
       const response = await fetch(
         `http://localhost:8000/api/planner/tasks/${id}/`,
-        { method: "DELETE" },
+        {
+          method: "DELETE",
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        },
       );
 
       if (!response.ok) {
@@ -152,7 +163,7 @@ export default function TasksPage() {
   }
 
   return (
-    <div className="content-container min-w-screen min-h-screen relative flex flex-row items-center justify-center bg-slate-500">
+    <div className="content-container min-w-screen relative flex min-h-screen flex-row items-center justify-center bg-slate-500">
       <div className="task-list-container h-full w-full">
         <div className="task-list-content flex h-full w-full flex-col items-center justify-center rounded-lg p-3 text-slate-200">
           <div className="task-list-top mb-3 hidden h-[10%] w-full rounded-t-lg">
@@ -163,10 +174,10 @@ export default function TasksPage() {
           <div className="task-list-bottom flex w-full flex-row justify-center gap-6">
             <div
               className="task-list-wrapper flex w-fit flex-row justify-center"
-              style={{ 
-                scrollbarWidth: "thin", 
+              style={{
+                scrollbarWidth: "thin",
                 scrollbarColor: "grey white",
-                display: !(showAddTask && items.length === 0) ? "flex" : "none"
+                display: !(showAddTask && items.length === 0) ? "flex" : "none",
               }}
             >
               <TaskList