Fetch section tasks from API, update next.js

frontend/app/(main)/section/[id]/page.tsx

@@ -1,5 +1,10 @@
-"use client";
 import { TaskList } from "@/components/tasks/task-list";
-export default function Page() {
-  return <TaskList />;
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params;
+  return <TaskList sectionId={id} />;
 }

frontend/components/tasks/task-list.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Task } from "@/components/tasks/task";
+import { useSection } from "@/hooks/use-section";
 import {
   DndContext,
   closestCenter,
@@ -17,22 +18,10 @@ import {
 } from "@dnd-kit/sortable";
 import { useState } from "react";
 
-const exampleTasks = [
-  { id: 1, name: "Watch 'BoJack Horseman'", isCompleted: true },
-  {
-    id: 2,
-    name: "Task with description",
-    description: "some description here",
-    isCompleted: true,
-  },
-  { id: 3, name: "Clean the house" },
-  { id: 4, name: "Some completed archived task" },
-  { id: 5, name: "Go to the gym", description: "💪🏻💪🏻💪🏻" },
-  { id: 6, name: "A task with date", date: "2024-12-28" },
-];
+export function TaskList({sectionId} : {sectionId: string}) {
+  const { section, isLoading, isError } = useSection(sectionId);
+  const [tasks, setTasks] = useState(section?.tasks || []);
 
-export function TaskList() {
-  const [tasks, setTasks] = useState(exampleTasks);
   const dndSensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 1 } }),
     useSensor(KeyboardSensor, {
@@ -64,6 +53,9 @@ export function TaskList() {
       });
     }
   }
+  if (!section) {
+    return "Loading..";
+  }
 
   return (
     <DndContext

frontend/components/tasks/task.tsx

@@ -33,7 +33,7 @@ export function Task({ task, handleToggleTaskCompleted }) {
               })
             }
           />
-          <div className="flex flex-col items-center">{task.name}</div>
+          <div className="flex flex-col items-center">{task.title}</div>
         </div>
         {task.description && (
           <div className="ml-9 text-gray-400 pt-0.5">{task.description}</div>

frontend/hooks/use-section.tsx

@@ -0,0 +1,11 @@
+import useSWR from "swr";
+import { fetcher } from "@/hooks/fetcher";
+
+export const useSection = (sectionId) => {
+  const { data, error, isLoading } = useSWR(`/api/section/${sectionId}`, fetcher);
+  return {
+    section: data,
+    isLoading,
+    isError: error,
+  };
+};