fix(route): Intercept route for post, tmp solution, like product-hunt…

… style (#174) * refactor(dashbaord): adjust dashboard header * refactor(router): handle browser popstate back/forword
groupher · Nov 19, 2023 · 13117e2 · 13117e2
1 parent b645e4a
commit 13117e2
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 83 deletions.
diff --git a/src/app/[community]/@preview/(..)post/[id]/page.tsx b/src/app/[community]/@preview/(..)post/[id]/page.tsx
@@ -0,0 +1,9 @@
+'use client'
+
+import ArticlePost from '@/widgets/Article/Post'
+
+const CommunityPostPage = () => {
+  return <ArticlePost />
+}
+
+export default CommunityPostPage
diff --git a/src/app/[community]/@preview/default.tsx b/src/app/[community]/@preview/default.tsx
@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}
diff --git a/src/containers/Mushroom/index.tsx b/src/containers/Mushroom/index.tsx
@@ -1,15 +1,39 @@
 'use client'
 
-import { FC } from 'react'
+import { FC, useEffect, useCallback } from 'react'
+
+import useViewingThread from '@/hooks/useViewingThread'
+import { THREAD } from '@/constant/thread'
 
 import { useStore } from './store'
 import { useInit } from './logic'
 
 const Mushroom: FC = () => {
   const store = useStore()
   useInit(store)
+  const curThread = useViewingThread()
+
+  const handleBrowserPopChange = useCallback(
+    (data) => {
+      if (curThread === THREAD.POST) {
+        window.location = data.target.location.pathname
+      }
+    },
+    [curThread],
+  )
+
+  useEffect(() => {
+    /**
+     * this event is only hanle brower back/forward, current behavior is like producthunt
+     */
+    window.addEventListener('popstate', handleBrowserPopChange)
+
+    return () => {
+      window.removeEventListener('popstate', handleBrowserPopChange)
+    }
+  }, [])
 
-  return <div />
+  return <></>
 }
 
 export default Mushroom
