From cca3a72f936a6a02006f5ccd71ed30a35a921600 Mon Sep 17 00:00:00 2001
From: Ivona Nicetin <ivona.nicetin@gmail.com>
Date: Fri, 28 Mar 2025 13:08:52 -0700
Subject: [PATCH] fixed duplicate headerandAccessor method in my tasks and team
 tasks pages

---
 frontend/react-app/src/pages/MyTasks.jsx   | 198 +++++++++------------
 frontend/react-app/src/pages/TeamTasks.jsx |  58 +++---
 2 files changed, 109 insertions(+), 147 deletions(-)

diff --git a/frontend/react-app/src/pages/MyTasks.jsx b/frontend/react-app/src/pages/MyTasks.jsx
index 97339d8..68d42b7 100644
--- a/frontend/react-app/src/pages/MyTasks.jsx
+++ b/frontend/react-app/src/pages/MyTasks.jsx
@@ -73,118 +73,98 @@ useEffect(()=>{
 useEffect(() => {
     
     console.log("Tasks To Do (after state update):", tasksToDo);
-  }, [tasksToDo]);
-
-
-  
-
-    const headerAndAccessors = [
-        {
-            Header: "Task Name",
-            accessor: "name",
-            Cell: (original) => (
-                <Link to="/view-task" state={{taskToSee: original.value, teamMembers: original.cell.row.values.assignees}}>{original.value.title}</Link>
-              )
-        },
-        {
-            Header: "TeamId",
-            accessor:"team",
-        },
-        {
-            Header: "ID",
-            accessor:"id",
-        },
-        {
-            Header: "Assignee(s)",
-            accessor: "assignees",
-        },
-        {
-            Header: "Status",
-            accessor: "status",
-        },
-        {
-            Header: "Priority",
-            accessor: "priority",
-        },
-        {
-            Header: "Due Date",
-            accessor: "dueDate",
-        },
-        {
-            Header: "Is Locked",
-            accessor: "isLocked",
-          }
-    ]
-    const headerAndAccessorsComplete = [
-        {
-            Header: "Task Name",
-            accessor: "name",
-            Cell: (original) => (
-                <Link to="/view-task" state={{taskToSee: original.value, teamMembers: original.cell.row.values.assignees}}>{original.value.title}</Link>
-              )
-        },
-        {
-            Header: "Team",
-            accessor:"team",
-        },
-        {
-            Header: "ID",
-            accessor:"id",
-        },
-        {
-            Header: "Assignee(s)",
-            accessor: "assignees",
-        },
-        {
-            Header: "Due Date",
-            accessor: "dueDate",
-        },
-        {
-            Header: "Date Completed",
-            accessor: "dateCompteted",
-        }
-    ]
-    if(loading){
-        return (<div>Loading...</div>)
+}, [tasksToDo]);
+
+const commonColumns = [
+    {
+        Header: "Task Name",
+        accessor: "name",
+        Cell: (original) => (
+            <Link to="/view-task" state={{taskToSee: original.value, teamMembers: original.cell.row.values.assignees}}>{original.value.title}</Link>
+          )
+    },
+    {
+        Header: "Team ID",
+        accessor:"team",
+    },
+    {
+        Header: "Task ID",
+        accessor:"id",
+    },
+    {
+        Header: "Assignee(s)",
+        accessor: "assignees",
+    },
+    {
+        Header: "Due Date",
+        accessor: "dueDate",
+    },
+]
+
+
+const headerAndAccessors = [
+    ...commonColumns,
+    {
+        Header: "Status",
+        accessor: "status",
+    },
+    {
+        Header: "Priority",
+        accessor: "priority",
+    },
+    {
+        Header: "Is Locked",
+        accessor: "isLocked",
     }
-    return (
-
-        <div className='pageContainer'>
-            <Header/>
-            <div className='pageBody'>
-            <div class="content-wrapper flexbox">
-                    
-                    <h1>My Tasks</h1>
-                    <span class ="taskBox">
-                    {setUpData(tasksToDo).length > 0 ? (
-                        <TaskList
-                        dataToUse={setUpData(tasksToDo)}
-                        headersAndAccessors={headerAndAccessors}
-                        />
-                    ) : (
-                        <p>No tasks to do</p>
-                    )}
-                        
-
-                    </span>
-                    <a href="/create-task"><button className="create-task-btn">Create Task</button></a>
-                    
-                    <h2>My Completed Tasks</h2>
-                    {setUpDataCompleted(tasksToDo).length > 0 ? (
-                        <TaskList
-                        dataToUse={setUpDataCompleted(tasksToDo)}
-                        headersAndAccessors={headerAndAccessorsComplete}
-                        />
-                    ) : (
-                        <h2>No tasks completed</h2>
-                    )}
-                   
-                    
+]
+const headerAndAccessorsComplete = [
+    ...commonColumns,
+    {
+        Header: "Date Completed",
+        accessor: "dateCompteted",
+    }
+]
+if(loading){
+    return (<div>Loading...</div>)
+}
+return (
+
+    <div className='pageContainer'>
+        <Header/>
+        <div className='pageBody'>
+        <div class="content-wrapper flexbox">
+                
+                <h1>My Tasks</h1>
+                <span class ="taskBox">
+                {setUpData(tasksToDo).length > 0 ? (
+                    <TaskList
+                    dataToUse={setUpData(tasksToDo)}
+                    headersAndAccessors={headerAndAccessors}
+                    />
+                ) : (
+                    <p>No tasks to do</p>
+                )}
                     
-            </div>
-            </div>
+
+                </span>
+                <a href="/create-task"><button className="create-task-btn">Create Task</button></a>
+                
+                <h2>My Completed Tasks</h2>
+                {setUpDataCompleted(tasksToDo).length > 0 ? (
+                    <TaskList
+                    dataToUse={setUpDataCompleted(tasksToDo)}
+                    headersAndAccessors={headerAndAccessorsComplete}
+                    />
+                ) : (
+                    <h2>No tasks completed</h2>
+                )}
+                
+                
+                
+        </div>
         </div>
-      );
+    </div>
+    );
       
 
 }
