refactor(dashboard): export globalLayout to post

src/containers/thread/ArticlesThread/index.tsx

@@ -55,6 +55,7 @@ const ArticlesThreadContainer: FC<TProps> = ({ articlesThread: store }) => {
     c11n,
     resState,
     mode,
+    globalLayout,
   } = store
   const { pageNumber, totalCount } = pagedArticlesData
 
@@ -92,6 +93,7 @@ const ArticlesThreadContainer: FC<TProps> = ({ articlesThread: store }) => {
             thread={curThread}
             resState={resState as TResState}
             c11n={c11n}
+            globalLayout={globalLayout}
           />
         )}
         {mode === 'search' && <FaqList mode="search-hint" />}

src/containers/thread/ArticlesThread/store.ts

@@ -17,6 +17,7 @@ import type {
   TThread,
   TArticleFilter,
   TC11N,
+  TGlobalLayout,
 } from '@/spec'
 
 import { TYPE } from '@/constant'
@@ -109,14 +110,16 @@ const ArticlesThread = T.model('ArticlesThread', {
       const slf = self as TStore
       return `paged${plural(slf.curThread, 'titleCase')}`
     },
+    get globalLayout(): TGlobalLayout {
+      const root = getParent(self) as TRootStore
+      return root.dashboardThread.globalLayout
+    },
   }))
   .actions((self) => ({
     afterInitLoading(): void {
       const slf = self as TStore
       const { totalCount } = slf.pagedArticlesData
 
-      console.log('totalCount -> ', totalCount)
-
       if (totalCount === 0) {
         self.resState = TYPE.RES_STATE.EMPTY
       } else {

src/containers/thread/DashboardThread/store.ts

@@ -5,7 +5,7 @@
 import { types as T, getParent, Instance } from 'mobx-state-tree'
 import { keys, values, pick, findIndex, clone } from 'ramda'
 
-import type { TCommunity, TRootStore, TTag } from '@/spec'
+import type { TCommunity, TRootStore, TTag, TGlobalLayout } from '@/spec'
 import { mockTags } from '@/utils/mock'
 
 import {
@@ -68,6 +68,19 @@ const DashboardThread = T.model('DashboardThread', {
   initSettings: T.optional(InitSettings, {}),
 })
   .views((self) => ({
+    get globalLayout(): TGlobalLayout {
+      const slf = self as TStore
+      const { initSettings } = slf
+      const { primaryColor, changelogLayout, postLayout, bannerLayout } =
+        initSettings
+
+      return {
+        primaryColor,
+        post: postLayout,
+        changelog: changelogLayout,
+        banner: bannerLayout,
+      }
+    },
     get curCommunity(): TCommunity {
       const root = getParent(self) as TRootStore
 

src/containers/user/UserPublishedArticles/index.tsx

@@ -37,6 +37,7 @@ const UserPublishedArticlesContainer: FC<TProps> = ({
     c11n,
     resState,
     hasContentBg,
+    globalLayout,
   } = store
 
   // console.log('pagedArticlesData: ', pagedArticlesData)
@@ -49,6 +50,7 @@ const UserPublishedArticlesContainer: FC<TProps> = ({
           thread={thread}
           resState={resState as TResState}
           c11n={c11n}
+          globalLayout={globalLayout}
         />
       </ArticlesWrapper>
     </Fragment>

src/containers/user/UserPublishedArticles/store.ts

@@ -12,6 +12,7 @@ import type {
   TArticleThread,
   TPagedArticles,
   TC11N,
+  TGlobalLayout,
 } from '@/spec'
 import { TYPE, ARTICLE_THREAD } from '@/constant'
 import { buildLog } from '@/utils/logger'
@@ -77,6 +78,10 @@ const UserPublishedArticles = T.model('UserPublishedArticles', {
     get hasContentBg(): boolean {
       return !includes(self.thread, [ARTICLE_THREAD.JOB, ARTICLE_THREAD.RADAR])
     },
+    get globalLayout(): TGlobalLayout {
+      const root = getParent(self) as TRootStore
+      return root.dashboardThread.globalLayout
+    },
   }))
   .actions((self) => ({
     markRes(res: Record<string, TPagedArticles>): void {

src/spec/article.d.ts

@@ -2,6 +2,7 @@ import type { TCommunity, TTag } from './index'
 import type { TUser, TAccount, TSimpleUser, TRSSAuthor } from './account'
 import type { TID } from './utils'
 import type { TEmotion } from './emotion'
+import type { TColorName } from './color'
 
 export type TCopyright = 'cc' | 'approve' | 'forbid'
 
@@ -135,6 +136,7 @@ export type TJob = TBaseArticle & {
 }
 
 export type TArticle = TPost | TJob | TBlog | TRadar
+export type TArticleEntries = TPost[] | TJob[] | TBlog[] | TRadar[]
 
 type TPagi = {
   totalCount: number
@@ -144,7 +146,7 @@ type TPagi = {
 }
 
 export type TPagedArticles = {
-  entries: TPost[] | TJob[] | TBlog[] | TRadar[]
+  entries: TArticleEntries
 } & TPagi
 
 export type TPagedWorks = {
@@ -219,6 +221,13 @@ export type TBannerLayout = 'header' | 'tabber'
 export type TPostLayout = 'upvote_first' | 'comment_first'
 export type TChangelogLayout = 'fold' | 'normal'
 
+export type TGlobalLayout = {
+  primaryColor: TColorName
+  post: TPostLayout
+  banner: TBannerLayout
+  changelog: TChangelogLayout
+}
+
 export type TCollectionFolder = {
   id: TID
   title: string

src/spec/index.ts

@@ -92,6 +92,7 @@ export type {
   TPagedCollectionFolder,
   TDocument,
   TArticle,
+  TArticleEntries,
   TArticleMeta,
   TPost,
   TBlog,
@@ -114,6 +115,7 @@ export type {
   TBannerLayout,
   TPostLayout,
   TChangelogLayout,
+  TGlobalLayout,
   TCommentsState,
   TWorksTab,
   TBlogTab,

src/widgets/PagedArticles/ArticleList.tsx

@@ -1,8 +1,10 @@
 /* eslint-disable react/display-name */
 
-import { Fragment, memo } from 'react'
+import { Fragment, memo, FC } from 'react'
 
 import { THREAD, TYPE } from '@/constant'
+import type { TArticleEntries } from '@/spec'
+
 import PostItem from '@/widgets/PostItem'
 import JobItem from '@/widgets/JobItem'
 import BlogItem from '@/widgets/BlogItem'
@@ -12,9 +14,18 @@ import MasonryCards from '@/widgets/MasonryCards'
 import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
 import { EmptyThread } from './dynamic'
 
-const ArticleList = (props) => {
-  const { curCommunity, thread, resState, entries, c11n } = props
+import type { TProps as TBaseTProps } from '.'
+
+type TProps = { entries: TArticleEntries } & Omit<TBaseTProps, 'data'>
 
+const ArticleList: FC<TProps> = ({
+  curCommunity,
+  thread,
+  resState,
+  entries,
+  c11n,
+  globalLayout,
+}) => {
   // switch between threads
   if (resState === TYPE.RES_STATE.LOADING && entries.length === 0) {
     return <LavaLampLoading top={20} left={30} />
@@ -73,6 +84,7 @@ const ArticleList = (props) => {
               article={entry}
               c11n={c11n}
               curCommunity={curCommunity}
+              layout={globalLayout.post}
             />
           ))}
         </Fragment>

src/widgets/PagedArticles/index.tsx

@@ -13,6 +13,7 @@ import type {
   TPagedArticles,
   TResState,
   TC11N,
+  TGlobalLayout,
 } from '@/spec'
 import { EVENT } from '@/constant'
 import { send } from '@/utils/helper'
@@ -24,14 +25,15 @@ import ArticleList from './ArticleList'
 /* eslint-disable-next-line */
 const log = buildLog('c:PagedArticles:index')
 
-type TProps = {
+export type TProps = {
   curCommunity?: TCommunity | null
   thread: TThread
   data: TPagedArticles
   resState: TResState
   // TODO: remove
   emptyPrefix?: string
   c11n: TC11N
+  globalLayout: TGlobalLayout
 }
 
 const PagedArticles: FC<TProps> = ({
@@ -41,6 +43,7 @@ const PagedArticles: FC<TProps> = ({
   resState,
   emptyPrefix,
   c11n,
+  globalLayout,
 }) => {
   const { entries, ...pagi } = data
 
@@ -53,6 +56,7 @@ const PagedArticles: FC<TProps> = ({
         resState={resState}
         emptyPrefix={emptyPrefix}
         c11n={c11n}
+        globalLayout={globalLayout}
       />
 
       <Pagi

src/widgets/PostItem/index.tsx

@@ -6,7 +6,14 @@
 
 import { FC, memo, Fragment } from 'react'
 
-import type { TCommunity, TPost, TUser, TAccount, TC11N } from '@/spec'
+import type {
+  TCommunity,
+  TPost,
+  TUser,
+  TAccount,
+  TC11N,
+  TPostLayout,
+} from '@/spec'
 import { POST_LAYOUT } from '@/constant'
 import { buildLog } from '@/utils/logger'
 
@@ -21,7 +28,7 @@ type TProps = {
   curCommunity: TCommunity | null
   article: TPost
   c11n: TC11N
-  layout?: string
+  layout?: TPostLayout
   isMobilePreview?: boolean
 
   onUserSelect?: (obj: TUser) => void