Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit 65bd3b5

Browse files
mydearxymmydearxym
authored
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
1 parent d124ca4 commit 65bd3b5

File tree

31 files changed

+260
-75
lines changed

31 files changed

+260
-75
lines changed

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { FC, memo } from 'react'
22

3+
import { EVENT, THREAD } from '@/constant'
4+
import { send } from '@/utils/helper'
5+
36
import {
47
Wrapper,
58
Avatar,
69
NotifyIcon,
10+
DashboardIcon,
711
SubscribeButton,
8-
SubText,
9-
// SearchIcon,
1012
} from '../styles/classic_layout/account_unit'
1113
import { mockUsers } from '@/utils/mock'
1214
// import { onShowEditorList, onShowSubscriberList, setViewport } from '../logic'
@@ -19,6 +21,12 @@ const AccountUnit: FC = () => {
1921
订阅
2022
</SubscribeButton>
2123

24+
<DashboardIcon
25+
onClick={() =>
26+
send(EVENT.COMMUNITY_THREAD_CHANGE, { data: THREAD.DASHBOARD })
27+
}
28+
/>
29+
2230
<NotifyIcon />
2331
<Avatar src={`${mockUsers(1)[0].avatar}`} />
2432
</Wrapper>

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import { FC, memo } from 'react'
22

3+
import { EVENT, THREAD } from '@/constant'
4+
import { send } from '@/utils/helper'
5+
36
import {
47
Wrapper,
58
Avatar,
9+
DashboardIcon,
610
NotifyIcon,
711
SubscribeButton,
812
} from '../styles/simple_layout/account_unit'
@@ -17,6 +21,11 @@ const AccountUnit: FC = () => {
1721
订阅
1822
</SubscribeButton>
1923

24+
<DashboardIcon
25+
onClick={() =>
26+
send(EVENT.COMMUNITY_THREAD_CHANGE, { data: THREAD.DASHBOARD })
27+
}
28+
/>
2029
<NotifyIcon />
2130
<Avatar src={`${mockUsers(1)[0].avatar}`} />
2231
</Wrapper>

‎src/containers/digest/CommunityDigest/index.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import { FC, Fragment } from 'react'
77

88
import type { TMetric } from '@/spec'
9-
import { METRIC, C11N } from '@/constant'
9+
import { METRIC, BANNER_LAYOUT } from '@/constant'
1010
import { buildLog } from '@/utils/logger'
1111
import { bond } from '@/utils/mobx'
1212

@@ -30,17 +30,11 @@ const CommunityDigestContainer: FC<TProps> = ({
3030
}) => {
3131
useInit(store)
3232

33-
const {
34-
accountInfo: {
35-
customization: { bannerLayout },
36-
},
37-
curThread,
38-
curCommunity,
39-
} = store
33+
const { curThread, curCommunity, globalLayout } = store
4034

4135
return (
4236
<Fragment>
43-
{bannerLayout === C11N.CLASSIC ? (
37+
{globalLayout.banner === BANNER_LAYOUT.TABBER ? (
4438
<ClassicLayout
4539
metric={metric}
4640
community={curCommunity}

‎src/containers/digest/CommunityDigest/store.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ import type {
1010
TViewing,
1111
TRoute,
1212
TCommunity,
13-
TAccount,
1413
TThread,
14+
TGlobalLayout,
1515
} from '@/spec'
1616
import { markStates, toJS } from '@/utils/mobx'
1717

@@ -37,10 +37,6 @@ const CommunityDigest = T.model('CommunityDigest', {
3737
const root = getParent(self) as TRootStore
3838
return root.footer.realtimeVisitors
3939
},
40-
get accountInfo(): TAccount {
41-
const root = getParent(self) as TRootStore
42-
return root.accountInfo
43-
},
4440
get curThread(): TThread {
4541
const root = getParent(self) as TRootStore
4642
return root.viewing.activeThread
@@ -50,6 +46,10 @@ const CommunityDigest = T.model('CommunityDigest', {
5046

5147
return toJS(root.viewing.community)
5248
},
49+
get globalLayout(): TGlobalLayout {
50+
const root = getParent(self) as TRootStore
51+
return root.dashboardThread.globalLayout
52+
},
5353
}))
5454
.actions((self) => ({
5555
authWarning(options): void {

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import css, { theme } from '@/utils/css'
55
import Button from '@/widgets/Buttons/Button'
66
import Img from '@/Img'
77
import NotifySVG from '@/icons/Notify'
8+
import DashboardSVG from '@/icons/Dashboard'
89
import SearchSVG from '@/icons/HeaderSearch'
910

1011
export const Wrapper = styled.div`
@@ -32,6 +33,18 @@ export const NotifyIcon = styled(NotifySVG)`
3233
margin-right: 18px;
3334
opacity: 0.8;
3435
`
36+
export const DashboardIcon = styled(DashboardSVG)`
37+
fill: ${theme('thread.articleDigest')};
38+
${css.size(20)};
39+
margin-right: 16px;
40+
opacity: 0.8;
41+
42+
&:hover {
43+
opacity: 1;
44+
cursor: pointer;
45+
}
46+
transition: all 0.2s;
47+
`
3548
export const SearchIcon = styled(SearchSVG)`
3649
fill: ${theme('thread.articleDigest')};
3750
${css.size(20)};

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import css, { theme } from '@/utils/css'
55
import Button from '@/widgets/Buttons/Button'
66
import Img from '@/Img'
77
import NotifySVG from '@/icons/Notify'
8+
import DashboardSVG from '@/icons/Dashboard'
89
import SearchSVG from '@/icons/HeaderSearch'
910

1011
export const Wrapper = styled.div`
@@ -29,6 +30,18 @@ export const NotifyIcon = styled(NotifySVG)`
2930
margin-right: 18px;
3031
opacity: 0.8;
3132
`
33+
export const DashboardIcon = styled(DashboardSVG)`
34+
fill: ${theme('thread.articleDigest')};
35+
${css.size(20)};
36+
margin-right: 16px;
37+
opacity: 0.8;
38+
39+
&:hover {
40+
opacity: 1;
41+
cursor: pointer;
42+
}
43+
transition: all 0.2s;
44+
`
3245
export const SearchIcon = styled(SearchSVG)`
3346
fill: ${theme('thread.articleDigest')};
3447
${css.size(20)};

‎src/containers/layout/GlobalLayout/index.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,8 @@ import { SIZE, BODY_SCROLLER } from '@/constant'
1313
import { bond } from '@/utils/mobx'
1414

1515
import ThemePalette from '@/containers/layout/ThemePalette'
16-
import Header from '@/widgets/Header'
16+
// import Header from '@/widgets/Header'
1717

18-
// import Header from '@/containers/unit/Header'
1918
// import Footer from '@/containers/unit/Footer'
2019
// import ModeLine from '@/containers/unit/ModeLine'
2120

@@ -62,7 +61,7 @@ const GlobalLayoutContainer: FC<TProps> = ({
6261
// load debug graph
6362
useInit(store, { isMobile })
6463

65-
const { accountInfo, sidebarPin, curCommunity, wallpaper, wallpapers } = store
64+
const { sidebarPin, wallpaper, wallpapers } = store
6665

6766
return (
6867
<ThemePalette>
@@ -87,11 +86,11 @@ const GlobalLayoutContainer: FC<TProps> = ({
8786
<ContentWrapper offsetLeft={sidebarPin}>
8887
{/* @ts-ignore */}
8988

90-
<Header
89+
{/* <Header
9190
metric={metric}
9291
accountInfo={accountInfo}
9392
community={curCommunity}
94-
/>
93+
/> */}
9594
<BodyWrapper isMobile={isMobile}>
9695
{childrenWithProps(children, { metric })}
9796
</BodyWrapper>

‎src/containers/thread/ArticlesThread/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ const ArticlesThreadContainer: FC<TProps> = ({ articlesThread: store }) => {
5555
c11n,
5656
resState,
5757
mode,
58+
globalLayout,
5859
} = store
5960
const { pageNumber, totalCount } = pagedArticlesData
6061

@@ -92,6 +93,7 @@ const ArticlesThreadContainer: FC<TProps> = ({ articlesThread: store }) => {
9293
thread={curThread}
9394
resState={resState as TResState}
9495
c11n={c11n}
96+
globalLayout={globalLayout}
9597
/>
9698
)}
9799
{mode === 'search' && <FaqList mode="search-hint" />}

‎src/containers/thread/ArticlesThread/store.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import type {
1717
TThread,
1818
TArticleFilter,
1919
TC11N,
20+
TGlobalLayout,
2021
} from '@/spec'
2122

2223
import { TYPE } from '@/constant'
@@ -109,14 +110,16 @@ const ArticlesThread = T.model('ArticlesThread', {
109110
const slf = self as TStore
110111
return `paged${plural(slf.curThread, 'titleCase')}`
111112
},
113+
get globalLayout(): TGlobalLayout {
114+
const root = getParent(self) as TRootStore
115+
return root.dashboardThread.globalLayout
116+
},
112117
}))
113118
.actions((self) => ({
114119
afterInitLoading(): void {
115120
const slf = self as TStore
116121
const { totalCount } = slf.pagedArticlesData
117122

118-
console.log('totalCount -> ', totalCount)
119-
120123
if (totalCount === 0) {
121124
self.resState = TYPE.RES_STATE.EMPTY
122125
} else {

‎src/containers/thread/ChangelogThread/index.tsx‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@
55

66
import { FC } from 'react'
77

8-
// import { buildLog } from '@/utils/logger'
8+
import { CHANGELOG_LAYOUT } from '@/constant'
99
import { bond } from '@/utils/mobx'
1010

1111
import ChangelogItem from '@/widgets/ChangelogItem'
12+
1213
import Filters from './Filters'
1314

1415
import type { TStore } from './store'
@@ -27,23 +28,26 @@ const ChangelogThreadContainer: FC<TProps> = ({
2728
testid = 'changelog-thread',
2829
}) => {
2930
useInit(store)
31+
const { globalLayout } = store
3032

31-
const layout = 'outline'
3233
return (
3334
<Wrapper testid={testid}>
3435
<MainWrapper>
35-
<ChangelogItem />
36-
37-
{layout === 'outline' && <PreviousTitle>历史版本</PreviousTitle>}
38-
<ChangelogItem layout={layout} />
39-
<ChangelogItem layout={layout} />
40-
<ChangelogItem layout={layout} />
41-
<ChangelogItem layout={layout} />
42-
<ChangelogItem layout={layout} />
43-
<ChangelogItem layout={layout} />
44-
<ChangelogItem layout={layout} />
45-
<ChangelogItem layout={layout} />
46-
<ChangelogItem layout={layout} />
36+
<ChangelogItem layout={globalLayout.changelog} />
37+
38+
{globalLayout.changelog === CHANGELOG_LAYOUT.FOLD && (
39+
<PreviousTitle>历史版本</PreviousTitle>
40+
)}
41+
42+
<ChangelogItem layout={globalLayout.changelog} />
43+
<ChangelogItem layout={globalLayout.changelog} />
44+
<ChangelogItem layout={globalLayout.changelog} />
45+
<ChangelogItem layout={globalLayout.changelog} />
46+
<ChangelogItem layout={globalLayout.changelog} />
47+
<ChangelogItem layout={globalLayout.changelog} />
48+
<ChangelogItem layout={globalLayout.changelog} />
49+
<ChangelogItem layout={globalLayout.changelog} />
50+
<ChangelogItem layout={globalLayout.changelog} />
4751
</MainWrapper>
4852
<Filters />
4953
</Wrapper>

0 commit comments

Comments
 (0)