Improved code structure for board view

src/app/workspace/page.tsx

@@ -1,7 +1,45 @@
 "use client";
 
 import BoardView from "@/components/view/board/BoardView";
+import { Task } from "@/lib/types";
+import { useEffect, useState } from "react";
+
+const id = (prefix = "t") =>
+  `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
 
 export default function Workspace() {
-  return <BoardView />;
+  const [tasks, setTasks] = useState<Task[]>([]);
+
+  useEffect(() => {
+    setTasks([
+      { id: id(), title: "Buy groceries", status: "todo" },
+      { id: id(), title: "Plan sprint", status: "todo" },
+      {
+        id: id(),
+        title: "Build header",
+        description: "A simple description",
+        tags: [
+          { name: "Website", color: "pink" },
+          { name: "Development", color: "blue" },
+          { name: "API", color: "green" },
+          { name: "App", color: "purple" },
+          { name: "Rust", color: "orange" },
+        ],
+        status: "inprogress",
+      },
+    ]);
+  }, []);
+
+  const createTask = (status: string) => {
+    const task: Task = {
+      id: id(),
+      title: "New task",
+      status: status,
+    };
+    setTasks((c) => [...c, task]);
+  };
+
+  return (
+    <BoardView tasks={tasks} setTasks={setTasks} createTask={createTask} />
+  );
 }

src/components/view/board/BoardView.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
 import { PlusIcon } from "lucide-react";
-import { Task } from "@/lib/types";
+import { SetState, Task } from "@/lib/types";
 import BoardTask from "./Task";
 
 const columnLabels: Record<string, string> = {
@@ -14,32 +13,15 @@ const columnLabels: Record<string, string> = {
   done: "Done",
 };
 
-const id = (prefix = "t") =>
+export default function BoardView({
-  `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+  tasks,
-
+  setTasks,
-export default function BoardView() {
+  createTask,
-  const [tasks, setTasks] = useState<Task[]>([]);
+}: {
-
+  tasks: Task[];
-  useEffect(() => {
+  setTasks: SetState<Task[]>;
-    setTasks([
+  createTask: (status: string) => void;
-      { id: id(), title: "Buy groceries", status: "todo" },
+}) {
-      { id: id(), title: "Plan sprint", status: "todo" },
-      {
-        id: id(),
-        title: "Build header",
-        description: "A simple description",
-        tags: [
-          { name: "Website", color: "pink" },
-          { name: "Development", color: "blue" },
-          { name: "API", color: "green" },
-          { name: "App", color: "purple" },
-          { name: "Rust", color: "orange" },
-        ],
-        status: "inprogress",
-      },
-    ]);
-  }, []);
-
   function onDragEnd(result: any) {
     const { draggableId, source, destination } = result;
     if (!destination) return;
@@ -71,8 +53,8 @@ export default function BoardView() {
     <div className="p-6 w-full h-full flex flex-col gap-6">
       <DragDropContext onDragEnd={onDragEnd}>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
-          {Object.keys(columnLabels).map((colKey) => (
+          {Object.keys(columnLabels).map((status) => (
-            <Droppable key={colKey} droppableId={colKey}>
+            <Droppable key={status} droppableId={status}>
               {(provided) => (
                 <Card
                   ref={provided.innerRef}
@@ -81,19 +63,12 @@ export default function BoardView() {
                 >
                   <CardHeader>
                     <CardTitle className="flex items-center justify-between">
-                      <span>{columnLabels[colKey]}</span>
+                      <span>{columnLabels[status]}</span>
                       <Button
                         size="sm"
                         className="ml-auto"
                         variant="outline"
-                        onClick={() => {
+                        onClick={() => createTask(status)}
-                          const t: Task = {
-                            id: id(),
-                            title: "New task",
-                            status: colKey,
-                          };
-                          setTasks((c) => [...c, t]);
-                        }}
                       >
                         <PlusIcon />
                       </Button>
@@ -102,7 +77,7 @@ export default function BoardView() {
                   <CardContent>
                     <div className="flex flex-col gap-3">
                       {tasks
-                        .filter((task) => task.status === colKey)
+                        .filter((task) => task.status === status)
                         .map((task, index) => (
                           <Draggable
                             key={task.id}
@@ -123,7 +98,7 @@ export default function BoardView() {
                           </Draggable>
                         ))}
                       {provided.placeholder}
-                      {tasks.filter((task) => task.status === colKey).length ===
+                      {tasks.filter((task) => task.status === status).length ===
                         0 && (
                         <p className="text-sm text-muted-foreground">
                           No tasks