From 22e061ec318e7d3d2d9ad550ec0fb53578c4ab2e Mon Sep 17 00:00:00 2001
From: chenyueban <jasonchan0527@gmail.com>
Date: Wed, 8 Jun 2022 23:05:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20issue=20detail=20=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=8A=A0=E5=85=A5=20breadcrumb?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/web/src/components/breadcrumb.tsx | 22 ++++++++++++++++++
 packages/web/src/hooks/useBreadcrumb.ts    | 27 ++++++++++++++++++++++
 packages/web/src/pages/issues/[id].tsx     |  3 +++
 3 files changed, 52 insertions(+)
 create mode 100644 packages/web/src/components/breadcrumb.tsx
 create mode 100644 packages/web/src/hooks/useBreadcrumb.ts

diff --git a/packages/web/src/components/breadcrumb.tsx b/packages/web/src/components/breadcrumb.tsx
new file mode 100644
index 0000000..0ec5286
--- /dev/null
+++ b/packages/web/src/components/breadcrumb.tsx
@@ -0,0 +1,22 @@
+import Link from 'next/link'
+import type { FC } from 'react'
+import useBreadcrumb from '~/hooks/useBreadcrumb'
+
+const Breadcrumb: FC = () => {
+  const [breadcrumbs] = useBreadcrumb()
+
+  return (
+    <div className="text-sm breadcrumbs">
+      <ul>
+        {
+          breadcrumbs
+            .slice(0, breadcrumbs.length - 1)
+            .map(v => (<li key={v.path}><Link href={v.path}><a>{v.breadcrumb}</a></Link></li>))
+        }
+        <li>{breadcrumbs.at(-1)?.breadcrumb}</li>
+      </ul>
+    </div>
+  )
+}
+
+export default Breadcrumb
diff --git a/packages/web/src/hooks/useBreadcrumb.ts b/packages/web/src/hooks/useBreadcrumb.ts
new file mode 100644
index 0000000..17bbf6d
--- /dev/null
+++ b/packages/web/src/hooks/useBreadcrumb.ts
@@ -0,0 +1,27 @@
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+
+interface Breadcrumb {
+  breadcrumb: string
+  path: string
+}
+export default function useBreadcrumb() {
+  const router = useRouter()
+  const [breadcrumbs, setBreadcrumbs] = useState<Breadcrumb[]>([])
+  useEffect(() => {
+    if (router) {
+      const linkPath = router.asPath.split('/')
+      linkPath.shift()
+
+      const pathArray = linkPath.map((path, i) => {
+        return {
+          breadcrumb: path,
+          path: `/${linkPath.slice(0, i + 1).join('/')}`,
+        }
+      })
+      setBreadcrumbs(pathArray)
+    }
+  }, [router])
+
+  return [breadcrumbs] as const
+}
diff --git a/packages/web/src/pages/issues/[id].tsx b/packages/web/src/pages/issues/[id].tsx
index b4124d0..8d1e6a4 100644
--- a/packages/web/src/pages/issues/[id].tsx
+++ b/packages/web/src/pages/issues/[id].tsx
@@ -1,5 +1,6 @@
 import type { GetServerSideProps, NextPage } from 'next'
 import type { Issue, OhbugEventLike } from 'types'
+import Breadcrumb from '~/components/breadcrumb'
 import IssueDetailActions from '~/components/issueDetailAction'
 import IssueDetailProfile from '~/components/issueDetailProfile'
 import IssueDetailStack from '~/components/issueDetailStack'
@@ -39,6 +40,8 @@ export const getServerSideProps: GetServerSideProps<Props> = async(context) => {
 const Detail: NextPage<Props> = ({ issue, event, trends }) => {
   return (
     <div>
+      <Breadcrumb />
+
       <IssueDetailTitle issue={issue} />
 
       <IssueDetailProfile event={event} />