refactor: adjust UsersThread

src/components/TabBar/alias.tsx

@@ -4,7 +4,7 @@ import { TTabItem } from '@/spec'
 
 const alias = {
   home: {
-    user: 'C友',
+    user: 'CPer',
   },
   javascript: {
     user: 'JSer',

src/containers/content/CommunityContent/styles/classic_layout.ts

@@ -7,7 +7,7 @@ import { WIDTH } from '@/utils/css/metric'
 import { BaseWrapper, BaseInnerWrapper, BaseContentWrapper } from './index'
 
 export const Wrapper = styled(BaseWrapper)`
-  ${css.flexColumn('align-both')};
+  ${css.flexColumn('justify-start', 'align-center')};
 `
 export const InnerWrapper = styled(BaseInnerWrapper)`
   ${css.flexColumn()};

src/containers/thread/UsersThread/GeoMap.js

@@ -5,9 +5,10 @@ import uid from '@/utils/uid'
 import { buildLog } from '@/utils/logger'
 
 import { Br } from '@/components/Common'
+import NoticeBar from '@/components/NoticeBar'
 import fetchGeoData from './geo_data'
 
-import { MapWrapper } from './styles'
+import { MapWrapper, RealMap, NoticeWrapper } from './styles'
 
 // TODO import it globaly, g2 is too big to load in time (> 400KB)
 // import G2 from 'g2'
@@ -171,8 +172,11 @@ class LocationMap extends React.Component {
           querySelector={`#${this.chartId}`}
           onResize={(width) => this.onResize(width)}
         />
-        <div id={this.chartId} />
-        <Br bottom={10} />
+        <RealMap id={this.chartId} />
+        <NoticeWrapper>
+          上图显示数据为本站已注册用户在中国境内的分布范围，数据由 IP
+          地址根据第三方地图服务商获得，仅供参考。
+        </NoticeWrapper>
       </MapWrapper>
     )
   }

src/containers/thread/UsersThread/MapLoading.js → src/containers/thread/UsersThread/MapLoading.tsx

@@ -1,14 +1,14 @@
-import React from 'react'
+import { FC, memo } from 'react'
 
 import { ICON_CMD } from '@/config'
 import { Wrapper, LoadingIcon, Title, Desc } from './styles/map_loading'
 
