From 55e81899eab741421d1714c5f9f6c0f8d29e1f7b Mon Sep 17 00:00:00 2001
From: Andrew Trieu <andrew.trieu@proton.me>
Date: Wed, 6 Nov 2024 14:24:32 +0200
Subject: [PATCH] feat: Add priority pages and reusable component for task
 management, update devDependencies

---
 tasker-client/package-lock.json               |   7 +
 tasker-client/package.json                    |   1 +
 .../src/app/priority/backlog/page.tsx         |   9 +
 tasker-client/src/app/priority/high/page.tsx  |   9 +
 tasker-client/src/app/priority/low/page.tsx   |   9 +
 .../src/app/priority/medium/page.tsx          |   9 +
 .../priority/reusablePriorityPage/index.tsx   | 156 ++++++++++++++++++
 .../src/app/priority/urgent/page.tsx          |   9 +
 8 files changed, 209 insertions(+)
 create mode 100644 tasker-client/src/app/priority/backlog/page.tsx
 create mode 100644 tasker-client/src/app/priority/high/page.tsx
 create mode 100644 tasker-client/src/app/priority/low/page.tsx
 create mode 100644 tasker-client/src/app/priority/medium/page.tsx
 create mode 100644 tasker-client/src/app/priority/reusablePriorityPage/index.tsx
 create mode 100644 tasker-client/src/app/priority/urgent/page.tsx

