Status stuff

src/components/view/board/BoardView.tsx

@@ -12,6 +12,7 @@ export default function BoardView({
   tasks,
   setTasks,
   createTask,
+  statuses,
 }: TaskViewProps) {
   function onDragEnd(result: any) {
     const { draggableId, source, destination } = result;
@@ -32,13 +33,12 @@ export default function BoardView({
 
   // Group tasks by status, using statuses from first available todo entity
   const tasksArray = Object.values(tasks);
-  const statusIds = new Set(tasksArray.map((t) => t.statusId));
 
   // Sort tasks by creation date within each status
-  const tasksByStatus = Array.from(statusIds).map((statusId) => ({
-    statusId,
+  const tasksByStatus = statuses.map((status) => ({
+    status,
     tasks: tasksArray
-      .filter((t) => t.statusId === statusId)
+      .filter((t) => t.statusId === status.id)
       .sort((a, b) => a.createdAt - b.createdAt),
   }));
 
@@ -46,8 +46,8 @@ export default function BoardView({
     <div className="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">
-          {tasksByStatus.map(({ statusId, tasks: statusTasks }) => (
-            <Droppable key={statusId} droppableId={statusId}>
+          {tasksByStatus.map(({ status, tasks: statusTasks }) => (
+            <Droppable key={status.id} droppableId={status.id}>
               {(provided) => (
                 <Card
                   ref={provided.innerRef}
@@ -56,12 +56,12 @@ export default function BoardView({
                 >
                   <CardHeader>
                     <CardTitle className="flex items-center justify-between">
-                      <span>{statusId}</span>
+                      <span>{status.name}</span>
                       <Button
                         size="sm"
                         className="ml-auto"
                         variant="outline"
-                        onClick={() => createTask(statusId)}
+                        onClick={() => createTask(status.id)}
                       >
                         <PlusIcon />
                       </Button>