refactor: tending page demo

src/containers/content/TrendingContent/NewsBoard.tsx

@@ -0,0 +1,40 @@
+import { FC, memo } from 'react'
+
+import CustomScroller from '@/widgets/CustomScroller'
+import FeedsBar from '@/widgets/FeedsBar'
+import NoticeBar from '@/widgets/NoticeBar'
+
+import { Wrapper, ShadowBarHolder } from './styles/news_board'
+
+const NewsBoard: FC = () => {
+  return (
+    <Wrapper>
+      <CustomScroller
+        direction="horizontal"
+        height="90vh"
+        innerHeight="90vh"
+        shadowSize="large"
+        barSize="medium"
+        withBorder
+      >
+        <FeedsBar title="国外科技动态" />
+        <FeedsBar title="国内科技动态" />
+        <FeedsBar title="Github Trending" />
+        <FeedsBar title="象牙塔" />
+        <FeedsBar title="播客" />
+        <FeedsBar title="奇奇怪怪" />
+        <ShadowBarHolder />
+      </CustomScroller>
+
+      <NoticeBar
+        type="info"
+        content="UI 部分 inspired by TwitterDeck，当前内容仅为展示。自动化采集分类系统仍在开发调试中，欢迎任何形式的参与。"
+        top={15}
+        right={10}
+        noBg
+      />
+    </Wrapper>
+  )
+}
+
+export default memo(NewsBoard)

src/containers/content/TrendingContent/index.js → src/containers/content/TrendingContent/index.tsx

@@ -4,21 +4,33 @@
  *
  */
 
-import React from 'react'
+import { FC } from 'react'
+
+import type { TMetric } from '@/spec'
+import { METRIC } from '@/constant'
 
 import { buildLog } from '@/utils/logger'
 import { pluggedIn } from '@/utils/mobx'
 
 import OrButton from '@/widgets/Buttons/OrButton'
 import NewsBoard from './NewsBoard'
 
+import type { TStore } from './store'
 import { Wrapper, InnerWrapper, SwitchBtn, ContentWrapper } from './styles'
 import { useInit } from './logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:TrendingContent')
 