diff --git a/src/containers/thread/PostThread/logic.ts b/src/containers/thread/PostThread/logic.ts
@@ -9,10 +9,10 @@ import { buildLog } from '@/logger'
 const log = buildLog('L:ArticlesThread')
 
 export const inAnchor = (): void => {
-  console.log('## inAnchor')
+  // console.log('## inAnchor')
 }
 export const outAnchor = (): void => {
-  console.log('## outAnchor')
+  // console.log('## outAnchor')
 }
 
 export const onFilterSelect = (option: TArticleFilter): void => {

diff --git a/src/containers/tool/Drawer/index.tsx b/src/containers/tool/Drawer/index.tsx
@@ -28,7 +28,9 @@ type TProps = {
 
 const Drawer: FC<TProps> = ({ metric }) => {
   const store = useStore()
+
   const { width: windowWidth } = useWindowResize()
+
   useInit(store, windowWidth, metric)
   useShortcut('Escape', closeDrawer)
 

diff --git a/src/containers/tool/Drawer/store.ts b/src/containers/tool/Drawer/store.ts
@@ -233,15 +233,20 @@ const DrawerStore = T.model('DrawerStore', {
       const thread = meta.thread.toLowerCase()
       const nextURL = `${Global.location.origin}/${originalCommunitySlug}/${thread}/${innerId}`
 
-      Global.history.replaceState(null, title, nextURL)
+      // Global.history.replaceState(null, title, nextURL)
+      // Global.history.pushState(null, title, nextURL)
+      console.log('## pushing window.location.href: ', nextURL)
+      Global.history.pushState({ prevUrl: nextURL }, title, nextURL)
     },
 
     restorePreviousURLIfNeed(): void {
       if (!includes(self.type, ARTICLE_VIEWER_TYPES)) return
 
       const targetHref = self.previousHomeURL || self.previousURL
 
-      Global.history.replaceState(null, 'new-title', targetHref)
+      // Global.history.replaceState(null, 'new-title', targetHref)
+      // Global.history.pushState(null, 'new-title', targetHref)
+      Global.history.pushState({ prevUrl: targetHref }, 'new-title', targetHref)
 
       self.previousHomeURL = null
     },

diff --git a/src/widgets/CommunityDigest/DashboardLayout/CommunityBrief.tsx b/src/widgets/CommunityDigest/DashboardLayout/CommunityBrief.tsx
@@ -8,11 +8,11 @@ import useHover from '@/hooks/useHover'
 import Tooltip from '@/widgets/Tooltip'
 import { titleCase } from '@/fmt'
 
-import { SpaceGrow, SexyDivider } from '@/widgets/Common'
+import { Space, SpaceGrow, SexyDivider } from '@/widgets/Common'
 
 import {
   Wrapper,
-  PanelWrapper,
+  MenuWrapper,
   Logo,
   Title,
   Slash,
@@ -26,7 +26,7 @@ import {
 
 const CommunityBrief: FC = () => {
   const threads = usePublicThreads()
-  const { logo, slug, dashboard } = useViewingCommunity()
+  const { title, logo, slug, dashboard } = useViewingCommunity()
 
   const [disableTippyJump, setDisableTippyJump] = useState(false)
   const [ref, isHovering] = useHover<HTMLDivElement>()
@@ -38,72 +38,69 @@ const CommunityBrief: FC = () => {
   }, [isHovering, disableTippyJump])
 
   return (
-    <Tooltip
-      content={
-        <ToolPanel>
-          <PanelWrapper>
-            <Logo src={assetSrc(logo)} noLazy />
-            <Title>管理后台</Title>
-          </PanelWrapper>
+    <Wrapper ref={ref}>
+      <Logo src={assetSrc(logo)} noLazy />
+      <Title>{title}</Title>
+      <Slash>/</Slash>
 
-          {threads.map((item) => {
-            const ThreadIcon = Icon[titleCase(item.slug)]
-            return (
-              <PanelItem key={item.slug} href={`/${slug}/${item.slug}`}>
-                <ThreadIcon />
-                <div>{item.title}</div>
-              </PanelItem>
-            )
-          })}
+      <Tooltip
+        content={
+          <ToolPanel>
+            {threads.map((item) => {
+              const ThreadIcon = Icon[titleCase(item.slug)]
+              return (
+                <PanelItem key={item.slug} href={`/${slug}/${item.slug}`}>
+                  <ThreadIcon />
+                  <div>{item.title}</div>
+                </PanelItem>
+              )
+            })}
 
-          <PanelItem href={`/${slug}/about`}>
-            <Icon.About />
-            <div>关于</div>
-          </PanelItem>
+            <PanelItem href={`/${slug}/about`}>
+              <Icon.About />
+              <div>关于</div>
+            </PanelItem>
 
-          <SexyDivider top={5} bottom={5} />
+            <SexyDivider top={5} bottom={5} />
 
-          <PanelItem href={dashboard.baseInfo.homepage} $outside>
-            <Icon.Global />
-            <div>返回官网</div>
-            <SpaceGrow />
-            <ArrowIcon />
-          </PanelItem>
+            <PanelItem href={dashboard.baseInfo.homepage} $outside>
+              <Icon.Global />
+              <div>返回官网</div>
+              <SpaceGrow />
+              <ArrowIcon />
+            </PanelItem>
 
-          <PanelItem href={`/${slug}`} $outside>
-            <Icon.Github />
-            <div>Github</div>
-            <SpaceGrow />
-            <ArrowIcon />
-          </PanelItem>
+            <PanelItem href={`/${slug}`} $outside>
+              <Icon.Github />
+              <div>Github</div>
+              <SpaceGrow />
+              <ArrowIcon />
+            </PanelItem>
 
-          <SexyDivider top={5} bottom={5} />
-          <PanelItem href="/apply/community" $outside>
-            <Icon.Plus />
-            <div>新社区</div>
-            <SpaceGrow />
-            <ArrowIcon />
-          </PanelItem>
-        </ToolPanel>
-      }
-      placement="bottom"
-      hideOnClick={false}
-      offset={[-7, -39]}
-      trigger="click"
-      onHide={() => setDisableTippyJump(false)}
-      noPadding
-    >
-      <Wrapper ref={ref}>
-        <Logo src={assetSrc(logo)} noLazy />
-        <Title>
-          {' '}
-          <Slash>/</Slash> 管理后台
-        </Title>
-        <SpaceGrow />
-        <OptionArrowIcon />
-        <DisableTippyJump enable={disableTippyJump} />
-      </Wrapper>
-    </Tooltip>
+            <SexyDivider top={5} bottom={5} />
+            <PanelItem href="/apply/community" $outside>
+              <Icon.Plus />
+              <div>新社区</div>
+              <SpaceGrow />
+              <ArrowIcon />
+            </PanelItem>
+          </ToolPanel>
+        }
+        placement="bottom"
+        hideOnClick={false}
+        offset={[-7, -39]}
+        trigger="click"
+        onHide={() => setDisableTippyJump(false)}
+        noPadding
+      >
+        <MenuWrapper>
+          <Title>管理后台</Title>
+          <Space right={12} />
+          <OptionArrowIcon />
+        </MenuWrapper>
+      </Tooltip>
+      <DisableTippyJump enable={disableTippyJump} />
+    </Wrapper>
   )
 }
 

diff --git a/src/widgets/CommunityDigest/styles/dashboard_layout/community_brief.ts b/src/widgets/CommunityDigest/styles/dashboard_layout/community_brief.ts
@@ -17,17 +17,18 @@ import PlusSVG from '@/icons/PlusCircle'
 
 import Img from '@/Img'
 
+export const Wrapper = styled.div`
+  ${css.row('align-center')};
+`
 const BaseWrapper = styled.div`
   ${css.row('align-center')};
   transition: all 0.2s;
-  width: 150px;
-  max-width: 150px;
+  width: auto;
+  max-width: 140px;
   height: 32px;
   border-radius: 10px;
-  padding-left: 10px;
-  margin-left: -10px;
 `
-export const Wrapper = styled(BaseWrapper)`
+export const MenuWrapper = styled(BaseWrapper)`
   border: 1px solid;
   border-color: transparent;
 
@@ -42,15 +43,6 @@ export const Wrapper = styled(BaseWrapper)`
     max-width: 150px;
   `};
 `
-export const PanelWrapper = styled(BaseWrapper)`
-  border: none;
-  cursor: auto;
-  margin-bottom: 8px;
-
-  &:hover {
-    border-color: transparent;
-  }
-`
 export const OptionArrowIcon = styled(OptionArrowSVG)`
   fill: ${theme('article.digest')};
   ${css.size(12)};
@@ -83,6 +75,7 @@ export const Slash = styled.div`
   font-size: 12px;
   color: ${theme('hint')};
   margin-right: 6px;
+  margin-left: 8px;
 `
 export const LogoHolder = styled(Img)`
   fill: ${theme('banner.desc')};