refactor(store): articles thread re-org & move globallayout to widget (…

…#172)

* refactor(filter): articlesThread -> postThread wip

* refactor(filter): articlesThread -> postThread wip

* refactor(filter): wip

* refactor(store): rm postThread & changelogThread

* refactor: kanbanthread rmed

* refactor(store): init mushroom

* refactor(layout): re-org

* fix: import path

package.json

@@ -60,7 +60,7 @@
     "mobx-react-lite": "^4.0.5",
     "mobx-state-tree": "^5.3.0",
     "nanoid": "^3.1.12",
-    "next": "^14.0.2",
+    "next": "^14.0.3",
     "next-compose-plugins": "^2.2.0",
     "next-i18next": "4.4.1",
     "next-pwa": "^5.6.0",

src/app/[community]/about/loading.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react'
+
+const Loading: FC = () => {
+  return (
+    <div>
+      <h2>about loading</h2>
+    </div>
+  )
+}
+
+export default Loading

src/app/[community]/kanban/loading.tsx

@@ -1,7 +1,7 @@
 const Loading = () => {
   return (
     <div>
-      <h2>changelogs loading</h2>
+      <h2>kanban loading</h2>
     </div>
   )
 }

src/app/layout.tsx

@@ -46,6 +46,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         <StyledComponentsRegistry>
           <GraphQLProvider token={token}>
             <RootStoreProvider token={token}>
+              {/* @ts-ignore */}
               <GlobalLayout>{children}</GlobalLayout>
             </RootStoreProvider>
           </GraphQLProvider>

src/app/providers/GlobalLayout.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import GlobalLayoutWrapper from '@/containers/layout/GlobalLayout'
+import GlobalLayoutWrapper from '@/widgets/GlobalLayout'
 
-const GlobalLayout = ({ children }) => {
-  return <GlobalLayoutWrapper>{children}</GlobalLayoutWrapper>
+const GlobalLayout = ({ children, globalLayout }) => {
+  return <GlobalLayoutWrapper globalLayout={globalLayout}>{children}</GlobalLayoutWrapper>
 }
 
 export default GlobalLayout

src/app/providers/RootStoreProvider.tsx

@@ -1,13 +1,13 @@
 'use client'
 
-import { FC, ReactNode } from 'react'
+import { FC, ReactNode, cloneElement, Children, isValidElement } from 'react'
 import { usePathname, useParams } from 'next/navigation'
 import { Provider } from 'mobx-react'
 import { enableStaticRendering } from 'mobx-react-lite'
 
 import { useStore } from '@/stores/init'
 import { THREAD } from '@/constant/thread'
-import TYPE from '@/constant/type'
+// import TYPE from '@/constant/type'
 
 import {
   useSession,
@@ -83,12 +83,16 @@ const RootStoreWrapper: FC<TProps> = ({ children, token }) => {
 
   const store = useStore({
     ...sesstion,
-    kanbanThread: groupedKanbanPosts,
-    articlesThread: {
+    articles: {
       pagedPosts,
       pagedChangelogs,
-      resState: TYPE.RES_STATE.DONE,
+      ...groupedKanbanPosts,
     },
+    kanbanThread: groupedKanbanPosts,
+    // articlesThread: {
+    //   pagedPosts,
+    //   resState: TYPE.RES_STATE.DONE,
+    // },
     tagsBar: {
       tags,
     },
@@ -102,7 +106,17 @@ const RootStoreWrapper: FC<TProps> = ({ children, token }) => {
     dashboardThread: dashboard,
   })
 
-  return <Provider store={store}>{children}</Provider>
+  const childrenWithProps = Children.map(children, (child) => {
+    if (isValidElement(child)) {
+      return cloneElement(child, {
+        // @ts-ignore
+        globalLayout: store.dashboardThread.globalLayout,
+      })
+    }
+    return child
+  })
+
+  return <Provider store={store}>{childrenWithProps}</Provider>
 }
 
 export default RootStoreWrapper

src/containers/Mushroom/index.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { FC } from 'react'
+
+import { useStore } from './store'
+import { useInit } from './logic'
+
+const Mushroom: FC = () => {
+  const store = useStore()
+  useInit(store)
+
+  return <div />
+}
+
+export default Mushroom

src/containers/layout/GlobalLayout/store.ts → src/containers/Mushroom/store.ts

@@ -4,41 +4,16 @@
  */
 import { mergeRight } from 'ramda'
 
-import type { TRootStore, TGlobalLayout, TThemeName, TArticle, TArticleMeta } from '@/spec'
+import type { TRootStore, TArticle, TArticleMeta } from '@/spec'
 import { T, getParent, markStates, Instance, toJS, useMobxContext } from '@/mobx'
 
-const Platform = T.model('Platform', {
-  isChrome: T.opt(T.bool, true),
-  isFirefox: T.opt(T.bool, false),
-  isSafari: T.opt(T.bool, false),
-  isIE: T.opt(T.bool, false),
-  isEdge: T.opt(T.bool, false),
-})
-
-const GlobalLayout = T.model('GlobalLayoutStore', {
+const MushroomStore = T.model('MushroomStore', {
   online: T.opt(T.bool, true),
-  platform: T.opt(Platform, {}),
   isMobile: T.opt(T.bool, false),
   // follow the mac convention
   bodyScrollDirection: T.opt(T.enum(['up', 'down']), 'up'),
 })
-  .views((self) => ({
-    get globalLayout(): TGlobalLayout {
-      const root = getParent(self) as TRootStore
-      return root.dashboardThread.globalLayout
-    },
-
-    get curTheme(): TThemeName {
-      const root = getParent(self) as TRootStore
-      return root.theme.curTheme
-    },
-
-    get showDashboardAlert(): boolean {
-      const root = getParent(self) as TRootStore
-
-      return root.dashboardThread.demoAlertEnable
-    },
-  }))
+  .views((self) => ({}))
   .actions((self) => ({
     loadDemoSetting(): void {
       const root = getParent(self) as TRootStore
@@ -51,11 +26,13 @@ const GlobalLayout = T.model('GlobalLayoutStore', {
       const updatedArticle = mergeRight(viewingArticle, article)
 
       root.viewing.updateViewing(updatedArticle)
-      root.articlesThread.updateArticle(updatedArticle)
+      // root.articlesThread.updateArticle(updatedArticle)
+      // root.postThread.updateArticle(updatedArticle)
+      root.articles.updateArticle(updatedArticle)
     },
     setViewingAlways(article: TArticle): void {
       const root = getParent(self) as TRootStore
-      root.viewing.updateViewing(article)
+      root.viewing.updateViewing(toJS(article))
     },
     updateViewerHasUpvoted(viewerHasUpvoted: boolean): void {
       const root = getParent(self) as TRootStore
@@ -70,7 +47,9 @@ const GlobalLayout = T.model('GlobalLayoutStore', {
       const syncMeta = mergeRight(viewingArticleMeta, meta)
       // for viewing article end
 
-      root.articlesThread.updateArticle({ id, viewerHasUpvoted, upvotesCount, meta: syncMeta })
+      // root.articlesThread.updateArticle({ id, viewerHasUpvoted, upvotesCount, meta: syncMeta })
+      // root.postThread.updateArticle({ id, viewerHasUpvoted, upvotesCount, meta: syncMeta })
+      root.articles.updateArticle({ id, viewerHasUpvoted, upvotesCount, meta: syncMeta })
     },
     clearLocalSettings(): void {
       const root = getParent(self) as TRootStore
@@ -85,7 +64,7 @@ const GlobalLayout = T.model('GlobalLayoutStore', {
     },
   }))
 
-export type TStore = Instance<typeof GlobalLayout>
-export const useStore = (): TStore => useMobxContext().store.globalLayout
+export type TStore = Instance<typeof MushroomStore>
+export const useStore = (): TStore => useMobxContext().store.mushroom
 
-export default GlobalLayout
+export default MushroomStore