feat(status): add global realtime visitors (#1204)

Author: mydearxym

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

@@ -27,6 +27,7 @@ const NON_STANDARD_COMMUNITIES = [HCN, 'feedback']
 
 type TProps = {
   community: TCommunity
+  realtimeVisitors: number
   descExpand: boolean
   activeThread: TThread
   layout: TC11NLayout
@@ -35,6 +36,7 @@ type TProps = {
 
 const ClassicLayout: FC<TProps> = ({
   community,
+  realtimeVisitors,
   descExpand,
   activeThread,
   layout,
@@ -62,6 +64,7 @@ const ClassicLayout: FC<TProps> = ({
               community={community}
               onShowEditorList={onShowEditorList}
               onShowSubscriberList={onShowSubscriberList}
+              realtimeVisitors={realtimeVisitors}
             />
           </CommunityBaseInfo>
           <TabBarWrapper>

src/containers/digest/CommunityDigest/index.tsx

@@ -33,6 +33,7 @@ const CommunityDigestContainer: FC<TProps> = ({
     accountInfo: {
       customization: { bannerLayout },
     },
+    realtimeVisitors,
     curThread,
     curCommunity,
     descExpand,
@@ -41,6 +42,7 @@ const CommunityDigestContainer: FC<TProps> = ({
   return (
     <ClassicLayout
       metric={metric}
+      realtimeVisitors={realtimeVisitors}
       community={curCommunity}
       activeThread={curThread}
       layout={bannerLayout}

src/containers/digest/CommunityDigest/store.ts

@@ -34,6 +34,10 @@ const CommunityDigest = T.model('CommunityDigest', {
       const root = getParent(self) as TRootStore
       return toJS(root.viewing)
     },
+    get realtimeVisitors(): number {
+      const root = getParent(self) as TRootStore
+      return root.footer.realtimeVisitors
+    },
     get accountInfo(): TAccount {
       const root = getParent(self) as TRootStore
       return root.accountInfo

src/containers/thread/ArticlesThread/logic.ts

@@ -166,7 +166,7 @@ export const useInit = (_store: TStore): void =>
   useEffect(() => {
     store = _store
     sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
-    console.log('### see me client side?: ', store.isEmpty)
+
     if (store.isEmpty) loadArticles()
 
     return () => {

src/containers/unit/Footer/logic.ts

@@ -1,19 +1,20 @@
 import { useEffect } from 'react'
 
 import type { TMetric } from '@/spec'
-import { EVENT, PAYMENT_USAGE } from '@/constant'
+import { EVENT } from '@/constant'
 
 import asyncSuit from '@/utils/async'
 import { send } from '@/utils/helper'
 import { buildLog } from '@/utils/logger'
-// import S from './schema'
+import uid from '@/utils/uid'
+import S from './schema'
 
 import type { TStore } from './store'
 
 /* eslint-disable-next-line */
 const log = buildLog('L:Footer2')
 
-const { SR71, $solver } = asyncSuit
+const { SR71, $solver, asyncRes } = asyncSuit
 const sr71$ = new SR71()
 
 let sub$ = null
@@ -25,11 +26,27 @@ export const toggleSponsorHelper = (): void =>
 export const onLogin = (): void => store.authWarning({ hideToast: true })
 export const queryDoraemon = (data): void => send(EVENT.QUERY_DORAMON, { data })
 
+const getOnlineStatus = (): void => {
+  sr71$.query(S.onlineStatus, { freshkey: uid.gen() })
+
+  setInterval(() => {
+    sr71$.query(S.onlineStatus, { freshkey: uid.gen() })
+  }, 10000)
+}
+
 // ###############################
 // Data & Error handlers
 // ###############################
 
-const DataSolver = []
+const DataSolver = [
+  {
+    match: asyncRes('onlineStatus'),
+    action: ({ onlineStatus }): void => {
+      const { realtimeVisitors } = onlineStatus
+      store.mark({ realtimeVisitors })
+    },
+  },
+]
 const ErrSolver = []
 
 // ###############################
@@ -40,6 +57,7 @@ export const useInit = (_store: TStore, metric: TMetric): void => {
     store = _store
     store.mark({ metric })
     sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
+    getOnlineStatus()
 
     return () => {
       sub$.unsubscribe()

src/containers/unit/Footer/schema.ts

@@ -0,0 +1,15 @@
+import { gql } from '@urql/core'
+
+const onlineStatus = gql`
+  query ($freshkey: String) {
+    onlineStatus(freshkey: $freshkey) {
+      realtimeVisitors
+    }
+  }
+`
+
+const schema = {
+  onlineStatus,
+}
+
+export default schema

src/containers/unit/Footer/store.ts

@@ -14,6 +14,8 @@ import { markStates, toJS } from '@/utils/mobx'
 const FooterStore = T.model('FooterStore', {
   showSponsor: T.optional(T.boolean, false),
   metric: T.optional(T.string, METRIC.COMMUNITY),
+  // online-status
+  realtimeVisitors: T.optional(T.number, 1),
 })
   .views((self) => ({
     get isLogin(): boolean {

src/widgets/CommunityStatesPad/NumberGroup.tsx

@@ -2,12 +2,14 @@ import { FC, memo } from 'react'
 
 import { prettyNum } from '@/utils/helper'
 import { buildLog } from '@/utils/logger'
+import AnimatedCount from '@/widgets/AnimatedCount'
 
 import {
   Wrapper,
   NumberItem,
   LargeNumberItem,
   SubNumberWrapper,
+  SubNum,
   GreenDot,
   PlusSign,
 } from './styles/number_group'
@@ -32,7 +34,7 @@ const NumberGroup: FC<TProps> = ({
 }) => {
   return (
     <Wrapper>
-      {subCount ? (
+      {subCount >= 0 ? (
         <NumberItem readOnly={readOnly} onClick={onClick}>
           {prettyNum(count)}
         </NumberItem>
@@ -42,11 +44,13 @@ const NumberGroup: FC<TProps> = ({
         </LargeNumberItem>
       )}
 
-      {subCount && (
+      {subCount >= 0 && (
         <SubNumberWrapper>
           {subPrefix === 'online' && <GreenDot />}
           {subPrefix === 'add' && <PlusSign>+</PlusSign>}
-          {subCount}
+          <SubNum>
+            <AnimatedCount count={subCount} size="tiny" />
+          </SubNum>
         </SubNumberWrapper>
       )}
     </Wrapper>

src/widgets/CommunityStatesPad/index.tsx

@@ -9,6 +9,8 @@ import { FC, memo } from 'react'
 import type { TCommunity } from '@/spec'
 import usePlatform from '@/hooks/usePlatform'
 import { buildLog } from '@/utils/logger'
+import { getRandomInt } from '@/utils/helper'
+import Tooltip from '@/widgets/Tooltip'
 
 import Charger from '@/widgets/Charger'
 
@@ -22,20 +24,23 @@ import {
   ChargeSection,
   NumberDivider,
   NumberTitle,
+  PopHint,
 } from './styles'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:CommunityStatesPad:index')
 
 type TProps = {
   community: TCommunity
+  realtimeVisitors?: number
   withoutFounding?: boolean
   onShowEditorList?: () => void
   onShowSubscriberList?: () => void
 }
 
 const CommunityStatesPad: FC<TProps> = ({
   community,
+  realtimeVisitors = 1,
   onShowEditorList = log,
   onShowSubscriberList = log,
   withoutFounding = true,
@@ -48,22 +53,35 @@ const CommunityStatesPad: FC<TProps> = ({
     <Wrapper>
       <NumberSection>
         {!isMobile && <NumberTitle>成员</NumberTitle>}
-        <NumberGroup
-          count={subscribersCount}
-          subCount={12}
-          onClick={onShowSubscriberList}
-          subPrefix="online"
-        />
+        <Tooltip
+          content={
+            <PopHint>
+              实时在线人数，后续会单独统计每个子社区的实时在线人数。
+            </PopHint>
+          }
+          placement="bottom"
+        >
+          <NumberGroup
+            count={subscribersCount}
+            subCount={realtimeVisitors}
+            onClick={onShowSubscriberList}
+            subPrefix="online"
+          />
+        </Tooltip>
       </NumberSection>
       <NumberDivider />
       <ContentSection>
         <NumberTitle readOnly>内容</NumberTitle>
-        <NumberGroup
-          subPrefix="add"
-          count={contentsCount}
-          subCount={4}
-          readOnly
-        />
+        <Tooltip
+          content={<PopHint>较前一天新增内容，功能开发中</PopHint>}
+          placement="bottom"
+        >
+          <NumberGroup
+            subPrefix="add"
+            count={contentsCount}
+            subCount={getRandomInt(1, 8)}
+          />
+        </Tooltip>
       </ContentSection>
       <NumberDivider />
       <VolunteerSection alignCenter={editorsCount < 99}>

src/widgets/CommunityStatesPad/styles/index.ts

@@ -54,3 +54,7 @@ export const NumberDivider = styled.div`
   `};
   ${css.media.mobile`display: none`};
 `
+
+export const PopHint = styled.div`
+  width: 200px;
+`