chore(footer): home footer status (#1208)

mydearxym · web-flow · commit d6b8b879c2d8 · 2021-12-01T12:20:19.000+08:00
* chore: tmp thought

* feat(footer): add online status for home layout
diff --git a/src/containers/content/HaveADrinkContent/demo.ts b/src/containers/content/HaveADrinkContent/demo.ts
@@ -149,6 +149,11 @@ const demo = [
         text: '意指一件产品包含了所有必要的东西，开箱即用，最早来源于 Python 社区。',
         reference: 'https://qr.ae/pGmyXB',
       },
+      {
+        title: 'Snowflake ID',
+        text: 'Twitter 开发的用于标识 tweets 的分布式算法，特点之一是发布时间相近的 tweet, 其生成的 ID 也相近。',
+        reference: 'https://en.wikipedia.org/wiki/Snowflake_ID',
+      },
     ],
   },
   {
diff --git a/src/containers/unit/Footer/DesktopView/HomeLayout.tsx b/src/containers/unit/Footer/DesktopView/HomeLayout.tsx
@@ -1,7 +1,7 @@
 import { FC, memo } from 'react'
 import { useTheme } from 'styled-components'
 
-import type { TThemeMap, TC11NLayout, TMetric } from '@/spec'
+import type { TThemeMap, TC11NLayout, TMetric, TOnlineStatus } from '@/spec'
 import { GITHUB, BUILD_VERSION } from '@/config'
 import { ROUTE } from '@/constant'
 import { siteBirthDay } from '@/utils/helper'
@@ -24,9 +24,10 @@ import {
 type TProps = {
   metric: TMetric
   layout: TC11NLayout
+  onlineStatus: TOnlineStatus
 }
 
-const HomeView: FC<TProps> = ({ metric, layout }) => {
+const HomeView: FC<TProps> = ({ metric, layout, onlineStatus }) => {
   const theme = useTheme() as TThemeMap
 
   const linkColors = {
@@ -119,10 +120,10 @@ const HomeView: FC<TProps> = ({ metric, layout }) => {
             <Title>用户</Title>
             <Body>
               <Item as="span" normal>
-                注册人数: --
+                注册人数: {onlineStatus.totalSubscribes}
               </Item>
               <Item as="span" normal>
-                在线人数: --
+                在线人数: {onlineStatus.realtimeVisitors}
               </Item>
               <Item as="span" normal>
                 黑洞: --
diff --git a/src/containers/unit/Footer/DesktopView/index.tsx b/src/containers/unit/Footer/DesktopView/index.tsx
@@ -42,7 +42,7 @@ const FooterContainer: FC<TProps> = ({
 }) => {
   useInit(store, metric)
 
-  const { viewingArticle, curCommunity, c11n } = store
+  const { viewingArticle, curCommunity, c11n, onlineStatus } = store
   const isHome = curCommunity.raw === HCN
   const isGeneral = includes(metric, [
     METRIC.WORKS_ARTICLE,
@@ -59,7 +59,11 @@ const FooterContainer: FC<TProps> = ({
     <Wrapper testid={testid} layout={c11n.bannerLayout} metric={metric}>
       <JoinModal />
       {metric === METRIC.COMMUNITY && isHome && (
-        <HomeLayout metric={metric} layout={c11n.bannerLayout} />
+        <HomeLayout
+          metric={metric}
+          layout={c11n.bannerLayout}
+          onlineStatus={onlineStatus}
+        />
       )}
 
       {metric === METRIC.COMMUNITY && !isHome && (
diff --git a/src/containers/unit/Footer/store.ts b/src/containers/unit/Footer/store.ts
@@ -5,8 +5,15 @@
 
 import { types as T, getParent, Instance } from 'mobx-state-tree'
 
-import type { TRootStore, TAccount, TC11N, TArticle, TCommunity } from '@/spec'
-import { METRIC } from '@/constant'
+import type {
+  TRootStore,
+  TAccount,
+  TC11N,
+  TArticle,
+  TCommunity,
+  TOnlineStatus,
+} from '@/spec'
+import { METRIC, HCN } from '@/constant'
 import { markStates, toJS } from '@/utils/mobx'
 
 // import { VIEW, TFooterView } from './constants'
@@ -40,6 +47,22 @@ const FooterStore = T.model('FooterStore', {
       return toJS(root.viewing.community)
     },
 
+    get totalSubscribes(): number {
+      const slf = self as TStore
+      const { curCommunity } = slf
+
+      if (curCommunity.raw === HCN) {
+        return curCommunity.subscribersCount
+      }
+
+      return 0
+    },
+    get onlineStatus(): TOnlineStatus {
+      const slf = self as TStore
+      const { totalSubscribes, realtimeVisitors } = slf
+
+      return { totalSubscribes, realtimeVisitors }
+    },
     // get type(): TFooterView {
     //   const root = getParent(self) as TRootStore
     //   if (root.viewing.community.raw === HCN) return VIEW.HOME
diff --git a/src/containers/unit/TagsBar/DesktopView/Folder.tsx b/src/containers/unit/TagsBar/DesktopView/Folder.tsx
@@ -1,6 +1,6 @@
 import { FC, useState, useRef, useEffect } from 'react'
 
-import { findIndex } from 'ramda'
+import { findIndex, reverse } from 'ramda'
 
 import { ICON } from '@/config'
 import { sortByColor } from '@/utils/helper'
@@ -52,7 +52,7 @@ const Folder: FC<TProps> = ({
   const [isFolderOpen, toggleFolder] = useState(true)
   const [curDisplayCount, setCurDisplayCount] = useState(initDisplayCount)
 
-  const sortedTags = sortByColor(groupTags)
+  const sortedTags = reverse(sortByColor(groupTags))
 
   const isActiveTagInFolder =
     // @ts-ignore
diff --git a/src/spec/index.ts b/src/spec/index.ts
@@ -69,6 +69,7 @@ export type {
   TView,
   TUserActivity,
   TEditMode,
+  TOnlineStatus,
 } from './utils'
 
 export type { TGQLError } from './graphql'
diff --git a/src/spec/utils.ts b/src/spec/utils.ts
@@ -163,3 +163,8 @@ export type TUserActivity = {
   action?: string
   totalCount?: number
 }
+
+export type TOnlineStatus = {
+  totalSubscribes?: number
+  realtimeVisitors?: number
+}

Original file line number	Diff line number	Diff line change
`@@ -163,3 +163,8 @@ export type TUserActivity = {`
`163`	`163`	`action?: string`
`164`	`164`	`totalCount?: number`
`165`	`165`	`}`
	`166`	`+`
	`167`	`+export type TOnlineStatus = {`
	`168`	`+ totalSubscribes?: number`
	`169`	`+ realtimeVisitors?: number`
	`170`	`+}`