From 7c6d29ef7e1fc59710159153bd3bdef0e755e12f Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Thu, 12 Aug 2021 16:11:12 +0800
Subject: [PATCH] refactor: adjust UsersThread

---
 src/components/TabBar/alias.tsx               |  2 +-
 .../CommunityContent/styles/classic_layout.ts |  2 +-
 src/containers/thread/UsersThread/GeoMap.js   | 10 ++-
 .../{MapLoading.js => MapLoading.tsx}         |  6 +-
 .../thread/UsersThread/NumDashboard.js        | 62 ----------------
 .../thread/UsersThread/NumDashboard.tsx       | 73 +++++++++++++++++++
 src/containers/thread/UsersThread/RealMap.tsx | 14 +---
 .../UsersThread/{geo_data.js => geo_data.ts}  |  0
 .../thread/UsersThread/{logic.js => logic.ts} | 13 ++--
 src/containers/thread/UsersThread/store.ts    |  1 -
 .../thread/UsersThread/styles/index.ts        | 25 ++++++-
 .../UsersThread/styles/num_dashboard.ts       | 26 ++-----
 12 files changed, 122 insertions(+), 112 deletions(-)
 rename src/containers/thread/UsersThread/{MapLoading.js => MapLoading.tsx} (75%)
 delete mode 100755 src/containers/thread/UsersThread/NumDashboard.js
 create mode 100755 src/containers/thread/UsersThread/NumDashboard.tsx
 rename src/containers/thread/UsersThread/{geo_data.js => geo_data.ts} (100%)
 rename src/containers/thread/UsersThread/{logic.js => logic.ts} (88%)

diff --git a/src/components/TabBar/alias.tsx b/src/components/TabBar/alias.tsx
index 09c95a6a7..eecc6c4ce 100755
--- a/src/components/TabBar/alias.tsx
+++ b/src/components/TabBar/alias.tsx
@@ -4,7 +4,7 @@ import { TTabItem } from '@/spec'
 
 const alias = {
   home: {
-    user: 'C友',
+    user: 'CPer',
   },
   javascript: {
     user: 'JSer',
diff --git a/src/containers/content/CommunityContent/styles/classic_layout.ts b/src/containers/content/CommunityContent/styles/classic_layout.ts
index a2d5be348..9b6d1ad70 100644
--- a/src/containers/content/CommunityContent/styles/classic_layout.ts
+++ b/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()};
diff --git a/src/containers/thread/UsersThread/GeoMap.js b/src/containers/thread/UsersThread/GeoMap.js
index 99054ba35..9bac4f2c5 100755
--- a/src/containers/thread/UsersThread/GeoMap.js
+++ b/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>
     )
   }
diff --git a/src/containers/thread/UsersThread/MapLoading.js b/src/containers/thread/UsersThread/MapLoading.tsx
similarity index 75%
rename from src/containers/thread/UsersThread/MapLoading.js
rename to src/containers/thread/UsersThread/MapLoading.tsx
index e7ce06662..356ace59e 100755
--- a/src/containers/thread/UsersThread/MapLoading.js
+++ b/src/containers/thread/UsersThread/MapLoading.tsx
@@ -1,9 +1,9 @@
-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>
@@ -11,4 +11,4 @@ const MapLoading = () => (
   </Wrapper>
 )
 
-export default React.memo(MapLoading)
+export default memo(MapLoading)
diff --git a/src/containers/thread/UsersThread/NumDashboard.js b/src/containers/thread/UsersThread/NumDashboard.js
deleted file mode 100755
index 813375157..000000000
--- a/src/containers/thread/UsersThread/NumDashboard.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react'
-import { sort, isEmpty } from 'ramda'
-
-// import { ICON_CMD } from '../../config'
-import DotDivider from '@/components/DotDivider'
-
-import {
-  Wrapper,
-  SumWrapper,
-  DetailText,
-  DashboardListWrapper,
-  DashItem,
-  Divider,
-  Title,
-  Num,
-  Chart,
-  ChartBar,
-} from './styles/num_dashboard'
-
-import { ToggleNumBashboard } from './logic'
-
-export const sortByValue = (source) => sort((a, b) => b.value - a.value, source)
-
-const NumDashboard = ({ total, geoData, expand }) => {
-  if (isEmpty(geoData)) return null
-
-  const sortGeo = sortByValue(geoData) || []
-  const maxValue = sortGeo[0].value || 0
-
-  return (
-    <Wrapper expand={expand}>
-      <SumWrapper>
-        总人数: {total} <DotDivider />{' '}
-        <DetailText onClick={ToggleNumBashboard}>
-          {expand ? '收起' : '详情'}
-        </DetailText>
-      </SumWrapper>
-      {expand && (
-        <DashboardListWrapper>
-          {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>
-          ))}
-        </DashboardListWrapper>
-      )}
-    </Wrapper>
-  )
-}
-
-export default React.memo(NumDashboard)
diff --git a/src/containers/thread/UsersThread/NumDashboard.tsx b/src/containers/thread/UsersThread/NumDashboard.tsx
new file mode 100755
index 000000000..f730f4c44
--- /dev/null
+++ b/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)
diff --git a/src/containers/thread/UsersThread/RealMap.tsx b/src/containers/thread/UsersThread/RealMap.tsx
index 00355275b..de96292ab 100755
--- a/src/containers/thread/UsersThread/RealMap.tsx
+++ b/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}
         />
diff --git a/src/containers/thread/UsersThread/geo_data.js b/src/containers/thread/UsersThread/geo_data.ts
similarity index 100%
rename from src/containers/thread/UsersThread/geo_data.js
rename to src/containers/thread/UsersThread/geo_data.ts
diff --git a/src/containers/thread/UsersThread/logic.js b/src/containers/thread/UsersThread/logic.ts
similarity index 88%
rename from src/containers/thread/UsersThread/logic.js
rename to src/containers/thread/UsersThread/logic.ts
index 5383a023c..e70bde852 100755
--- a/src/containers/thread/UsersThread/logic.js
+++ b/src/containers/thread/UsersThread/logic.ts
@@ -4,7 +4,9 @@ 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')
@@ -12,18 +14,15 @@ 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,7 +61,7 @@ const ErrSolver = [
 // ###############################
 // init & uninit
 // ###############################
-export const useInit = (_store) => {
+export const useInit = (_store: TStore) => {
   useEffect(() => {
     store = _store
 
@@ -70,7 +69,7 @@ export const useInit = (_store) => {
     loadGeoData()
 
     return () => {
-      if (store.geoDataLoading) return false
+      if (store.geoDataLoading) return
       log('===== do uninit')
       sr71$.stop()
       sub$.unsubscribe()
diff --git a/src/containers/thread/UsersThread/store.ts b/src/containers/thread/UsersThread/store.ts
index 6c32018bf..a9be289a8 100755
--- a/src/containers/thread/UsersThread/store.ts
+++ b/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 {
diff --git a/src/containers/thread/UsersThread/styles/index.ts b/src/containers/thread/UsersThread/styles/index.ts
index b2663facb..1fd99d912 100755
--- a/src/containers/thread/UsersThread/styles/index.ts
+++ b/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;
+`
diff --git a/src/containers/thread/UsersThread/styles/num_dashboard.ts b/src/containers/thread/UsersThread/styles/num_dashboard.ts
index 72dca4156..13b723144 100755
--- a/src/containers/thread/UsersThread/styles/num_dashboard.ts
+++ b/src/containers/thread/UsersThread/styles/num_dashboard.ts
@@ -6,24 +6,20 @@ 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 {
@@ -31,27 +27,15 @@ export const DetailText = styled.div`
     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;