refactor(store): sync url theme & fix re-render use useMemo in mobx h…

…ooks (#216)

* chore(theme): put theme in url to sync state

* chore(theme): put theme in url to sync state

* chore(vercel): debug

* chore(vercel): debug

* chore(theme): fix

* chore(vercel): fix landing switch

* chore(vercel): wip

* chore(vercel): wip 2

* chore(vercel): wip 3

* chore(vercel): wip 4

* chore(vercel): wip 5

src/app/Landing/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EmotionBar.tsx

@@ -7,7 +7,7 @@ import {
   Count,
 } from '../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/emotion_bar'
 
-const EMOTION_STATIC = '/icons/static/emotion'
+const EMOTION_STATIC = 'icons/emotion'
 
 const EditorPreview: FC = () => {
   return (

src/app/Landing/index.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 /* *
  * LandingPage
  *
@@ -13,7 +15,7 @@ import useMetric from '@/hooks/useMetric'
 import { ROUTE } from '@/constant/route'
 
 import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
-import { DesktopOnly, MobileOnly, LinkAble } from '@/widgets/Common'
+import { DesktopOnly, LinkAble } from '@/widgets/Common'
 import Tooltip from '@/widgets/Tooltip'
 import FaqList from '@/widgets/FaqList'
 import HomeHeader from '@/widgets/HomeHeader'

src/app/page.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { memo } from 'react'
 
 import Landing from './Landing'

src/app/providers/RootStoreProvider.tsx

@@ -7,6 +7,7 @@ import { enableStaticRendering } from 'mobx-react-lite'
 import { useStore } from '@/stores/init'
 
 import {
+  useThemeFromURL,
   useMetric,
   useCommunity,
   useTags,
@@ -43,10 +44,14 @@ const RootStoreWrapper: FC<TProps> = ({ children }) => {
   const { groupedKanbanPosts } = useGroupedKanbanPosts(userHasLogin)
   const { tags } = useTags()
 
-  const wallpaper = useWallpaper(community)
   const dashboard = useDashboard(community)
+  const wallpaper = useWallpaper(community)
   const filterSearchParams = useFilterSearchParams()
 
+  // NOTE: 目前在没有启动后端的情况下，如果这行代码出现在 useCommunity 之前，会导致 build 后的代码疯狂
+  // post 到 /GraphiQL, 奇怪的行为。。，很怀疑是 URQL 客户端的 Bug ..
+  const theme = useThemeFromURL()
+
   const store = useStore({
     metric,
     articles: {
@@ -65,8 +70,11 @@ const RootStoreWrapper: FC<TProps> = ({ children }) => {
       changelog,
       activeThread,
     },
-    dashboardThread: dashboard,
     wallpaperEditor: wallpaper,
+    dashboardThread: dashboard,
+    theme: {
+      curTheme: theme,
+    },
   })
 
   console.log('## root store provider')

src/app/queries/helper.ts

@@ -46,7 +46,7 @@ export const commonRes = (result): TGQSSRResult => {
 export const useIsStaticQuery = (): boolean => {
   const pathname = usePathname()
 
-  return startsWith('/_next/static', pathname)
+  return startsWith('/_next', pathname) || startsWith('/_vercel', pathname)
 }
 
 export const useCommunityParam = (): string => {

src/app/queries/index.ts

@@ -7,10 +7,11 @@ import { values, includes } from 'ramda'
 import { useQuery } from '@urql/next'
 import { usePathname, useSearchParams } from 'next/navigation'
 
-import type { TCommunity, TMetric } from '@/spec'
+import type { TCommunity, TMetric, TThemeName } from '@/spec'
 import { P } from '@/schemas'
 import { DEFAULT_THEME } from '@/config'
 import { THREAD, ARTICLE_THREAD } from '@/constant/thread'
+import THEME from '@/constant/theme'
 import METRIC from '@/constant/metric'
 import URL_PARAM from '@/constant/url_param'
 import { ARTICLE_CAT, ARTICLE_STATE, ARTICLE_ORDER } from '@/constant/gtd'
@@ -41,9 +42,21 @@ import {
   parseWallpaper,
   parseDashboard,
 } from './helper'
+import { useMemo } from 'react'
 
 export { parseCommunity, useThreadParam } from './helper'
 
+export const useThemeFromURL = (): TThemeName => {
+  const searchParams = useSearchParams()
+  const theme = searchParams.get('theme')
+
+  if (theme === THEME.NIGHT) {
+    return THEME.NIGHT
+  }
+
+  return THEME.DAY
+}
+
 export const useMetric = (): TMetric => {
   const thread = useThreadParam()
   const articleParams = useArticleParams()
@@ -228,9 +241,13 @@ export const useDashboard = (community: TCommunity): TParseDashboard => {
   const pathname = usePathname()
 
   // @ts-ignore
-  if (isStaticQuery) return {}
+  if (isStaticQuery || !community) return {}
+
+  return useMemo(() => {
+    return parseDashboard(community, pathname)
+  }, [community.slug])
 
-  return parseDashboard(community, pathname)
+  // return parseDashboard(community, pathname)
 }
 
 /**

src/containers/thread/PostThread/index.tsx

@@ -34,8 +34,6 @@ const PostThread: FC = () => {
   const postLayout = usePostLayout()
   const trackerRef = useRef(null)
 
-  // if (store.curThread !== THREAD.POST) return <LavaLampLoading top={20} />
-
   const isMobile = false
   const showFilters = true
 

src/containers/unit/TagsBar/DesktopView/index.tsx

@@ -4,12 +4,13 @@
  *
  */
 
-import { FC } from 'react'
+import { FC, useMemo } from 'react'
 import { keys, reverse } from 'ramda'
 import { observer } from 'mobx-react-lite'
 
 import { buildLog } from '@/logger'
 
+import useViewingCommunity from '@/hooks/useViewingCommunity'
 import type { TProps as TTagProps } from '..'
 
 import { useStore } from '../store'
@@ -26,8 +27,14 @@ type TProps = Omit<TTagProps, 'view'>
 const TagsBar: FC<TProps> = ({ onSelect }) => {
   const store = useStore()
   useInit(store)
+  const community = useViewingCommunity()
+
+  const { activeTagData, maxDisplayCount, totalCountThrold } = store
+
+  // TODO: thread is also need for deps
+  const tagsData = useMemo(() => store.tagsData, [community.slug])
+  const groupedTags = useMemo(() => store.groupedTags, [community.slug])
 
-  const { groupedTags, tagsData, activeTagData, maxDisplayCount, totalCountThrold } = store
   const groupsKeys = reverse(keys(groupedTags)) as string[]
 
   return (

src/containers/unit/TagsBar/store.ts

@@ -4,7 +4,6 @@
  */
 
 import { findIndex, propEq } from 'ramda'
-import { THREAD } from '@/constant/thread'
 
 import type { TRootStore, TCommunity, TTag, TGroupedTags, TThread } from '@/spec'
 

src/hooks/useFooterLinks.ts

@@ -14,7 +14,8 @@ type TFooterLinks = {
 const useFooterLinks = (): TFooterLinks => {
   const { store } = useContext(MobXProviderContext)
 
-  const footerlinks = useMemo(() => store.dashboardThread.footerLinksData, [])
+  const viewingCommunity = store.viewing.community.slug
+  const footerlinks = useMemo(() => store.dashboardThread.footerLinksData, [viewingCommunity])
 
   return {
     layout: store.dashboardThread.footerLayout,

src/hooks/useHeaderLinks.ts

@@ -24,10 +24,8 @@ const useHeaderLinks = (): THeaderLinks => {
   }
 
   const { isModerator } = store.accountInfo
-  const { community } = store.viewing
-
-  const { headerLinks } = store.dashboardThread
-  const headerLinksRow = toJS(headerLinks)
+  const viewingCommunity = store.viewing.community.slug
+  const headerLinksRow = useMemo(() => store.dashboardThread.headerLinksData, [viewingCommunity])
 
   const hasExtraAbout = find((link: TLinkItem) => link.title === '关于', headerLinksRow)
 
@@ -36,19 +34,22 @@ const useHeaderLinks = (): THeaderLinks => {
         index: 999,
         title: '关于',
         group: MORE_GROUP,
-        link: `/${community.slug}/about`,
+        link: `/${viewingCommunity}/about`,
       }
     : { title: '', index: 0 }
 
   const dashboardLink = {
     index: 1000,
     title: '控制台',
     group: MORE_GROUP,
-    link: `/${community.slug}/dashboard`,
+    link: `/${viewingCommunity}/dashboard`,
   }
 
-  const customLinks = isModerator ? [...headerLinksRow, aboutLink, dashboardLink] : headerLinksRow
-  const headerlinks = useMemo(() => store.dashboardThread.headerLinksData, [])
+  const customLinks = useMemo(() => {
+    return isModerator ? [...headerLinksRow, aboutLink, dashboardLink] : headerLinksRow
+  }, [viewingCommunity])
+
+  const headerlinks = useMemo(() => store.dashboardThread.headerLinksData, [viewingCommunity])
 
   return {
     layout: store.dashboardThread.headerLayout,

src/hooks/useMetric.ts

@@ -2,10 +2,12 @@ import { useContext } from 'react'
 import { MobXProviderContext } from 'mobx-react'
 
 import { usePathname } from 'next/navigation'
+import { includes } from 'ramda'
 
 import type { TMetric } from '@/spec'
 import METRIC from '@/constant/metric'
 import { BANNER_LAYOUT } from '@/constant/layout'
+import { ROUTE } from '@/constant/route'
 
 /**
  * NOTE: should use observer to wrap the component who use this hook
@@ -19,7 +21,7 @@ const useMetric = (): TMetric => {
 
   const pathname = usePathname()
 
-  if (pathname === '/') {
+  if (includes(pathname, ['/', `/${ROUTE.PRICE}`, `/${ROUTE.BOOK_DEMO}`])) {
     return METRIC.HOME
   }
 

src/hooks/useNameAlias.ts

@@ -16,18 +16,20 @@ const useNameAlias = (group = 'kanban'): Record<string, TNameAlias> => {
 
   const alias = {}
   let aliasList = []
+  const viewingCommunity = store.viewing.community.slug
+
   // NOTE: 如果这里不用 useMemo，会导致首页切换页面时一直 re-render, 相当变态
-  const curAlias = useMemo(() => store.dashboardThread.nameAliasData, [])
+  const curAlias = useMemo(() => store.dashboardThread.nameAliasData, [viewingCommunity])
 
   if (!group) {
     aliasList = curAlias
   } else {
     aliasList = filter((item: TNameAlias) => item.group === group, curAlias)
   }
 
-  aliasList.forEach((item) => {
+  for (const item of aliasList) {
     alias[item.slug] = item
-  })
+  }
 
   return alias
 }

src/hooks/usePagedChangelogs.ts

@@ -1,8 +1,10 @@
-import { useContext } from 'react'
+import { useContext, useMemo } from 'react'
 import { MobXProviderContext } from 'mobx-react'
 
 import type { TPagedChangelogs, TResState } from '@/spec'
 
+import { toJS } from '@/mobx'
+
 type TRes = {
   resState: TResState
   pagedChangelogs: TPagedChangelogs
@@ -18,9 +20,18 @@ const usePagedChangelogs = (): TRes => {
     throw new Error('Store cannot be null, please add a context provider')
   }
 
+  const viewingCommunity = store.viewing.community.slug
+  const curPageNumber = store.articles.pagedChangelogs.pageNumber
+
+  const resState = useMemo(() => toJS(store.articles.resState), [viewingCommunity, curPageNumber])
+  const pagedChangelogs = useMemo(
+    () => toJS(store.articles.pagedChangelogs),
+    [viewingCommunity, curPageNumber],
+  )
+
   return {
-    resState: store.articles.resState,
-    pagedChangelogs: store.articles.pagedChangelogs,
+    resState,
+    pagedChangelogs,
   }
 }
 

src/hooks/usePagedPosts.ts

@@ -1,8 +1,10 @@
-import { useContext } from 'react'
+import { useContext, useMemo } from 'react'
 import { MobXProviderContext } from 'mobx-react'
 
 import type { TPagedPosts, TResState } from '@/spec'
 
+import { toJS } from '@/mobx'
+
 type TRes = {
   resState: TResState
   pagedPosts: TPagedPosts
@@ -18,9 +20,18 @@ const usePagedPosts = (): TRes => {
     throw new Error('Store cannot be null, please add a context provider')
   }
 
+  const viewingCommunity = store.viewing.community.slug
+  const curPageNumber = store.articles.pagedPosts.pageNumber
+
+  const resState = useMemo(() => toJS(store.articles.resState), [viewingCommunity, curPageNumber])
+  const pagedPosts = useMemo(
+    () => toJS(store.articles.pagedPosts),
+    [viewingCommunity, curPageNumber],
+  )
+
   return {
-    resState: store.articles.resState,
-    pagedPosts: store.articles.pagedPosts,
+    resState,
+    pagedPosts,
   }
 }
 

src/hooks/usePublicThreads.ts

@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useMemo } from 'react'
 import { MobXProviderContext } from 'mobx-react'
 import { find, propEq, reject } from 'ramda'
 
@@ -18,33 +18,36 @@ const usePublicThreads = (): TCommunityThread[] => {
     throw new Error('Store cannot be null, please add a context provider')
   }
 
-  const { community } = store.viewing
-  const { enable, nameAlias } = store.dashboardThread
+  const viewingCommunity = store.viewing.community.slug
+  const community = useMemo(() => toJS(store.viewing.community), [viewingCommunity])
+  const nameAliasData = useMemo(() => store.dashboardThread.nameAliasData, [viewingCommunity])
+  const enable = useMemo(() => store.dashboardThread.enableSettings, [viewingCommunity])
 
-  const { threads } = community
+  // const { enable, nameAliasData } = store.dashboardThread
 
+  const { threads } = community
   const enabledThreads = sortByIndex(threads.filter((thread) => enable[thread.slug]))
 
   const mappedThreads = enabledThreads.map((pThread) => {
-    const aliasItem = find(propEq(pThread.slug, 'slug'))(nameAlias) as TNameAlias
+    const aliasItem = find(propEq(pThread.slug, 'slug'))(nameAliasData) as TNameAlias
 
     return {
       ...pThread,
       title: aliasItem?.name || pThread.title,
     }
   })
 
-  const { headerLinks } = store.dashboardThread
-  const headerLinksRow = toJS(headerLinks)
+  const headerLinks = useMemo(() => store.dashboardThread.headerLinksData, [viewingCommunity])
 
-  const hasExtraAbout = find((link: TLinkItem) => link.title === '关于', headerLinksRow)
+  const hasExtraAbout = find((link: TLinkItem) => link.title === '关于', headerLinks)
 
   if (hasExtraAbout) {
     return reject(
       (item: TCommunityThread) => item.slug === THREAD.ABOUT,
       mappedThreads as TCommunityThread[],
     ) as TCommunityThread[]
   }
+
   return mappedThreads as TCommunityThread[]
 }