diff --git a/frontend/react-app/src/pages/TeamTasks.jsx b/frontend/react-app/src/pages/TeamTasks.jsx
index ba874c0..baa53df 100644
--- a/frontend/react-app/src/pages/TeamTasks.jsx
+++ b/frontend/react-app/src/pages/TeamTasks.jsx
@@ -39,45 +39,8 @@ function setUpDataCompleted(results) {
       isLocked: taskItem.isLocked.toString()
     }));
 }
-const headerAndAccessors = [
-      {
-        Header: "Task Name",
-        accessor: "name",
-        Cell: (original) => (
-            <Link to="/view-task" state={{taskToSee: original.value, teamMembers: original.cell.row.values.assignees}}>{original.value.title}</Link>
-          )
-      },
-      {
-        Header: "ID",
-        accessor:"id",
-      },
-      {
-          Header: "Assignee(s)",
-          accessor: "assignees",
-      },
-      {
-        Header: "Priority",
-        accessor: "priority",
-      },
-      {
-          Header: "Status",
-          accessor: "status",
-      },
-
-      {
-          Header: "Due Date",
-          accessor: "dueDate",
-      },
-      {
-        Header: "Is Locked",
-        accessor: "isLocked",
-      }
-]
-
 
-
-
-const headerAndAccessorsComplete = [
+const commonColumns= [
   {
     Header: "Task Name",
     accessor: "name",
@@ -97,6 +60,25 @@ const headerAndAccessorsComplete = [
       Header: "Due Date",
       accessor: "dueDate",
   },
+]
+const headerAndAccessors = [
+    ...commonColumns,
+    {
+      Header: "Priority",
+      accessor: "priority",
+    },
+    {
+        Header: "Status",
+        accessor: "status",
+    },
+    {
+      Header: "Is Locked",
+      accessor: "isLocked",
+    }
+]
+
+const headerAndAccessorsComplete = [
+  ...commonColumns,
   {
       Header: "Date Completed",
       accessor: "dateCompteted",