diff --git a/tasker-client/package-lock.json b/tasker-client/package-lock.json
index 5fdf800..3fbcd1f 100644
--- a/tasker-client/package-lock.json
+++ b/tasker-client/package-lock.json
@@ -29,6 +29,7 @@
         "redux-persist": "^6.0.0"
       },
       "devDependencies": {
+        "@types/lodash": "^4.17.13",
         "@types/node": "^20",
         "@types/numeral": "^2.0.5",
         "@types/react": "^18",
@@ -1434,6 +1435,12 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.13.tgz",
+      "integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "20.17.3",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.3.tgz",
diff --git a/tasker-client/package.json b/tasker-client/package.json
index 8ab0b09..8ff109f 100644
--- a/tasker-client/package.json
+++ b/tasker-client/package.json
@@ -30,6 +30,7 @@
     "redux-persist": "^6.0.0"
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.13",
     "@types/node": "^20",
     "@types/numeral": "^2.0.5",
     "@types/react": "^18",
diff --git a/tasker-client/src/app/priority/backlog/page.tsx b/tasker-client/src/app/priority/backlog/page.tsx
new file mode 100644
index 0000000..b5ee008
--- /dev/null
+++ b/tasker-client/src/app/priority/backlog/page.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import ReusablePriorityPage from "../reusablePriorityPage";
+import { Priority } from "@/state/api";
+
+const Backlog = () => {
+  return <ReusablePriorityPage priority={Priority.Backlog} />;
+};
+
+export default Backlog;
diff --git a/tasker-client/src/app/priority/high/page.tsx b/tasker-client/src/app/priority/high/page.tsx
new file mode 100644
index 0000000..3f5615e
--- /dev/null
+++ b/tasker-client/src/app/priority/high/page.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import ReusablePriorityPage from "../reusablePriorityPage";
+import { Priority } from "@/state/api";
+
+const High = () => {
+  return <ReusablePriorityPage priority={Priority.High} />;
+};
+
+export default High;
diff --git a/tasker-client/src/app/priority/low/page.tsx b/tasker-client/src/app/priority/low/page.tsx
new file mode 100644
index 0000000..30a8069
--- /dev/null
+++ b/tasker-client/src/app/priority/low/page.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import ReusablePriorityPage from "../reusablePriorityPage";
+import { Priority } from "@/state/api";
+
+const Low = () => {
+  return <ReusablePriorityPage priority={Priority.Low} />;
+};
+
+export default Low;
diff --git a/tasker-client/src/app/priority/medium/page.tsx b/tasker-client/src/app/priority/medium/page.tsx
new file mode 100644
index 0000000..0bc26a3
--- /dev/null
+++ b/tasker-client/src/app/priority/medium/page.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import ReusablePriorityPage from "../reusablePriorityPage";
+import { Priority } from "@/state/api";
+
+const Medium = () => {
+  return <ReusablePriorityPage priority={Priority.Medium} />;
+};
+
+export default Medium;
diff --git a/tasker-client/src/app/priority/reusablePriorityPage/index.tsx b/tasker-client/src/app/priority/reusablePriorityPage/index.tsx
new file mode 100644
index 0000000..3aa8bce
--- /dev/null
+++ b/tasker-client/src/app/priority/reusablePriorityPage/index.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { useAppSelector } from "@/app/redux";
+import Header from "@/app/components/Header";
+import ModalNewTask from "@/app/components/ModalNewTask";
+import TaskCard from "@/app/components/TaskCard";
+import { dataGridSxStyles } from "@/lib/utils";
+import { Priority, Task, useGetTasksByUserQuery } from "@/state/api";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import React, { useState } from "react";
+
+type Props = {
+  priority: Priority;
+};
+
+const columns: GridColDef[] = [
+  {
+    field: "title",
+    headerName: "Title",
+    width: 100,
+  },
+  {
+    field: "description",
+    headerName: "Description",
+    width: 200,
+  },
+  {
+    field: "status",
+    headerName: "Status",
+    width: 130,
+    renderCell: (params) => (
+      <span className="inline-flex rounded-full bg-green-100 px-2 text-xs font-semibold leading-5 text-green-800">
+        {params.value}
+      </span>
+    ),
+  },
+  {
+    field: "priority",
+    headerName: "Priority",
+    width: 75,
+  },
+  {
+    field: "tags",
+    headerName: "Tags",
+    width: 130,
+  },
+  {
+    field: "startDate",
+    headerName: "Start Date",
+    width: 130,
+  },
+  {
+    field: "dueDate",
+    headerName: "Due Date",
+    width: 130,
+  },
+  {
+    field: "author",
+    headerName: "Author",
+    width: 150,
+    renderCell: (params) => params.value.username || "Unknown",
+  },
+  {
+    field: "assignee",
+    headerName: "Assignee",
+    width: 150,
+    renderCell: (params) => params.value.username || "Unassigned",
+  },
+];
+
+const ReusablePriorityPage = ({ priority }: Props) => {
+  const [view, setView] = useState("list");
+  const [isModalNewTaskOpen, setIsModalNewTaskOpen] = useState(false);
+
+  //   const { data: currentUser } = useGetAuthUserQuery({});
+  //   const userId = currentUser?.userDetails?.userId ?? null;
+  const userId = 1;
+  const {
+    data: tasks,
+    isLoading,
+    isError: isTasksError,
+  } = useGetTasksByUserQuery(userId || 0, {
+    skip: userId === null,
+  });
+
+  const isDarkMode = useAppSelector((state) => state.global.isDarkMode);
+
+  const filteredTasks = tasks?.filter(
+    (task: Task) => task.priority === priority,
+  );
+
+  if (isTasksError || !tasks) return <div>Error fetching tasks</div>;
+
+  return (
+    <div className="m-5 p-4">
+      <ModalNewTask
+        isOpen={isModalNewTaskOpen}
+        onClose={() => setIsModalNewTaskOpen(false)}
+      />
+      <Header
+        name="Priority Page"
+        buttonComponent={
+          <button
+            className="mr-3 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
+            onClick={() => setIsModalNewTaskOpen(true)}
+          >
+            Add Task
+          </button>
+        }
+      />
+      <div className="mb-4 flex justify-start">
+        <button
+          className={`px-4 py-2 ${
+            view === "list" ? "bg-gray-300" : "bg-white"
+          } rounded-l`}
+          onClick={() => setView("list")}
+        >
+          List
+        </button>
+        <button
+          className={`px-4 py-2 ${
+            view === "table" ? "bg-gray-300" : "bg-white"
+          } rounded-l`}
+          onClick={() => setView("table")}
+        >
+          Table
+        </button>
+      </div>
+      {isLoading ? (
+        <div>Loading tasks...</div>
+      ) : view === "list" ? (
+        <div className="grid grid-cols-1 gap-4">
+          {filteredTasks?.map((task: Task) => (
+            <TaskCard key={task.id} task={task} />
+          ))}
+        </div>
+      ) : (
+        view === "table" &&
+        filteredTasks && (
+          <div className="z-0 w-full">
+            <DataGrid
+              rows={filteredTasks}
+              columns={columns}
+              checkboxSelection
+              getRowId={(row) => row.id}
+              className="border border-gray-200 bg-white shadow dark:border-stroke-dark dark:bg-dark-secondary dark:text-gray-200"
+              sx={dataGridSxStyles(isDarkMode)}
+            />
+          </div>
+        )
+      )}
+    </div>
+  );
+};
+
+export default ReusablePriorityPage;
diff --git a/tasker-client/src/app/priority/urgent/page.tsx b/tasker-client/src/app/priority/urgent/page.tsx
new file mode 100644
index 0000000..48d2d3a
--- /dev/null
+++ b/tasker-client/src/app/priority/urgent/page.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import ReusablePriorityPage from "../reusablePriorityPage";
+import { Priority } from "@/state/api";
+
+const Urgent = () => {
+  return <ReusablePriorityPage priority={Priority.Urgent} />;
+};
+
+export default Urgent;