fix(re-render): caused by complex array in mobx hooks

groupher · Mar 6, 2024 · 90d1990 · 90d1990
1 parent 28ca7ad
commit 90d1990
Show file tree

Hide file tree

Showing 22 changed files with 132 additions and 91 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
     "mobx": "^6.12.0",
     "mobx-react": "^9.1.0",
     "mobx-react-lite": "^4.0.5",
-    "mobx-state-tree": "^5.4.0",
+    "mobx-state-tree": "^5.4.1",
     "nanoid": "^3.1.12",
     "next": "^14.1.1",
     "next-compose-plugins": "^2.2.0",

diff --git a/src/app/Landing/ArticlesIntroTabs/Content.tsx b/src/app/Landing/ArticlesIntroTabs/Content.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, memo } from 'react'
 
 import type { TThread } from '@/spec'
 import { THREAD } from '@/constant/thread'
@@ -31,4 +31,4 @@ const Content: FC<TProps> = ({ tab }) => {
   )
 }
 
-export default Content
+export default memo(Content)
diff --git a/src/app/Landing/index.tsx b/src/app/Landing/index.tsx
@@ -149,19 +149,14 @@ const LandingPage: FC = () => {
           <TechStacks />
         </Suspense>
 
-        <DesktopOnly>
-          <Divider top={80} bottom={80} />
-        </DesktopOnly>
-        <MobileOnly>
-          <Divider top={50} bottom={50} />
-        </MobileOnly>
+        <Divider top={80} bottom={80} />
         <UsersWall wallpaper={wallpaper} />
-        <DesktopOnly>
-          <Divider top={60} bottom={80} />
-        </DesktopOnly>
+        <Divider top={60} bottom={80} />
+
         <FAQWrapper>
           <FaqList layout={DOC_FAQ_LAYOUT.FLAT} large sections={faqs} />
         </FAQWrapper>
+
         <Divider top={60} bottom={80} />
 
         <Footer />

diff --git a/src/app/[community]/(articles)/about/loading.tsx b/src/app/[community]/(articles)/about/loading.tsx
@@ -1,11 +1,9 @@
-import { FC } from 'react'
+'use client'
 
-const Loading: FC = () => {
-  return (
-    <div>
-      <h2>about loading</h2>
-    </div>
-  )
+import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
+
+const Loading = () => {
+  return <LavaLampLoading top={80} />
 }
 
 export default Loading
diff --git a/src/app/[community]/(articles)/changelog/loading.tsx b/src/app/[community]/(articles)/changelog/loading.tsx
@@ -1,9 +1,9 @@
+'use client'
+
+import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
+
 const Loading = () => {
-  return (
-    <div>
-      <h2>changelogs loading</h2>
-    </div>
-  )
+  return <LavaLampLoading top={80} />
 }
 
 export default Loading
diff --git a/src/app/[community]/(articles)/doc/loading.tsx b/src/app/[community]/(articles)/doc/loading.tsx
@@ -1,9 +1,9 @@
+'use client'
+
+import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
+
 const Loading = () => {
-  return (
-    <div>
-      <h2>doc loading</h2>
-    </div>
-  )
+  return <LavaLampLoading top={80} />
 }
 
 export default Loading
diff --git a/src/app/[community]/(articles)/kanban/loading.tsx b/src/app/[community]/(articles)/kanban/loading.tsx
@@ -1,9 +1,9 @@
+'use client'
+
+import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
+
 const Loading = () => {
-  return (
-    <div>
-      <h2>kanban loading</h2>
-    </div>
-  )
+  return <LavaLampLoading top={80} />
 }
 
 export default Loading
diff --git a/src/app/[community]/(articles)/post/loading.tsx b/src/app/[community]/(articles)/post/loading.tsx
@@ -1,9 +1,9 @@
+'use client'
+
+import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
+
 const Loading = () => {
-  return (
-    <div>
-      <h2>post loading</h2>
-    </div>
-  )
+  return <LavaLampLoading top={80} />
 }
 
 export default Loading
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -17,16 +17,16 @@ export const metadata: Metadata = {
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   // const token = cookies().get('jwtToken')?.value || null
-  const token = null
+  // const token = null
   // const theme = cookies().get('theme')?.value === 'night' ? 'night' : 'day'
-  const theme = 'day'
+  // const theme = 'day'
 
   return (
     <html lang="en">
       <body>
         <StyledComponentsRegistry>
-          <GraphQLProvider token={token}>
-            <RootStoreProvider token={token} theme={theme}>
+          <GraphQLProvider>
+            <RootStoreProvider>
               <GlobalLayout>{children}</GlobalLayout>
             </RootStoreProvider>
           </GraphQLProvider>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,7 +1,11 @@
 'use client'
 
+import { memo } from 'react'
+
 import Landing from './Landing'
 
-export default function Page() {
+const Page = () => {
   return <Landing />
 }
+
+export default memo(Page)
diff --git a/src/app/providers/GraphQLProvider.tsx b/src/app/providers/GraphQLProvider.tsx
@@ -10,11 +10,10 @@ import { UrqlProvider, ssrExchange, cacheExchange, fetchExchange, createClient }
 import { GRAPHQL_ENDPOINT } from '@/config'
 
 type TProps = {
-  token: null | string
   children: ReactNode
 }
 
-const GraphQLProvider: FC<TProps> = ({ children, token }) => {
+const GraphQLProvider: FC<TProps> = ({ children }) => {
   const [client, ssr] = useMemo(() => {
     const ssr = ssrExchange()
     const client = createClient({
@@ -25,13 +24,13 @@ const GraphQLProvider: FC<TProps> = ({ children, token }) => {
       fetchOptions: () => ({
         headers: {
           special: 'Special header value',
-          authorization: `Bearer ${token || ''}`,
+          authorization: '',
         },
       }),
     })
 
     return [client, ssr]
-  }, [token])
+  }, [])
 
   return (
     <UrqlProvider client={client} ssr={ssr}>

diff --git a/src/app/providers/RootStoreProvider.tsx b/src/app/providers/RootStoreProvider.tsx
@@ -4,12 +4,10 @@ import { FC, ReactNode, memo } from 'react'
 import { Provider } from 'mobx-react'
 import { enableStaticRendering } from 'mobx-react-lite'
 
-import type { TThemeName } from '@/spec'
 import { useStore } from '@/stores/init'
 
 import {
   useMetric,
-  useSession,
   useCommunity,
   useTags,
   usePost,
@@ -27,19 +25,15 @@ import {
 enableStaticRendering(typeof window === 'undefined')
 
 type TProps = {
-  token: null | string
-  theme: TThemeName
   children: ReactNode
 }
 
-const RootStoreWrapper: FC<TProps> = ({ children, token, theme }) => {
-  const userHasLogin = !!token
+const RootStoreWrapper: FC<TProps> = ({ children }) => {
+  const userHasLogin = false
 
   const metric = useMetric()
   const activeThread = useThreadParam()
-  // console.log('## activeThread: ', activeThread)
 
-  const { sesstion } = useSession()
   const { community } = useCommunity(userHasLogin)
 
   const { pagedPosts } = usePagedPosts(userHasLogin)
@@ -55,7 +49,6 @@ const RootStoreWrapper: FC<TProps> = ({ children, token, theme }) => {
 
   const store = useStore({
     metric,
-    ...sesstion,
     articles: {
       pagedPosts,
       pagedChangelogs,
@@ -72,12 +65,8 @@ const RootStoreWrapper: FC<TProps> = ({ children, token, theme }) => {
       changelog,
       activeThread,
     },
-    wallpaperEditor: wallpaper,
     dashboardThread: dashboard,
-
-    theme: {
-      curTheme: theme,
-    },
+    wallpaperEditor: wallpaper,
   })
 
   console.log('## root store provider')

diff --git a/src/app/queries/helper.ts b/src/app/queries/helper.ts
@@ -257,3 +257,47 @@ export const parseDashboard = (community: TCommunity, pathname: string): TParseD
     ...parseDashboardThread(pathname),
   }
 }
+
+export const parseDashboardbackup = (community: TCommunity, pathname: string): TParseDashboard => {
+  // NOTE: if the backend is not ready, return default config
+  // @ts-ignore
+  if (!community) return {}
+
+  const { dashboard, moderators } = community
+  const {
+    enable,
+    nameAlias,
+    socialLinks,
+    faqs,
+    seo,
+    layout,
+    rss,
+    baseInfo,
+    headerLinks,
+    footerLinks,
+    mediaReports,
+  } = dashboard
+
+  const fieldsObj = removeEmptyValuesFromObject({
+    enable,
+    nameAlias: parseDashboardAlias(nameAlias),
+    socialLinks,
+    faqSections: faqs,
+    ...baseInfo,
+    ...seo,
+    ...layout,
+    ...rss,
+    headerLinks,
+    footerLinks,
+    moderators,
+    mediaReports,
+  })
+
+  return {
+    ...fieldsObj,
+    initSettings: {
+      ...fieldsObj,
+    },
+    ...parseDashboardThread(pathname),
+  }
+}
diff --git a/src/app/queries/index.ts b/src/app/queries/index.ts
@@ -228,7 +228,9 @@ export const useDashboard = (community: TCommunity): TParseDashboard => {
   const pathname = usePathname()
 
   // @ts-ignore
-  return !isStaticQuery ? parseDashboard(community, pathname) : {}
+  if (isStaticQuery) return {}
+
+  return parseDashboard(community, pathname)
 }
 
 /**

diff --git a/src/containers/thread/DashboardThread/store/index.ts b/src/containers/thread/DashboardThread/store/index.ts
@@ -27,6 +27,7 @@ import type {
   TChangeMode,
   TSocialItem,
   TMediaReport,
+  TLinkItem,
 } from '@/spec'
 
 import {
@@ -132,6 +133,19 @@ const DashboardThread = T.model('DashboardThread', {
 
       return toJS(root.viewing.community)
     },
+
+    get nameAliasData(): TNameAlias[] {
+      return toJS(self.nameAlias)
+    },
+
+    get headerLinksData(): TLinkItem[] {
+      return toJS(self.headerLinks)
+    },
+
+    get footerLinksData(): TLinkItem[] {
+      return toJS(self.footerLinks)
+    },
+
     get overviewData(): TOverview {
       return toJS(self.overview)
     },

diff --git a/src/hooks/useFooterLinks.ts b/src/hooks/useFooterLinks.ts
@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useMemo } from 'react'
 import { MobXProviderContext } from 'mobx-react'
 
 import type { TLinkItem, TFooterLayout } from '@/spec'
@@ -14,13 +14,11 @@ type TFooterLinks = {
 const useFooterLinks = (): TFooterLinks => {
   const { store } = useContext(MobXProviderContext)
 
-  if (store === null) {
-    throw new Error('Store cannot be null, please add a context provider')
-  }
+  const footerlinks = useMemo(() => store.dashboardThread.footerLinksData, [])
 
   return {
     layout: store.dashboardThread.footerLayout,
-    links: store.dashboardThread.footerLinks,
+    links: footerlinks,
   }
 }
 

diff --git a/src/hooks/useHeaderLinks.ts b/src/hooks/useHeaderLinks.ts
@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useMemo } from 'react'
 import { find } from 'ramda'
 import { MobXProviderContext } from 'mobx-react'
 
@@ -48,10 +48,11 @@ const useHeaderLinks = (): THeaderLinks => {
   }
 
   const customLinks = isModerator ? [...headerLinksRow, aboutLink, dashboardLink] : headerLinksRow
+  const headerlinks = useMemo(() => store.dashboardThread.headerLinksData, [])
 
   return {
     layout: store.dashboardThread.headerLayout,
-    links: store.dashboardThread.headerLinks,
+    links: headerlinks,
     customLinks,
   }
 }