refactor(redesign): explore as home page (#1250)

mydearxym · web-flow · commit 198edbc08c75 · 2022-01-10T11:38:18.000+08:00
* refactor(route): re-org explore as home page

* refactor(footer): home footer for explore page

* style(explore): adjust content pending
diff --git a/src/containers/content/ExploreContent/styles/community_card.ts b/src/containers/content/ExploreContent/styles/community_card.ts
@@ -10,9 +10,9 @@ const BaseCard = styled.div`
 
   position: relative;
   padding: 15px 20px;
-  width: 260px;
+  width: 268px;
   height: 150px;
-  margin-right: 25px;
+  margin-left: 25px;
   background: #0c3442; // ${theme('content.cardBg')};
   border: 1px solid;
   border-color: ${theme('content.cardBorder')};
diff --git a/src/containers/content/ExploreContent/styles/community_list.ts b/src/containers/content/ExploreContent/styles/community_list.ts
@@ -9,7 +9,6 @@ export const Wrapper = styled.div`
 export const InnerWrapper = styled.div`
   ${css.flex('justify-start')};
   flex-wrap: wrap;
-  margin-left: 20px;
 
   ${css.media.mobile`
     margin-left: -10px;
diff --git a/src/containers/content/ExploreContent/styles/sidebar.ts b/src/containers/content/ExploreContent/styles/sidebar.ts
@@ -8,7 +8,7 @@ export const Wrapper = styled.div`
   width: 120px;
   min-width: 120px;
   margin-right: 70px;
-  margin-left: 30px;
+  margin-left: 12px;
 `
 export const Holder = styled.div`
   flex-grow: 1;
diff --git a/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx b/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx
@@ -33,9 +33,9 @@ const TopInfo: FC<TProps> = ({
     case METRIC.WORKS_ARTICLE: {
       return <WorksArticle {...restProps} />
     }
-    case METRIC.EXPLORE: {
-      return <General title="发现社区" />
-    }
+    // case METRIC.EXPLORE: {
+    //   return <General title="发现社区" />
+    // }
     case METRIC.COOL_GUIDE: {
       return <General title="酷导航" />
     }
diff --git a/src/containers/unit/Footer/DesktopView/index.tsx b/src/containers/unit/Footer/DesktopView/index.tsx
@@ -52,22 +52,21 @@ const FooterContainer: FC<TProps> = ({
     METRIC.SPONSOR,
     METRIC.SUPPORT_US,
     METRIC.HAVE_A_DRINK,
-    METRIC.EXPLORE,
     METRIC.FRIENDS,
   ])
 
   return (
     <Wrapper testid={testid} layout={c11n.bannerLayout} metric={metric}>
       <JoinModal />
-      {metric === METRIC.COMMUNITY && isHome && (
+      {metric === METRIC.EXPLORE && (
         <HomeLayout
           metric={metric}
           layout={c11n.bannerLayout}
           onlineStatus={onlineStatus}
         />
       )}
 
-      {metric === METRIC.COMMUNITY && !isHome && (
+      {metric === METRIC.COMMUNITY && (
         <GeneralLayout metric={metric} title={curCommunity.title} />
       )}
 
diff --git a/src/pages/gallery.tsx b/src/pages/gallery.tsx
@@ -30,17 +30,10 @@ const loader = async (context, opt = {}) => {
     filter,
   )
   const sessionState = gqClient.request(P.sessionState)
-  const subscribedCommunities = gqClient.request(P.subscribedCommunities, {
-    filter: {
-      page: 1,
-      size: 30,
-    },
-  })
 
   return {
     filter,
     ...(await sessionState),
-    ...(await subscribedCommunities),
     ...(await pagedArticles),
   }
 }
@@ -78,7 +71,7 @@ export const getServerSideProps = async (context) => {
   }
 }
 
-const WorksListPage = (props) => {
+const GalleryPage = (props) => {
   const store = useStore(props)
   const seoConfig = worksSEO()
 
@@ -91,4 +84,4 @@ const WorksListPage = (props) => {
   )
 }
 
-export default WorksListPage
+export default GalleryPage
diff --git a/src/pages/hot.tsx b/src/pages/hot.tsx
@@ -0,0 +1,110 @@
+import { Provider } from 'mobx-react'
+import { GetStaticProps } from 'next'
+import { merge, toLower } from 'ramda'
+
+// import { PAGE_SIZE } from '@/config'
+import { HCN, THREAD, METRIC, ROUTE } from '@/constant'
+import { useStore } from '@/stores/init'
+
+import {
+  isArticleThread,
+  ssrPagedArticleSchema,
+  isrPagedArticlesFilter,
+  ssrParseArticleThread,
+  communitySEO,
+  singular,
+  makeGQClient,
+} from '@/utils'
+
+import GlobalLayout from '@/containers/layout/GlobalLayout'
+import CommunityContent from '@/containers/content/CommunityContent'
+
+import { P } from '@/schemas'
+
+const loader = async () => {
+  const gqClient = makeGQClient('')
+
+  // 线上环境会直接跳过 index 到这里，有待排查。。
+  const community = HCN
+  const thread = THREAD.POST
+
+  // query data
+  const curCommunity = gqClient.request(P.community, {
+    raw: community,
+    userHasLogin: false,
+  })
+
+  const pagedArticleTags = gqClient.request(P.pagedArticleTags, {
+    filter: { communityRaw: community, thread: singular(thread, 'upperCase') },
+  })
+
+  const filter = isrPagedArticlesFilter({})
+
+  const pagedArticles = isArticleThread(thread)
+    ? gqClient.request(ssrPagedArticleSchema(thread), filter)
+    : {}
+
+  return {
+    filter,
+    ...(await pagedArticleTags),
+    ...(await curCommunity),
+    ...(await pagedArticles),
+  }
+}
+
+// export const getStaticPaths: GetStaticPaths = async () => {
+//   return { paths: [], fallback: true }
+// }
+
+export const getStaticProps: GetStaticProps = async (ctx) => {
+  console.log('hot params: ', ctx)
+
+  const thread = THREAD.POST
+  const resp = await loader()
+
+  const { filter, community, pagedArticleTags } = resp
+  // console.log('iii got resp: ', resp)
+  const articleThread = ssrParseArticleThread(resp, thread, filter)
+
+  const initProps = merge(
+    {
+      // ...ssrBaseStates(resp),
+      route: {
+        communityPath: community.raw,
+        mainPath: ROUTE.HOT,
+        subPath: thread === THREAD.POST ? '' : thread,
+        thread,
+      },
+      tagsBar: {
+        tags: pagedArticleTags.entries,
+      },
+      viewing: {
+        community,
+        activeThread: toLower(thread),
+      },
+    },
+    articleThread,
+  )
+
+  return { props: { errorCode: null, ...initProps }, revalidate: 10 }
+}
+
+const CommunityPage = (props) => {
+  const store = useStore(props)
+
+  const { viewing } = store
+  const { community, activeThread } = viewing
+
+  return (
+    <Provider store={store}>
+      <GlobalLayout
+        metric={METRIC.COMMUNITY}
+        seoConfig={communitySEO(community, activeThread)}
+      >
+        <CommunityContent />
+      </GlobalLayout>
+    </Provider>
+  )
+}
+
+export default CommunityPage
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,106 +1,101 @@
+/*
+   this page is for /explore
+ */
 import { Provider } from 'mobx-react'
-import { GetStaticPaths, GetStaticProps } from 'next'
-import { merge, toLower } from 'ramda'
-
-// import { PAGE_SIZE } from '@/config'
-import { HCN, THREAD, METRIC } from '@/constant'
-import { useStore } from '@/stores/init'
+import { clone } from 'ramda'
+import { METRIC } from '@/constant'
 
+import { PAGE_SIZE } from '@/config'
 import {
-  isArticleThread,
-  ssrPagedArticleSchema,
-  isrPagedArticlesFilter,
-  ssrParseArticleThread,
-  communitySEO,
-  singular,
-  makeGQClient,
+  ssrBaseStates,
+  ssrFetchPrepare,
+  ssrGetParam,
+  refreshIfneed,
+  exploreSEO,
+  ssrError,
 } from '@/utils'
 
+import { useStore } from '@/stores/init'
+
 import GlobalLayout from '@/containers/layout/GlobalLayout'
-import CommunityContent from '@/containers/content/CommunityContent'
+import ExploreContent from '@/containers/content/ExploreContent'
 
 import { P } from '@/schemas'
 
-const loader = async () => {
-  const gqClient = makeGQClient('')
+const loader = async (context, opt = {}) => {
+  const { gqClient, userHasLogin } = ssrFetchPrepare(context, opt)
 
-  // 线上环境会直接跳过 index 到这里，有待排查。。
-  const community = HCN
-  const thread = THREAD.POST
+  const category = ssrGetParam(context, 'nc_path')
+  const page = ssrGetParam(context, 'page')
 
-  // query data
-  const curCommunity = gqClient.request(P.community, {
-    raw: community,
-    userHasLogin: false,
-  })
+  const filter = {
+    page: 1,
+    size: PAGE_SIZE.M,
+  }
 
-  const pagedArticleTags = gqClient.request(P.pagedArticleTags, {
-    filter: { communityRaw: community, thread: singular(thread, 'upperCase') },
-  })
+  const communitiesFilter = clone(filter)
+  // @ts-ignore
+  if (category) communitiesFilter.category = category
+  if (page) communitiesFilter.page = parseInt(page, 10)
 
-  const filter = isrPagedArticlesFilter({})
+  const sessionState = gqClient.request(P.sessionState)
+  const pagedCommunities = gqClient.request(P.pagedCommunities, {
+    filter: communitiesFilter,
+    userHasLogin,
+  })
+  const pagedCategories = gqClient.request(P.pagedCategories, { filter })
 
-  const pagedArticles = isArticleThread(thread)
-    ? gqClient.request(ssrPagedArticleSchema(thread), filter)
-    : {}
+  const subscribedCommunities = gqClient.request(P.subscribedCommunities, {
+    filter: {
+      page: 1,
+      size: 30,
+    },
+  })
 
   return {
-    filter,
-    ...(await pagedArticleTags),
-    ...(await curCommunity),
-    ...(await pagedArticles),
+    ...(await sessionState),
+    ...(await pagedCategories),
+    ...(await pagedCommunities),
+    ...(await subscribedCommunities),
   }
 }
 
-export const getStaticProps: GetStaticProps = async () => {
-  console.log('index params: ')
-
-  const thread = THREAD.POST
-  const resp = await loader()
-
-  const { filter, community, pagedArticleTags } = resp
-  // console.log('iii got resp: ', resp)
-  const articleThread = ssrParseArticleThread(resp, thread, filter)
-
-  const initProps = merge(
-    {
-      // ...ssrBaseStates(resp),
-      route: {
-        communityPath: community.raw,
-        mainPath: community.raw === HCN ? '' : community.raw,
-        subPath: thread === THREAD.POST ? '' : thread,
-        thread,
-      },
-      tagsBar: {
-        tags: pagedArticleTags.entries,
-      },
-      viewing: {
-        community,
-        activeThread: toLower(thread),
-      },
+export const getServerSideProps = async (context) => {
+  let resp
+  try {
+    resp = await loader(context)
+    const { sessionState } = resp
+
+    refreshIfneed(sessionState, '/explore', context)
+  } catch (e) {
+    console.log('#### error from server: ', e)
+    return ssrError(context, 'fetch', 500)
+  }
+
+  const { pagedCategories, pagedCommunities } = resp
+
+  const initProps = {
+    ...ssrBaseStates(resp),
+    exploreContent: {
+      pagedCommunities,
+      pagedCategories,
     },
-    articleThread,
-  )
+  }
 
-  return { props: { errorCode: null, ...initProps }, revalidate: 10 }
+  return { props: { errorCode: null, ...initProps } }
 }
 
-const CommunityPage = (props) => {
+const ExplorePage = (props) => {
   const store = useStore(props)
-
-  const { viewing } = store
-  const { community, activeThread } = viewing
+  const seoConfig = exploreSEO()
 
   return (
     <Provider store={store}>
-      <GlobalLayout
-        metric={METRIC.COMMUNITY}
-        seoConfig={communitySEO(community, activeThread)}
-      >
-        <CommunityContent />
+      <GlobalLayout metric={METRIC.EXPLORE} seoConfig={seoConfig} noSidebar>
+        <ExploreContent />
       </GlobalLayout>
     </Provider>
   )
 }
 
-export default CommunityPage
+export default ExplorePage
diff --git a/src/widgets/Navigator/MainEntries/DesktopView.tsx b/src/widgets/Navigator/MainEntries/DesktopView.tsx
diff --git a/src/widgets/Navigator/MorePanel/DesktopView.tsx b/src/widgets/Navigator/MorePanel/DesktopView.tsx
diff --git a/utils/constant/route.ts b/utils/constant/route.ts
diff --git a/utils/css/metric.ts b/utils/css/metric.ts

Original file line number	Diff line number	Diff line change
@@ -8,7 +8,7 @@ export const Wrapper = styled.div`
`8`	`8`	`width: 120px;`
`9`	`9`	`min-width: 120px;`
`10`	`10`	`margin-right: 70px;`
`11`		`- margin-left: 30px;`
	`11`	`+ margin-left: 12px;`
`12`	`12`	`
`13`	`13`	export const Holder = styled.div`
`14`	`14`	`flex-grow: 1;`
Original file line number	Diff line number	Diff line change
`@@ -33,9 +33,9 @@ const TopInfo: FC<TProps> = ({`
`33`	`33`	`case METRIC.WORKS_ARTICLE: {`
`34`	`34`	`return <WorksArticle {...restProps} />`
`35`	`35`	`}`
`36`		`- case METRIC.EXPLORE: {`
`37`		`- return <General title="发现社区" />`
`38`		`- }`
	`36`	`+ // case METRIC.EXPLORE: {`
	`37`	`+ // return <General title="发现社区" />`
	`38`	`+ // }`
`39`	`39`	`case METRIC.COOL_GUIDE: {`
`40`	`40`	`return <General title="酷导航" />`
`41`	`41`	`}`
Original file line number	Diff line number	Diff line change
`@@ -30,17 +30,10 @@ const loader = async (context, opt = {}) => {`
`30`	`30`	`filter,`
`31`	`31`	`)`
`32`	`32`	`const sessionState = gqClient.request(P.sessionState)`
`33`		`- const subscribedCommunities = gqClient.request(P.subscribedCommunities, {`
`34`		`- filter: {`
`35`		`- page: 1,`
`36`		`- size: 30,`
`37`		`- },`
`38`		`- })`
`39`	`33`
`40`	`34`	`return {`
`41`	`35`	`filter,`
`42`	`36`	`...(await sessionState),`
`43`		`- ...(await subscribedCommunities),`
`44`	`37`	`...(await pagedArticles),`
`45`	`38`	`}`
`46`	`39`	`}`
`@@ -78,7 +71,7 @@ export const getServerSideProps = async (context) => {`
`78`	`71`	`}`
`79`	`72`	`}`
`80`	`73`
`81`		`-const WorksListPage = (props) => {`
	`74`	`+const GalleryPage = (props) => {`
`82`	`75`	`const store = useStore(props)`
`83`	`76`	`const seoConfig = worksSEO()`
`84`	`77`
`@@ -91,4 +84,4 @@ const WorksListPage = (props) => {`
`91`	`84`	`)`
`92`	`85`	`}`
`93`	`86`
`94`		`-export default WorksListPage`
	`87`	`+export default GalleryPage`