From 13117e2ac85984a8b3a3d6969abbacc916bc49d4 Mon Sep 17 00:00:00 2001 From: xieyimian Date: Sun, 19 Nov 2023 15:13:46 +0800 Subject: [PATCH] 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 --- .../@preview/(..)post/[id]/page.tsx | 9 ++ src/app/[community]/@preview/default.tsx | 3 + src/containers/Mushroom/index.tsx | 28 +++- src/containers/thread/PostThread/logic.ts | 4 +- src/containers/tool/Drawer/index.tsx | 2 + src/containers/tool/Drawer/store.ts | 9 +- .../DashboardLayout/CommunityBrief.tsx | 123 +++++++++--------- .../dashboard_layout/community_brief.ts | 21 +-- 8 files changed, 116 insertions(+), 83 deletions(-) create mode 100644 src/app/[community]/@preview/(..)post/[id]/page.tsx create mode 100644 src/app/[community]/@preview/default.tsx diff --git a/src/app/[community]/@preview/(..)post/[id]/page.tsx b/src/app/[community]/@preview/(..)post/[id]/page.tsx new file mode 100644 index 000000000..a6bb98d2a --- /dev/null +++ b/src/app/[community]/@preview/(..)post/[id]/page.tsx @@ -0,0 +1,9 @@ +'use client' + +import ArticlePost from '@/widgets/Article/Post' + +const CommunityPostPage = () => { + return +} + +export default CommunityPostPage diff --git a/src/app/[community]/@preview/default.tsx b/src/app/[community]/@preview/default.tsx new file mode 100644 index 000000000..86b9e9a38 --- /dev/null +++ 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 index f89ad1c62..5af25c63a 100644 --- a/src/containers/Mushroom/index.tsx +++ b/src/containers/Mushroom/index.tsx @@ -1,6 +1,9 @@ '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' @@ -8,8 +11,29 @@ 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
+ return <> } export default Mushroom diff --git a/src/containers/thread/PostThread/logic.ts b/src/containers/thread/PostThread/logic.ts index faaf7eb86..cb036b56d 100644 --- 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 index b0f51fa9e..67b74d1e1 100755 --- a/src/containers/tool/Drawer/index.tsx +++ b/src/containers/tool/Drawer/index.tsx @@ -28,7 +28,9 @@ type TProps = { const Drawer: FC = ({ 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 index 2f596a2dc..f0d77dfcc 100755 --- a/src/containers/tool/Drawer/store.ts +++ b/src/containers/tool/Drawer/store.ts @@ -233,7 +233,10 @@ 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 { @@ -241,7 +244,9 @@ const DrawerStore = T.model('DrawerStore', { 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 index db43537d7..f2cf64da0 100644 --- 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() @@ -38,72 +38,69 @@ const CommunityBrief: FC = () => { }, [isHovering, disableTippyJump]) return ( - - - - 管理后台 - + + + {title} + / - {threads.map((item) => { - const ThreadIcon = Icon[titleCase(item.slug)] - return ( - - -
{item.title}
- - ) - })} + + {threads.map((item) => { + const ThreadIcon = Icon[titleCase(item.slug)] + return ( + + +
{item.title}
+ + ) + })} - - -
关于
- + + +
关于
+ - + - - -
返回官网
- - - + + +
返回官网
+ + + - - -
Github
- - - + + +
Github
+ + + - - - -
新社区
- - - - - } - placement="bottom" - hideOnClick={false} - offset={[-7, -39]} - trigger="click" - onHide={() => setDisableTippyJump(false)} - noPadding - > - - - - {' '} - <Slash>/</Slash> 管理后台 - - - - - - + + + +
新社区
+ + + + + } + placement="bottom" + hideOnClick={false} + offset={[-7, -39]} + trigger="click" + onHide={() => setDisableTippyJump(false)} + noPadding + > + + 管理后台 + + + + + + ) } diff --git a/src/widgets/CommunityDigest/styles/dashboard_layout/community_brief.ts b/src/widgets/CommunityDigest/styles/dashboard_layout/community_brief.ts index 6d80edc86..d5a0ba5ff 100644 --- 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')};