Render corresponding project tasks

analog-m4 · Dec 2, 2023 · f10cfb5 · f10cfb5
1 parent 4b8acec
commit f10cfb5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/src/components/Column/Column.js b/src/components/Column/Column.js
@@ -1,12 +1,15 @@
 import Task from "../Task/Task";
 
 function Column({ columnName, tasks }) {
-
+  const columnTasks = tasks.map(task => {
+    return <Task key={task.id} title={task.title} description={task.description} />
+  })
+
   return (
     <>
       <div className="flex flex-col w-4/12 min-w-1/4 bg-gray-200">
         <div className="column-title font-bold">{columnName}</div>
-        <div>Task</div>
+        {columnTasks}
       </div>
     </>
   )

diff --git a/src/components/ProjectBoard/ProjectBoard.js b/src/components/ProjectBoard/ProjectBoard.js
@@ -5,23 +5,21 @@ import Task from "../Task/Task";
 function ProjectBoard({ selectedProject }) {
   const user = useSelector((state) => state.user.user);
 
-  const projectTasks = selectedProject ? (
-    selectedProject.tasks.map((task) => (
-      <Task key={task.id} title={task.title} description={task.description} />
-    ))
-  ) : null;
-
+  const projectTasks = selectedProject ? selectedProject.tasks : [];
   console.log(selectedProject)
 
+  const backlogTasks = projectTasks.filter(task => task.status === 'backlog');
+  const doingTasks = projectTasks.filter(task => task.status === 'doing');
+  const doneTasks = projectTasks.filter(task => task.status === 'done');
+
   return (
     <>
       <div className="flex flex-col w-10/12">
         {selectedProject ? <p>{selectedProject.title}</p> : <p>No project selected</p>}
-        {projectTasks}
         <div className="flex h-full">
-          <Column columnName='Backlog' />
-          <Column columnName='Doing' />
-          <Column columnName='Done' />
+          <Column columnName='Backlog' tasks={backlogTasks} />
+          <Column columnName='Doing' tasks={doingTasks} />
+          <Column columnName='Done' tasks={doneTasks} />
         </div>
       </div>
     </>