refactor(dashboard): sync layout states to global (#1351)

* refactor(dashboard): basic saving workflow

* refactor(dashboard): simulate saving

* refactor(dashboard): add entry trigger icon

* refactor(dashboard): export globalLayout to post

* refactor(dashboard): sync banner layout to global

* refactor(dashboard): sync changelog layout to global

Author: mydearxym

src/containers/digest/CommunityDigest/ClassicLayout/AccountUnit.tsx

@@ -1,12 +1,14 @@
 import { FC, memo } from 'react'
 
+import { EVENT, THREAD } from '@/constant'
+import { send } from '@/utils/helper'
+
 import {
   Wrapper,
   Avatar,
   NotifyIcon,
+  DashboardIcon,
   SubscribeButton,
-  SubText,
-  // SearchIcon,
 } from '../styles/classic_layout/account_unit'
 import { mockUsers } from '@/utils/mock'
 // import { onShowEditorList, onShowSubscriberList, setViewport } from '../logic'
@@ -19,6 +21,12 @@ const AccountUnit: FC = () => {
         订阅
       </SubscribeButton>
 
+      <DashboardIcon
+        onClick={() =>
+          send(EVENT.COMMUNITY_THREAD_CHANGE, { data: THREAD.DASHBOARD })
+        }
+      />
+
       <NotifyIcon />
       <Avatar src={`${mockUsers(1)[0].avatar}`} />
     </Wrapper>

src/containers/digest/CommunityDigest/SimpleLayout/AccountUnit.tsx

@@ -1,8 +1,12 @@
 import { FC, memo } from 'react'
 
+import { EVENT, THREAD } from '@/constant'
+import { send } from '@/utils/helper'
+
 import {
   Wrapper,
   Avatar,
+  DashboardIcon,
   NotifyIcon,
   SubscribeButton,
 } from '../styles/simple_layout/account_unit'
@@ -17,6 +21,11 @@ const AccountUnit: FC = () => {
         订阅
       </SubscribeButton>
 
+      <DashboardIcon
+        onClick={() =>
+          send(EVENT.COMMUNITY_THREAD_CHANGE, { data: THREAD.DASHBOARD })
+        }
+      />
       <NotifyIcon />
       <Avatar src={`${mockUsers(1)[0].avatar}`} />
     </Wrapper>

src/containers/digest/CommunityDigest/index.tsx

@@ -6,7 +6,7 @@
 import { FC, Fragment } from 'react'
 
 import type { TMetric } from '@/spec'
-import { METRIC, C11N } from '@/constant'
+import { METRIC, BANNER_LAYOUT } from '@/constant'
 import { buildLog } from '@/utils/logger'
 import { bond } from '@/utils/mobx'
 
@@ -30,17 +30,11 @@ const CommunityDigestContainer: FC<TProps> = ({
 }) => {
   useInit(store)
 
-  const {
-    accountInfo: {
-      customization: { bannerLayout },
-    },
-    curThread,
-    curCommunity,
-  } = store
+  const { curThread, curCommunity, globalLayout } = store
 
   return (
     <Fragment>
-      {bannerLayout === C11N.CLASSIC ? (
+      {globalLayout.banner === BANNER_LAYOUT.TABBER ? (
         <ClassicLayout
           metric={metric}
           community={curCommunity}

src/containers/digest/CommunityDigest/store.ts

@@ -10,8 +10,8 @@ import type {
   TViewing,
   TRoute,
   TCommunity,
-  TAccount,
   TThread,
+  TGlobalLayout,
 } from '@/spec'
 import { markStates, toJS } from '@/utils/mobx'
 
@@ -37,10 +37,6 @@ const CommunityDigest = T.model('CommunityDigest', {
       const root = getParent(self) as TRootStore
       return root.footer.realtimeVisitors
     },
-    get accountInfo(): TAccount {
-      const root = getParent(self) as TRootStore
-      return root.accountInfo
-    },
     get curThread(): TThread {
       const root = getParent(self) as TRootStore
       return root.viewing.activeThread
@@ -50,6 +46,10 @@ const CommunityDigest = T.model('CommunityDigest', {
 
       return toJS(root.viewing.community)
     },
+    get globalLayout(): TGlobalLayout {
+      const root = getParent(self) as TRootStore
+      return root.dashboardThread.globalLayout
+    },
   }))
   .actions((self) => ({
     authWarning(options): void {

src/containers/digest/CommunityDigest/styles/classic_layout/account_unit.ts

@@ -5,6 +5,7 @@ import css, { theme } from '@/utils/css'
 import Button from '@/widgets/Buttons/Button'
 import Img from '@/Img'
 import NotifySVG from '@/icons/Notify'
+import DashboardSVG from '@/icons/Dashboard'
 import SearchSVG from '@/icons/HeaderSearch'
 
 export const Wrapper = styled.div`
@@ -32,6 +33,18 @@ export const NotifyIcon = styled(NotifySVG)`
   margin-right: 18px;
   opacity: 0.8;
 `
+export const DashboardIcon = styled(DashboardSVG)`
+  fill: ${theme('thread.articleDigest')};
+  ${css.size(20)};
+  margin-right: 16px;
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+    cursor: pointer;
+  }
+  transition: all 0.2s;
+`
 export const SearchIcon = styled(SearchSVG)`
   fill: ${theme('thread.articleDigest')};
   ${css.size(20)};

src/containers/digest/CommunityDigest/styles/simple_layout/account_unit.ts

@@ -5,6 +5,7 @@ import css, { theme } from '@/utils/css'
 import Button from '@/widgets/Buttons/Button'
 import Img from '@/Img'
 import NotifySVG from '@/icons/Notify'
+import DashboardSVG from '@/icons/Dashboard'
 import SearchSVG from '@/icons/HeaderSearch'
 
 export const Wrapper = styled.div`
@@ -29,6 +30,18 @@ export const NotifyIcon = styled(NotifySVG)`
   margin-right: 18px;
   opacity: 0.8;
 `
+export const DashboardIcon = styled(DashboardSVG)`
+  fill: ${theme('thread.articleDigest')};
+  ${css.size(20)};
+  margin-right: 16px;
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+    cursor: pointer;
+  }
+  transition: all 0.2s;
+`
 export const SearchIcon = styled(SearchSVG)`
   fill: ${theme('thread.articleDigest')};
   ${css.size(20)};

src/containers/layout/GlobalLayout/index.tsx

@@ -13,9 +13,8 @@ import { SIZE, BODY_SCROLLER } from '@/constant'
 import { bond } from '@/utils/mobx'
 
 import ThemePalette from '@/containers/layout/ThemePalette'
-import Header from '@/widgets/Header'
+// import Header from '@/widgets/Header'
 
-// import Header from '@/containers/unit/Header'
 // import Footer from '@/containers/unit/Footer'
 // import ModeLine from '@/containers/unit/ModeLine'
 
@@ -62,7 +61,7 @@ const GlobalLayoutContainer: FC<TProps> = ({
   // load debug graph
   useInit(store, { isMobile })
 
-  const { accountInfo, sidebarPin, curCommunity, wallpaper, wallpapers } = store
+  const { sidebarPin, wallpaper, wallpapers } = store
 
   return (
     <ThemePalette>
@@ -87,11 +86,11 @@ const GlobalLayoutContainer: FC<TProps> = ({
               <ContentWrapper offsetLeft={sidebarPin}>
                 {/* @ts-ignore */}
 
-                <Header
+                {/* <Header
                   metric={metric}
                   accountInfo={accountInfo}
                   community={curCommunity}
-                />
+                /> */}
                 <BodyWrapper isMobile={isMobile}>
                   {childrenWithProps(children, { metric })}
                 </BodyWrapper>

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/ChangelogThread/index.tsx

@@ -5,10 +5,11 @@
 
 import { FC } from 'react'
 
-// import { buildLog } from '@/utils/logger'
+import { CHANGELOG_LAYOUT } from '@/constant'
 import { bond } from '@/utils/mobx'
 
 import ChangelogItem from '@/widgets/ChangelogItem'
+
 import Filters from './Filters'
 
 import type { TStore } from './store'
@@ -27,23 +28,26 @@ const ChangelogThreadContainer: FC<TProps> = ({
   testid = 'changelog-thread',
 }) => {
   useInit(store)
+  const { globalLayout } = store
 
-  const layout = 'outline'
   return (
     <Wrapper testid={testid}>
       <MainWrapper>
-        <ChangelogItem />
-
-        {layout === 'outline' && <PreviousTitle>历史版本</PreviousTitle>}
-        <ChangelogItem layout={layout} />
-        <ChangelogItem layout={layout} />
-        <ChangelogItem layout={layout} />
-        <ChangelogItem layout={layout} />
-        <ChangelogItem layout={layout} />
-        <ChangelogItem layout={layout} />
-        <ChangelogItem layout={layout} />
-        <ChangelogItem layout={layout} />
-        <ChangelogItem layout={layout} />
+        <ChangelogItem layout={globalLayout.changelog} />
+
+        {globalLayout.changelog === CHANGELOG_LAYOUT.FOLD && (
+          <PreviousTitle>历史版本</PreviousTitle>
+        )}
+
+        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={globalLayout.changelog} />
       </MainWrapper>
       <Filters />
     </Wrapper>