-const MapLoading = () => (
+const MapLoading: FC = () => (
   <Wrapper>
     <LoadingIcon src={`${ICON_CMD}/geo_map.svg`} />
     <Title>正在加载, 请稍等</Title>
     <Desc>如果长时间未加载，请尝试刷新页面</Desc>
   </Wrapper>
 )
 
-export default React.memo(MapLoading)
+export default memo(MapLoading)

src/containers/thread/UsersThread/NumDashboard.tsx

@@ -0,0 +1,73 @@
+import { FC, memo } from 'react'
+import { sort, isEmpty } from 'ramda'
+
+import CustomScroller from '@/components/CustomScroller'
+// import { ICON_CMD } from '../../config'
+import DotDivider from '@/components/DotDivider'
+
+import {
+  Wrapper,
+  SumWrapper,
+  DetailText,
+  DashItem,
+  Divider,
+  Title,
+  Num,
+  Chart,
+  ChartBar,
+} from './styles/num_dashboard'
+
+type TMarker = {
+  city: string
+  value: number
+  long: number
+  lant: number
+}
+
+export const sortByValue = (source: TMarker[]): TMarker[] =>
+  sort((a, b) => b.value - a.value, source)
+
+type TProps = {
+  total: number
+  geoData: TMarker[]
+}
+
+const NumDashboard: FC<TProps> = ({ total, geoData }) => {
+  if (isEmpty(geoData)) return null
+
+  const sortGeo = sortByValue(geoData) || []
+  const maxValue = sortGeo[0].value || 0
+
+  return (
+    <Wrapper>
+      {/* <SumWrapper>
+        总人数: {total} <DotDivider />{' '}
+      </SumWrapper> */}
+      <CustomScroller
+        direction="vertical"
+        height="200px"
+        showShadow={false}
+        autoHide
+      >
+        {sortGeo.map((item, idx) => (
+          <div key={item.value + item.city}>
+            <DashItem>
+              <Title active={idx <= 2}>{item.city}</Title>
+              {/* <DotDivider radius={3} space={3} />
+              <Num>{item.value}人</Num> */}
+              <Chart>
+                <ChartBar
+                  width={`${Math.floor((item.value / maxValue) * 100)}%`}
+                  active={idx <= 2}
+                />
+              </Chart>
+            </DashItem>
+            <Divider show={idx === 2} />
+          </div>
+        ))}
+      </CustomScroller>
+    </Wrapper>
+  )
+}
+
+export default memo(NumDashboard)

src/containers/thread/UsersThread/RealMap.tsx

@@ -25,30 +25,22 @@ type TProps = {
   usersThread?: TStore
 }
 
-const UsersThreadContainer: FC<TProps> = ({ usersThread }) => {
+const UsersThreadContainer: FC<TProps> = ({ usersThread: store }) => {
   /* load g2 from CDN, it's too big for dynamic import, and i am poor ..' */
   const [g2ScriptLoaded] = useScript(
     'https://a.alipayobjects.com/g/datavis/g2/2.3.13/index.js',
   )
 
-  useInit(usersThread)
+  useInit(store)
   const theme = useTheme()
 
-  const {
-    geoInfosData,
-    geoDataLoading,
-    curCommunity,
-    curTheme,
-    showNums,
-  } = usersThread
-
+  const { geoInfosData, geoDataLoading, curCommunity, curTheme } = store
   const ready = g2ScriptLoaded && !geoDataLoading
 
   return (
     <Fragment>
       {ready && (
         <NumDashboard
-          expand={showNums}
           total={curCommunity.subscribersCount}
           geoData={geoInfosData}
         />

src/containers/thread/UsersThread/logic.js → src/containers/thread/UsersThread/logic.ts

@@ -4,26 +4,25 @@ import { ERR } from '@/constant'
 import asyncSuit from '@/utils/async'
 import { errRescue } from '@/utils/helper'
 import { buildLog } from '@/utils/logger'
+
 import S from './schema'
+import type { TStore } from './store'
 
 /* eslint-disable-next-line */
 const log = buildLog('L:UsersThread')
 
 const { SR71, $solver, asyncRes, asyncErr } = asyncSuit
 const sr71$ = new SR71()
 
+let store: TStore | undefined
 let sub$ = null
-let store = null
 
-export const loadGeoData = () => {
+export const loadGeoData = (): void => {
   markLoading(true)
   const { id } = store.curCommunity
   sr71$.query(S.communityGeoInfo, { id })
 }
 
-export const ToggleNumBashboard = () =>
-  store.mark({ showNums: !store.showNums })
-
 const markLoading = (maybe = true) => store.mark({ geoDataLoading: maybe })
 // ###############################
 // Data & Error handlers
@@ -62,15 +61,15 @@ const ErrSolver = [
 // ###############################
 // init & uninit
 // ###############################
-export const useInit = (_store) => {
+export const useInit = (_store: TStore) => {
   useEffect(() => {
     store = _store
 
     sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
     loadGeoData()
 
     return () => {
-      if (store.geoDataLoading) return false
+      if (store.geoDataLoading) return
       log('===== do uninit')
       sr71$.stop()
       sub$.unsubscribe()

src/containers/thread/UsersThread/store.ts

@@ -19,7 +19,6 @@ const UsersThread = T.model('UsersThread', {
   geoInfos: T.optional(T.array(Geo), []),
   geoDataLoading: T.optional(T.boolean, false),
   // { city: '成都', value: 1, long: 104.06, lant: 30.67 }
-  showNums: T.optional(T.boolean, false),
 })
   .views((self) => ({
     get curTheme(): TTheme {

src/containers/thread/UsersThread/styles/index.ts

@@ -1,13 +1,17 @@
 import styled from 'styled-components'
 
 import css from '@/utils/css'
+import { theme } from '@/utils/themes'
 
 export const Wrapper = styled.div`
   /* 
    * magic number, if set 100% the map will jump in laptop screen 
    */
-  width: 98%;
+  width: 100%;
+  min-height: 70vh;
   position: relative;
+  padding-top: 10px;
+
   ${css.media.mobile`overflow: scroll`};
 `
 export const Title = styled.div``
@@ -16,6 +20,23 @@ export const MapWrapper = styled.div`
   /* 
    * magic number, if set 100% the map will jump in laptop screen 
    */
-  width: 99%;
+  width: 100%;
+  height: 100%;
+  min-height: 620px;
   ${css.media.mobile`width: 250%;`};
 `
+
+export const RealMap = styled.div`
+  /* border-radius: 10px; */
+  border: 1px solid;
+  border-color: #003b49;
+  border-bottom: none;
+`
+export const NoticeWrapper = styled.div`
+  width: 100%;
+  ${css.flex('justify-center')};
+  color: ${theme('thread.articleDigest')};
+  font-size: 13px;
+  margin-top: 30px;
+  opacity: 0.8;
+`

src/containers/thread/UsersThread/styles/num_dashboard.ts

@@ -6,52 +6,36 @@ import css from '@/utils/css'
 
 type TChartBar = TActive & { width: string }
 
-export const Wrapper = styled.div<{ expand: boolean }>`
+export const Wrapper = styled.div`
   ${css.flexColumn()};
   position: absolute;
   z-index: 1;
-  top: 20px;
-  left: 40px;
-  background: ${theme('content.cardBg')};
-  padding: 2px;
+  left: 20px;
+  bottom: 100px;
   border-radius: 5px;
-  width: ${({ expand }) => (expand ? '200px' : '150px')};
+  width: 150px;
   transition: width 0.2s linear;
 `
-
 export const SumWrapper = styled.div`
   ${css.flex('align-both')};
   color: ${theme('thread.articleDigest')};
 `
-
 export const DetailText = styled.div`
   color: ${theme('thread.articleDigest')};
   &:hover {
     color: ${theme('thread.articleTitle')};
     cursor: pointer;
   }
 `
-export const DashboardListWrapper = styled.div`
-  background: ${theme('content.cardBg')};
-  min-height: 200px;
-  max-height: 60vh;
-  margin-top: 3px;
-  padding-top: 2px;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-bottom: 5px;
-  overflow-y: scroll;
-`
 export const DashItem = styled.div`
   ${css.flex('align-center')};
 `
 export const Title = styled.div<TActive>`
   color: ${({ active }) =>
-    active ? theme('banner.title') : theme('thread.articleDigest')};
+    active ? theme('thread.articleTitle') : theme('thread.articleDigest')};
   width: 60px;
   text-align: center;
 `
-
 export const Divider = styled.div<TActive>`
   display: ${({ show }) => (show ? 'block' : 'none')};
   border-bottom: 1px dashed;