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

Commit 198edbc

Browse files
mydearxymmydearxym
authored
refactor(redesign): explore as home page (#1250)
* refactor(route): re-org explore as home page * refactor(footer): home footer for explore page * style(explore): adjust content pending
1 parent 3ef7777 commit 198edbc

File tree

12 files changed

+203
-105
lines changed

12 files changed

+203
-105
lines changed

‎src/containers/content/ExploreContent/styles/community_card.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ const BaseCard = styled.div`
1010
1111
position: relative;
1212
padding: 15px 20px;
13-
width: 260px;
13+
width: 268px;
1414
height: 150px;
15-
margin-right: 25px;
15+
margin-left: 25px;
1616
background: #0c3442; // ${theme('content.cardBg')};
1717
border: 1px solid;
1818
border-color: ${theme('content.cardBorder')};

‎src/containers/content/ExploreContent/styles/community_list.ts

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ export const Wrapper = styled.div`
99
export const InnerWrapper = styled.div`
1010
${css.flex('justify-start')};
1111
flex-wrap: wrap;
12-
margin-left: 20px;
1312
1413
${css.media.mobile`
1514
margin-left: -10px;

‎src/containers/content/ExploreContent/styles/sidebar.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const Wrapper = styled.div`
88
width: 120px;
99
min-width: 120px;
1010
margin-right: 70px;
11-
margin-left: 30px;
11+
margin-left: 12px;
1212
`
1313
export const Holder = styled.div`
1414
flex-grow: 1;

‎src/containers/unit/Footer/DesktopView/TopInfo/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ const TopInfo: FC<TProps> = ({
3333
case METRIC.WORKS_ARTICLE: {
3434
return <WorksArticle {...restProps} />
3535
}
36-
case METRIC.EXPLORE: {
37-
return <General title="发现社区" />
38-
}
36+
// case METRIC.EXPLORE: {
37+
// return <General title="发现社区" />
38+
// }
3939
case METRIC.COOL_GUIDE: {
4040
return <General title="酷导航" />
4141
}

‎src/containers/unit/Footer/DesktopView/index.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -52,22 +52,21 @@ const FooterContainer: FC<TProps> = ({
5252
METRIC.SPONSOR,
5353
METRIC.SUPPORT_US,
5454
METRIC.HAVE_A_DRINK,
55-
METRIC.EXPLORE,
5655
METRIC.FRIENDS,
5756
])
5857

5958
return (
6059
<Wrapper testid={testid} layout={c11n.bannerLayout} metric={metric}>
6160
<JoinModal />
62-
{metric === METRIC.COMMUNITY && isHome && (
61+
{metric === METRIC.EXPLORE && (
6362
<HomeLayout
6463
metric={metric}
6564
layout={c11n.bannerLayout}
6665
onlineStatus={onlineStatus}
6766
/>
6867
)}
6968

70-
{metric === METRIC.COMMUNITY && !isHome && (
69+
{metric === METRIC.COMMUNITY && (
7170
<GeneralLayout metric={metric} title={curCommunity.title} />
7271
)}
7372

‎src/pages/plaza.tsx renamed to ‎src/pages/gallery.tsx

+2-9
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,10 @@ const loader = async (context, opt = {}) => {
3030
filter,
3131
)
3232
const sessionState = gqClient.request(P.sessionState)
33-
const subscribedCommunities = gqClient.request(P.subscribedCommunities, {
34-
filter: {
35-
page: 1,
36-
size: 30,
37-
},
38-
})
3933

4034
return {
4135
filter,
4236
...(await sessionState),
43-
...(await subscribedCommunities),
4437
...(await pagedArticles),
4538
}
4639
}
@@ -78,7 +71,7 @@ export const getServerSideProps = async (context) => {
7871
}
7972
}
8073

81-
const WorksListPage = (props) => {
74+
const GalleryPage = (props) => {
8275
const store = useStore(props)
8376
const seoConfig = worksSEO()
8477

@@ -91,4 +84,4 @@ const WorksListPage = (props) => {
9184
)
9285
}
9386

94-
export default WorksListPage
87+
export default GalleryPage

‎src/pages/hot.tsx

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import { Provider } from 'mobx-react'
2+
import { GetStaticProps } from 'next'
3+
import { merge, toLower } from 'ramda'
4+
5+
// import { PAGE_SIZE } from '@/config'
6+
import { HCN, THREAD, METRIC, ROUTE } from '@/constant'
7+
import { useStore } from '@/stores/init'
8+
9+
import {
10+
isArticleThread,
11+
ssrPagedArticleSchema,
12+
isrPagedArticlesFilter,
13+
ssrParseArticleThread,
14+
communitySEO,
15+
singular,
16+
makeGQClient,
17+
} from '@/utils'
18+
19+
import GlobalLayout from '@/containers/layout/GlobalLayout'
20+
import CommunityContent from '@/containers/content/CommunityContent'
21+
22+
import { P } from '@/schemas'
23+
24+
const loader = async () => {
25+
const gqClient = makeGQClient('')
26+
27+
// 线上环境会直接跳过 index 到这里，有待排查。。
28+
const community = HCN
29+
const thread = THREAD.POST
30+
31+
// query data
32+
const curCommunity = gqClient.request(P.community, {
33+
raw: community,
34+
userHasLogin: false,
35+
})
36+
37+
const pagedArticleTags = gqClient.request(P.pagedArticleTags, {
38+
filter: { communityRaw: community, thread: singular(thread, 'upperCase') },
39+
})
40+
41+
const filter = isrPagedArticlesFilter({})
42+
43+
const pagedArticles = isArticleThread(thread)
44+
? gqClient.request(ssrPagedArticleSchema(thread), filter)
45+
: {}
46+
47+
return {
48+
filter,
49+
...(await pagedArticleTags),
50+
...(await curCommunity),
51+
...(await pagedArticles),
52+
}
53+
}
54+
55+
// export const getStaticPaths: GetStaticPaths = async () => {
56+
// return { paths: [], fallback: true }
57+
// }
58+
59+
export const getStaticProps: GetStaticProps = async (ctx) => {
60+
console.log('hot params: ', ctx)
61+
62+
const thread = THREAD.POST
63+
const resp = await loader()
64+
65+
const { filter, community, pagedArticleTags } = resp
66+
// console.log('iii got resp: ', resp)
67+
const articleThread = ssrParseArticleThread(resp, thread, filter)
68+
69+
const initProps = merge(
70+
{
71+
// ...ssrBaseStates(resp),
72+
route: {
73+
communityPath: community.raw,
74+
mainPath: ROUTE.HOT,
75+
subPath: thread === THREAD.POST ? '' : thread,
76+
thread,
77+
},
78+
tagsBar: {
79+
tags: pagedArticleTags.entries,
80+
},
81+
viewing: {
82+
community,
83+
activeThread: toLower(thread),
84+
},
85+
},
86+
articleThread,
87+
)
88+
89+
return { props: { errorCode: null, ...initProps }, revalidate: 10 }
90+
}
91+
92+
const CommunityPage = (props) => {
93+
const store = useStore(props)
94+
95+
const { viewing } = store
96+
const { community, activeThread } = viewing
97+
98+
return (
99+
<Provider store={store}>
100+
<GlobalLayout
101+
metric={METRIC.COMMUNITY}
102+
seoConfig={communitySEO(community, activeThread)}
103+
>
104+
<CommunityContent />
105+
</GlobalLayout>
106+
</Provider>
107+
)
108+
}
109+
110+
export default CommunityPage

‎src/pages/index.tsx

+69-74
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,101 @@
1+
/*
2+
this page is for /explore
3+
*/
14
import { Provider } from 'mobx-react'
2-
import { GetStaticPaths, GetStaticProps } from 'next'
3-
import { merge, toLower } from 'ramda'
4-
5-
// import { PAGE_SIZE } from '@/config'
6-
import { HCN, THREAD, METRIC } from '@/constant'
7-
import { useStore } from '@/stores/init'
5+
import { clone } from 'ramda'
6+
import { METRIC } from '@/constant'
87

8+
import { PAGE_SIZE } from '@/config'
99
import {
10-
isArticleThread,
11-
ssrPagedArticleSchema,
12-
isrPagedArticlesFilter,
13-
ssrParseArticleThread,
14-
communitySEO,
15-
singular,
16-
makeGQClient,
10+
ssrBaseStates,
11+
ssrFetchPrepare,
12+
ssrGetParam,
13+
refreshIfneed,
14+
exploreSEO,
15+
ssrError,
1716
} from '@/utils'
1817

18+
import { useStore } from '@/stores/init'
19+
1920
import GlobalLayout from '@/containers/layout/GlobalLayout'
20-
import CommunityContent from '@/containers/content/CommunityContent'
21+
import ExploreContent from '@/containers/content/ExploreContent'
2122

2223
import { P } from '@/schemas'
2324

24-
const loader = async () => {
25-
const gqClient = makeGQClient('')
25+
const loader = async (context, opt = {}) => {
26+
const { gqClient, userHasLogin } = ssrFetchPrepare(context, opt)
2627

27-
// 线上环境会直接跳过 index 到这里，有待排查。。
28-
const community = HCN
29-
const thread = THREAD.POST
28+
const category = ssrGetParam(context, 'nc_path')
29+
const page = ssrGetParam(context, 'page')
3030

31-
// query data
32-
const curCommunity = gqClient.request(P.community, {
33-
raw: community,
34-
userHasLogin: false,
35-
})
31+
const filter = {
32+
page: 1,
33+
size: PAGE_SIZE.M,
34+
}
3635

37-
const pagedArticleTags = gqClient.request(P.pagedArticleTags, {
38-
filter: { communityRaw: community, thread: singular(thread, 'upperCase') },
39-
})
36+
const communitiesFilter = clone(filter)
37+
// @ts-ignore
38+
if (category) communitiesFilter.category = category
39+
if (page) communitiesFilter.page = parseInt(page, 10)
4040

41-
const filter = isrPagedArticlesFilter({})
41+
const sessionState = gqClient.request(P.sessionState)
42+
const pagedCommunities = gqClient.request(P.pagedCommunities, {
43+
filter: communitiesFilter,
44+
userHasLogin,
45+
})
46+
const pagedCategories = gqClient.request(P.pagedCategories, { filter })
4247

43-
const pagedArticles = isArticleThread(thread)
44-
? gqClient.request(ssrPagedArticleSchema(thread), filter)
45-
: {}
48+
const subscribedCommunities = gqClient.request(P.subscribedCommunities, {
49+
filter: {
50+
page: 1,
51+
size: 30,
52+
},
53+
})
4654

4755
return {
48-
filter,
49-
...(await pagedArticleTags),
50-
...(await curCommunity),
51-
...(await pagedArticles),
56+
...(await sessionState),
57+
...(await pagedCategories),
58+
...(await pagedCommunities),
59+
...(await subscribedCommunities),
5260
}
5361
}
5462

55-
export const getStaticProps: GetStaticProps = async () => {
56-
console.log('index params: ')
57-
58-
const thread = THREAD.POST
59-
const resp = await loader()
60-
61-
const { filter, community, pagedArticleTags } = resp
62-
// console.log('iii got resp: ', resp)
63-
const articleThread = ssrParseArticleThread(resp, thread, filter)
64-
65-
const initProps = merge(
66-
{
67-
// ...ssrBaseStates(resp),
68-
route: {
69-
communityPath: community.raw,
70-
mainPath: community.raw === HCN ? '' : community.raw,
71-
subPath: thread === THREAD.POST ? '' : thread,
72-
thread,
73-
},
74-
tagsBar: {
75-
tags: pagedArticleTags.entries,
76-
},
77-
viewing: {
78-
community,
79-
activeThread: toLower(thread),
80-
},
63+
export const getServerSideProps = async (context) => {
64+
let resp
65+
try {
66+
resp = await loader(context)
67+
const { sessionState } = resp
68+
69+
refreshIfneed(sessionState, '/explore', context)
70+
} catch (e) {
71+
console.log('#### error from server: ', e)
72+
return ssrError(context, 'fetch', 500)
73+
}
74+
75+
const { pagedCategories, pagedCommunities } = resp
76+
77+
const initProps = {
78+
...ssrBaseStates(resp),
79+
exploreContent: {
80+
pagedCommunities,
81+
pagedCategories,
8182
},
82-
articleThread,
83-
)
83+
}
8484

85-
return { props: { errorCode: null, ...initProps }, revalidate: 10 }
85+
return { props: { errorCode: null, ...initProps } }
8686
}
8787

88-
const CommunityPage = (props) => {
88+
const ExplorePage = (props) => {
8989
const store = useStore(props)
90-
91-
const { viewing } = store
92-
const { community, activeThread } = viewing
90+
const seoConfig = exploreSEO()
9391

9492
return (
9593
<Provider store={store}>
96-
<GlobalLayout
97-
metric={METRIC.COMMUNITY}
98-
seoConfig={communitySEO(community, activeThread)}
99-
>
100-
<CommunityContent />
94+
<GlobalLayout metric={METRIC.EXPLORE} seoConfig={seoConfig} noSidebar>
95+
<ExploreContent />
10196
</GlobalLayout>
10297
</Provider>
10398
)
10499
}
105100

106-
export default CommunityPage
101+
export default ExplorePage

0 commit comments

Comments
 (0)