added Universal pages Component for task types & logout

src/components/layouts/tasks/components/Navigation/NavigationDropdownMenu.tsx

@@ -8,11 +8,14 @@ import {
   Switch,
   User,
 } from "@nextui-org/react";
-import { Cog6ToothIcon, ListBulletIcon } from "@heroicons/react/24/outline";
+import { Cog6ToothIcon } from "@heroicons/react/24/outline";
 import { useTheme } from "next-themes";
+import { supabase } from "@/lib/sdk/utilities/supabase";
+import { useRouter } from "next/router";
 
 export default function NavigationDropdownMenu() {
   const { theme, setTheme } = useTheme();
+  const router = useRouter();
 
   return (
     <Dropdown showArrow radius="sm">
@@ -43,7 +46,15 @@ export default function NavigationDropdownMenu() {
 
         <DropdownSection aria-label="Help & Feedback">
           <DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
-          <DropdownItem key="logout">Log Out</DropdownItem>
+          <DropdownItem
+            onClick={() => {
+              supabase.auth.signOut();
+              router.push("/login");
+            }}
+            key="logout"
+          >
+            Log Out
+          </DropdownItem>
         </DropdownSection>
       </DropdownMenu>
     </Dropdown>

src/components/layouts/tasks/components/Pages/TaskTypePage.tsx

@@ -0,0 +1,34 @@
+import { TaskFetcherKeys } from "@/lib/sdk/constants/global-enums.";
+import TaskTileForm from "../TaskTiles/TaskTileForm";
+import TaskTileList from "../TaskTiles/TaskTileList";
+import { CalendarDaysIcon, HomeIcon, StarIcon, SunIcon } from "@heroicons/react/24/outline";
+
+export default function TaskTypePage({ type }: { type: TaskFetcherKeys }) {
+  const Icon = () => {
+    switch (type) {
+      case TaskFetcherKeys.ALL:
+        return HomeIcon;
+      case TaskFetcherKeys.MY_DAY:
+        return SunIcon;
+      case TaskFetcherKeys.IMPORTANT:
+        return StarIcon;
+      case TaskFetcherKeys.PLANNED:
+        return CalendarDaysIcon;
+    }
+  };
+
+  const PageIcon = Icon();
+  return (
+    <div className="p-6 bg-default-100 grow">
+      <h1 className="text-2xl flex items-center space-x-2">
+        <PageIcon className="w-7 h-7" />
+        <span className="capitalize">{type?.replace("_", " ")}</span>
+      </h1>
+      <span className="text-foreground-600 font-light text-xs">{new Date().toDateString()}</span>
+      <div className="pt-10 pb-2">
+        <TaskTileForm type={type} />
+      </div>
+      <TaskTileList type={type} />
+    </div>
+  );
+}

src/components/layouts/tasks/components/TaskTiles/TaskTileForm.tsx

@@ -9,8 +9,9 @@ import { uuidv4 } from "../../helpers/task-helpers";
 import { supabase } from "@/lib/sdk/utilities/supabase";
 import taskCreator from "@/lib/sdk/creators/taskCreator";
 import { classNames } from "@/components/layouts/app/helpers/twind-helper";
+import { TaskFetcherKeys } from "@/lib/sdk/constants/global-enums.";
 
-export default function TaskTileForm({ type }: { type?: "my_day" }) {
+export default function TaskTileForm({ type }: { type?: TaskFetcherKeys }) {
   const ctx = React.useContext(TasksLayoutContext);
 
   const [taskList, setTaskList] = ctx.taskListState;

src/components/layouts/tasks/components/TaskTiles/TaskTileList.tsx

@@ -8,6 +8,7 @@ import { classNames } from "@/app/helpers/twind-helper";
 import { supabase } from "@/lib/sdk/utilities/supabase";
 import useTaskList from "../../hooks/useTaskList";
 import { TaskFormat, TaskRow } from "@/lib/sdk/models/TaskModel";
+import { TaskFetcherKeys } from "@/lib/sdk/constants/global-enums.";
 
 type TaskListProps = {
   tasks: TaskFormat[];
@@ -84,10 +85,10 @@ function TaskTileList({ tasks, setTasks }: TaskListProps) {
   );
 }
 
-export default function TaskTiles() {
+export default function TaskTiles({ type }: { type: TaskFetcherKeys }) {
   const { taskInEdit, setTaskInEdit } = React.useContext(TasksLayoutContext);
 
-  const { taskList, setTaskList } = useTaskList();
+  const { taskList, setTaskList } = useTaskList(type);
 
   const incompleteTasks = taskList?.filter((task) => !task.completed);
   const completedTasks = taskList?.filter((task) => task.completed);

src/components/layouts/tasks/hooks/useTaskList.tsx

@@ -8,19 +8,19 @@ import React from "react";
 type UseTaskListData = Awaited<ReturnType<typeof getCurrentUserTasks>>;
 type UTaskListCallback = (payload: RealtimePostgresChangesPayload<TaskFormat>) => void;
 
-export default function useTaskList() {
+export default function useTaskList(type?: TaskFetcherKeys) {
   const [dataFetched, setDataFetched] = React.useState(false);
   const [taskList, setTaskList] = React.useState([] as UseTaskListData);
 
   React.useEffect(() => {
     async function fetchTasks() {
       setDataFetched(true);
-      const data = await getCurrentUserTasks(TaskFetcherKeys.ALL);
+      const data = await getCurrentUserTasks(type ?? TaskFetcherKeys.ALL);
       if (data) setTaskList(data);
     }
 
     if (!dataFetched) fetchTasks();
-  }, [dataFetched]);
+  }, [dataFetched, type]);
 
   React.useEffect(() => {
     const taskChannel = supabase

src/components/layouts/tasks/pages/AllTasksPage.tsx

@@ -1,11 +1,7 @@
+import { TaskFetcherKeys } from "@/lib/sdk/constants/global-enums.";
 import TaskTileForm from "../components/TaskTiles/TaskTileForm";
+import TaskTypePage from "../components/Pages/TaskTypePage";
 
 export default function AllTasksPage() {
-  return (
-    <div className="p-6 bg-default-100 grow">
-      <h1>All Tasks Page</h1>
-
-      <TaskTileForm />
-    </div>
-  );
+  return <TaskTypePage type={TaskFetcherKeys?.ALL} />;
 }

src/components/layouts/tasks/pages/ImportantPage.tsx

@@ -1,7 +1,7 @@
+import { TaskFetcherKeys } from "@/lib/sdk/constants/global-enums.";
+import TaskTypePage from "../components/Pages/TaskTypePage";
+import TaskTileList from "../components/TaskTiles/TaskTileList";
+
 export default function ImportantPage() {
-  return (
-    <div className="p-6 bg-default-100 grow">
-      <h1>Important</h1>
-    </div>
-  );
+  return <TaskTypePage type={TaskFetcherKeys?.IMPORTANT} />;
 }

src/components/layouts/tasks/pages/PlannedPage.tsx

@@ -1,7 +1,6 @@
+import { TaskFetcherKeys } from "@/lib/sdk/constants/global-enums.";
+import TaskTypePage from "../components/Pages/TaskTypePage";
+
 export default function PlannedPage() {
-  return (
-    <div className="p-6 bg-default-100 grow">
-      <h1>Planned</h1>
-    </div>
-  );
+  return <TaskTypePage type={TaskFetcherKeys?.PLANNED} />;
 }

src/components/layouts/tasks/pages/index.tsx

@@ -1,6 +1,7 @@
 import { SunIcon } from "@heroicons/react/24/outline";
 import TaskTileForm from "../components/TaskTiles/TaskTileForm";
 import TaskTileList from "../components/TaskTiles/TaskTileList";
+import { TaskFetcherKeys } from "@/lib/sdk/constants/global-enums.";
 
 export default function TodayTaskPage() {
   return (
@@ -11,9 +12,9 @@ export default function TodayTaskPage() {
       </h1>
       <span className="text-foreground-600 font-light text-xs">{new Date().toDateString()}</span>
       <div className="pt-10 pb-2">
-        <TaskTileForm type="my_day" />
+        <TaskTileForm type={TaskFetcherKeys.MY_DAY} />
       </div>
-      <TaskTileList />
+      <TaskTileList type={TaskFetcherKeys.MY_DAY} />
     </div>
   );
 }