-const TrendingContentContainer = ({ trendingContent: store, metric }) => {
+type TProps = {
+  trendingContent?: TStore
+  metric?: TMetric
+}
+
+const TrendingContentContainer: FC<TProps> = ({
+  trendingContent: store,
+  metric = METRIC.TRENDING,
+}) => {
   useInit(store)
 
   return (
@@ -27,17 +39,16 @@ const TrendingContentContainer = ({ trendingContent: store, metric }) => {
         <SwitchBtn>
           <OrButton
             direction="column"
-            type="primary"
-            activeKey="inside"
+            activeKey="outside"
             group={[
-              {
-                key: 'inside',
-                title: '站内',
-              },
               {
                 key: 'outside',
                 title: '站外',
               },
+              {
+                key: 'inside',
+                title: '站内',
+              },
             ]}
           />
         </SwitchBtn>
@@ -49,4 +60,4 @@ const TrendingContentContainer = ({ trendingContent: store, metric }) => {
   )
 }
 
-export default pluggedIn(TrendingContentContainer)
+export default pluggedIn(TrendingContentContainer) as FC<TProps>

src/containers/content/TrendingContent/logic.js → src/containers/content/TrendingContent/logic.ts

@@ -1,6 +1,8 @@
 import { useEffect } from 'react'
 
 import { buildLog } from '@/utils/logger'
+
+import type { TStore } from './store'
 // import S from './service'
 
 let store = null
@@ -16,7 +18,7 @@ export const someMethod = () => {
 // init & uninit handlers
 // ###############################
 
-export const useInit = (_store) => {
+export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
     log('useInit: ', store)

src/containers/content/TrendingContent/store.js → src/containers/content/TrendingContent/store.tsx

@@ -3,20 +3,21 @@
  *
  */
 
-import { types as T, getParent } from 'mobx-state-tree'
+import { types as T, Instance } from 'mobx-state-tree'
 
 import { markStates } from '@/utils/mobx'
 
 const TrendingContent = T.model('TrendingContent', {})
   .views((self) => ({
-    get root() {
-      return getParent(self)
-    },
+    // get root() {
+    //   return getParent(self)
+    // },
   }))
   .actions((self) => ({
     mark(sobj) {
       markStates(sobj, self)
     },
   }))
 
+export type TStore = Instance<typeof TrendingContent>
 export default TrendingContent

src/containers/content/TrendingContent/styles/index.ts

@@ -1,20 +1,23 @@
 import styled from 'styled-components'
 
 // import Img from '@/Img'
-import type { TMetric } from '@/spec'
+import type { TTestable, TMetric } from '@/spec'
 import css from '@/utils/css'
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>`
   ${css.flexColumn('align-both')}
   width: 100%;
 `
+
 export const InnerWrapper = styled.div<{ metric: TMetric }>`
   ${css.flex()};
   padding: 10px 0;
   margin-top: 12px;
   width: 100%;
   ${({ metric }) => css.fitContentWidth(metric)};
-  margin-left: -80px;
+  margin-left: -85px;
 `
 export const SwitchBtn = styled.div`
   margin-right: 15px;

src/pages/trending.tsx

@@ -1,46 +1,47 @@
+import { GetServerSideProps } from 'next'
 import { Provider } from 'mobx-react'
 
 import { METRIC } from '@/constant'
 import { P } from '@/schemas'
 
-import { ssrBaseStates, ssrFetchPrepare, ssrRescue, trendingSEO } from '@/utils'
+import {
+  ssrBaseStates,
+  ssrFetchPrepare,
+  refreshIfneed,
+  trendingSEO,
+  ssrError,
+} from '@/utils'
 import GlobalLayout from '@/containers/layout/GlobalLayout'
 import TrendingContent from '@/containers/content/TrendingContent'
 
 import { useStore } from '@/stores/init'
 
 const fetchData = async (context, opt = {}) => {
   const { gqClient } = ssrFetchPrepare(context, opt)
-
   const sessionState = gqClient.request(P.sessionState)
-  const subscribedCommunities = gqClient.request(P.subscribedCommunities, {
-    filter: {
-      page: 1,
-      size: 30,
-    },
-  })
 
   return {
     ...(await sessionState),
-    ...(await subscribedCommunities),
   }
 }
 
-export const getServerSideProps = async (context) => {
+export const getServerSideProps: GetServerSideProps = async (context) => {
   let resp
   try {
     resp = await fetchData(context)
-  } catch ({ response: { errors } }) {
-    if (ssrRescue.hasLoginError(errors)) {
-      resp = await fetchData(context, { tokenExpired: true })
-    }
-  }
+    const { sessionState } = resp
 
-  const initProps = { ...ssrBaseStates(resp) }
+    refreshIfneed(sessionState, '/trending', context)
+  } catch (e) {
+    console.log('#### error from server: ', e)
+    return ssrError(context, 'fetch', 500)
+  }
 
-  return {
-    props: { errorCode: null, namespacesRequired: ['general'], ...initProps },
+  const initProps = {
+    ...ssrBaseStates(resp),
   }
+
+  return { props: { errorCode: null, ...initProps } }
 }
 
 const TrendingPage = (props) => {

src/widgets/Buttons/OrButton/HorizontalButton.tsx

@@ -13,7 +13,7 @@ import {
 type TProps = Omit<TButtonProps, 'direction'>
 
 const HorizontalButton: FC<TProps> = ({
-  onClick,
+  onClick = console.log,
   size = SIZE.SMALL,
   activeKey,
   group = [

src/widgets/Buttons/OrButton/VerticalButton.tsx

@@ -13,7 +13,7 @@ import {
 type TProps = Omit<TButtonProps, 'direction'>
 
 const VerticalButton: FC<TProps> = ({
-  onClick,
+  onClick = console.log,
   size = SIZE.SMALL,
   activeKey,
   group = [

src/widgets/Buttons/OrButton/index.tsx

@@ -9,7 +9,7 @@ export type TProps = {
   direction?: 'row' | 'column'
   size?: TSIZE_SM
   activeKey: string
-  onClick: (key: string) => void
+  onClick?: (key: string) => void
   group: {
     key: string
     title: string

src/widgets/CustomScroller/HorizontalScroller.tsx

@@ -82,7 +82,7 @@ const HorizontalScroller: FC<TProps> = ({
             onEnter={handleHideLeftShadow}
             onLeave={handleShowLeftShadow}
           />
-          <div>{children}</div>
+          {children}
           <Waypoint
             horizontal
             onEnter={handleHideRightShadow}

src/widgets/CustomScroller/styles/metrics.ts

@@ -96,6 +96,9 @@ const horizontalScrollbarHeight = (type: string): string => {
     case SIZE.MEDIUM: {
       return '8px;'
     }
+    case SIZE.LARGE: {
+      return '12px;'
+    }
     // default
     default: {
       return '10px'