Improved code structure for board view

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") =>
-  `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
-
-export default function 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",
-      },
-    ]);
-  }, []);
-
+export default function BoardView({
+  tasks,
+  setTasks,
+  createTask,
+}: {
+  tasks: Task[];
+  setTasks: SetState<Task[]>;
+  createTask: (status: string) => void;
+}) {
   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) => (
-            <Droppable key={colKey} droppableId={colKey}>
+          {Object.keys(columnLabels).map((status) => (
+            <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={() => {
-                          const t: Task = {
-                            id: id(),
-                            title: "New task",
-                            status: colKey,
-                          };
-                          setTasks((c) => [...c, t]);
-                        }}
+                        onClick={() => createTask(status)}
                       >
                         <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