From ad3cdbdb4930d4acfc428fbd6e8f883c259cba2d Mon Sep 17 00:00:00 2001
From: wfnuser <wfnuser@hotmail.com>
Date: Thu, 18 Jul 2024 15:23:33 +0700
Subject: [PATCH] feat: add my task page

---
 src/constants/data.ts      | 152 ++----------------------------------
 src/pages/mytask/index.tsx | 155 +++++++++++++++++++++++++++++++++++++
 src/router/pages.tsx       |   2 +
 3 files changed, 165 insertions(+), 144 deletions(-)
 create mode 100644 src/pages/mytask/index.tsx

diff --git a/src/constants/data.ts b/src/constants/data.ts
index 16dbc50..d7f7d5a 100644
--- a/src/constants/data.ts
+++ b/src/constants/data.ts
@@ -1,4 +1,4 @@
-import { NavItem, ProjectItem, TaskItem } from '@/types'
+import { NavItem } from '@/types'
 
 export const navItems: NavItem[] = [
   {
@@ -23,6 +23,13 @@ export const navItems: NavItem[] = [
     layout: 'dashboard',
     hideInMenu: true,
   },
+  {
+    title: 'MyTasks',
+    href: '/mytasks',
+    icon: 'listChecks',
+    component: 'mytask',
+    layout: 'dashboard',
+  },
   {
     title: 'Login',
     href: '/login',
@@ -46,146 +53,3 @@ export const navItems: NavItem[] = [
     layout: 'dashboard',
   },
 ]
-
-export const projectItems: ProjectItem[] = [
-  {
-    id: '1',
-    createAt: '2021-07-01T00:00:00Z',
-    updateAt: '2021-07-01T00:00:00Z',
-    title: 'Project 1',
-    description: 'A project description.',
-    link: '/projects/1',
-  },
-  {
-    id: '2',
-    createAt: '2021-07-02T00:00:00Z',
-    updateAt: '2021-07-02T00:00:00Z',
-    title: 'Project 2',
-    description: 'Another project description.',
-    link: '/projects/2',
-  },
-  {
-    id: '3',
-    createAt: '2021-07-03T00:00:00Z',
-    updateAt: '2021-07-03T00:00:00Z',
-    title: 'Project 3',
-    description: 'Yet another project description.',
-    link: '/projects/3',
-  },
-  {
-    id: '4',
-    createAt: '2021-07-04T00:00:00Z',
-    updateAt: '2021-07-04T00:00:00Z',
-    title: 'Project 4',
-    description: 'Yet another project description.',
-    link: '/projects/4',
-  },
-  {
-    id: '5',
-    createAt: '2021-07-05T00:00:00Z',
-    updateAt: '2021-07-05T00:00:00Z',
-    title: 'Project 5',
-    description: 'Yet another project description.',
-    link: '/projects/5',
-  },
-  {
-    id: '6',
-    createAt: '2021-07-06T00:00:00Z',
-    updateAt: '2021-07-06T00:00:00Z',
-    title: 'Project 6',
-    description: 'Yet another project description.',
-    link: '/projects/6',
-  },
-  {
-    id: '7',
-    createAt: '2021-07-07T00:00:00Z',
-    updateAt: '2021-07-07T00:00:00Z',
-    title: 'Project 7',
-    description: 'Yet another project description.',
-    link: '/projects/7',
-  },
-  {
-    id: '8',
-    createAt: '2021-07-08T00:00:00Z',
-    updateAt: '2021-07-08T00:00:00Z',
-    title: 'Project 8',
-    description: 'Yet another project description.',
-    link: '/projects/8',
-  },
-  {
-    id: '9',
-    createAt: '2021-07-09T00:00:00Z',
-    updateAt: '2021-07-09T00:00:00Z',
-    title: 'Project 9',
-    description: 'Yet another project description.',
-    link: '/projects/9',
-  },
-  {
-    id: '10',
-    createAt: '2021-07-10T00:00:00Z',
-    updateAt: '2021-07-10T00:00:00Z',
-    title: 'Project 10',
-    description: 'Yet another project description.',
-    link: '/projects/10',
-  },
-  {
-    id: '11',
-    createAt: '2021-07-11T00:00:00Z',
-    updateAt: '2021-07-11T00:00:00Z',
-    title: 'Project 11',
-    description: 'Yet another project description.',
-    link: '/projects/11',
-  },
-  {
-    id: '12',
-    createAt: '2021-07-12T00:00:00Z',
-    updateAt: '2021-07-12T00:00:00Z',
-    title: 'Project 12',
-    description: 'Yet another project description.',
-    link: '/projects/12',
-  },
-  {
-    id: '13',
-    createAt: '2021-07-13T00:00:00Z',
-    updateAt: '2021-07-13T00:00:00Z',
-    title: 'Project 13',
-    description: 'Yet another project description.',
-    link: '/projects/13',
-  },
-]
-
-export const taskItems: TaskItem[] = [
-  {
-    id: '1',
-    createAt: '2021-07-01T00:00:00Z',
-    updateAt: '2021-07-01T00:00:00Z',
-    title: 'Task 1',
-    description: 'A task description.',
-    priority: 0,
-    projectId: '1',
-    link: '/tasks/1',
-    status: 'todo',
-  },
-  {
-    id: '2',
-    createAt: '2021-07-02T00:00:00Z',
-    updateAt: '2021-07-02T00:00:00Z',
-    title: 'Task 2',
-    description: 'Another task description.',
-    priority: 1,
-    projectId: '1',
-    link: '/tasks/2',
-    status: 'in-progress',
-  },
-  {
-    id: '3',
-    createAt: '2021-07-03T00:00:00Z',
-    updateAt: '2021-07-03T00:00:00Z',
-    title: 'Task 3',
-    description: 'Yet another task description.',
-    priority: 2,
-    projectId: '2',
-    link: '/tasks/3',
-    status: 'done',
-  },
-]
diff --git a/src/pages/mytask/index.tsx b/src/pages/mytask/index.tsx
new file mode 100644
index 0000000..87d09e8
--- /dev/null
+++ b/src/pages/mytask/index.tsx
@@ -0,0 +1,155 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Issue, Repository } from '@/types'
+import { useEffect, useState } from 'react'
+import { SkeletonCard } from '@/components/skeleton-card'
+import { Link, useParams } from 'react-router-dom'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+import ReactMarkdown from 'react-markdown'
+
+function SkeletonTasks() {
+  return (
+    <>
+      <SkeletonCard />
+      <SkeletonCard />
+      <SkeletonCard />
+      <SkeletonCard />
+      <SkeletonCard />
+      <SkeletonCard />
+    </>
+  )
+}
+
+function TaskItem({ item }: { item: Issue }) {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader>
+        <CardTitle>{item.title}</CardTitle>
+      </CardHeader>
+      <CardContent className="flex-1">
+        <div className="flex h-full flex-col justify-between overflow-hidden rounded">
+          <div>
+            <div className="mb-4 flex items-center">
+              <img className="mr-4 h-12 w-12 rounded-full" src={item.user.avatar_url} alt="User Avatar" />
+              <div className="text-sm">
+                <p className="leading-none text-gray-900">{item.user.login}</p>
+                <p className="text-gray-600">{item.user.html_url}</p>
+              </div>
+            </div>
+            <div className="mb-4">
+              <p className="text-base text-gray-700">
+                <ReactMarkdown>{item.body}</ReactMarkdown>
+              </p>
+            </div>
+            <div className="flex justify-between">
+              <div>
+                <p className="text-gray-600">State: {item.state}</p>
+              </div>
+              <div>
+                <p className="text-gray-600">Created At: {new Date(item.created_at).toLocaleDateString()}</p>
+                <p className="text-gray-600">Updated At: {new Date(item.updated_at).toLocaleDateString()}</p>
+              </div>
+            </div>
+          </div>
+          <div className="mt-8 flex justify-end gap-2">
+            <Button asChild variant="link">
+              <a href={item.url} target="_blank" rel="noreferrer">
+                View Issue
+              </a>
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function EmptyTasks() {
+  return (
+    <div className="w-full hyphens-none">
+      <div className="text-2xl">No Tasks</div>
+    </div>
+  )
+}
+
+export default function MyTask() {
+  const org = 'youbetdao'
+
+  const [tasks, setTasks] = useState<Issue[]>([])
+  const [loading, setLoading] = useState(false)
+  const { project } = useParams<{ project: string }>()
+
+  useEffect(() => {
+    const fetchTasks = async () => {
+      setLoading(true)
+
+      try {
+        // const projectsData = await fetch(`/api/projects?org=${org}`).then((res) => res.json())
+        const projects = await fetch('/api/projects?org=youbetdao')
+          .then((res) => res.json())
+          .catch(() => [])
+
+        let allTasks: Issue[] = []
+
+        const tasksPromises = projects.map(async (project: Repository) => {
+          const projectTasks = await fetch(`/api/tasks?org=${org}&project=${project.name}&assignee=${'wfnuser'}`)
+            .then((res) => res.json())
+            .catch(() => [])
+          return projectTasks
+        })
+
+        const tasks = await Promise.all(tasksPromises)
+
+        tasks.forEach((task) => {
+          allTasks = allTasks.concat(task)
+        })
+
+        setTasks(allTasks)
+      } catch (error) {
+        console.error('Error fetching tasks:', error)
+        setTasks([])
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchTasks()
+  }, [project])
+
+  return (
+    <div className="space-y-4">
+      <Breadcrumb className="py-2">
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link to="/projects">Projects</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbLink>{project}</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Tasks</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+      <div className="grid gap-4 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
+        {loading ? (
+          <SkeletonTasks />
+        ) : tasks.length ? (
+          tasks.map((item) => <TaskItem key={item.title} item={item} />)
+        ) : (
+          <EmptyTasks />
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/src/router/pages.tsx b/src/router/pages.tsx
index a5d645c..10b2aae 100644
--- a/src/router/pages.tsx
+++ b/src/router/pages.tsx
@@ -4,10 +4,12 @@ import Project from '@/pages/project'
 import Login from '@/pages/login'
 import Callback from '@/pages/callback'
 import Profile from '@/pages/profile'
+import MyTask from '@/pages/mytask'
 
 export const Pages = {
   dashboard: Dashboard,
   task: Task,
+  mytask: MyTask,
   project: Project,
   login: Login,
   callback: Callback,