refactor(prod): debug prod data & adjust (#1205)

* chore(pages): rename fetchData -> loader, inspired by remix

* refactor(community-digest): add trend-line to content & re-org

* fix(drewer): edge case judge & cyper & tags display adjust

* chore(cper): map hint & style adjust

* chore(community): use articleCount field

* chore(cper-map): scrollbar adjust & clean up

* chore(cper-map): adjust style

* refactor(community-digest): re-org number status

* chore(error-links): fix wrong links & footer logo adjust

* chore(cpers-map): adjust note text

* chore(cpers-map): adjust note text

* chore(cpers-map): re-org & adjust styles

* chore(cpers-map): re-org ranking & loading style

Author: mydearxym

package-lock.json

@@ -62,6 +62,7 @@
     "cross-env": "^7.0.2",
     "css-doodle": "^0.21.6",
     "express": "^4.16.4",
+    "g2": "^2.3.13",
     "glob": "^7.1.2",
     "graphql": "^15.5.1",
     "graphql-request": "3.5.0",

package.json

@@ -6,8 +6,8 @@ import type { TCommunity, TID } from '@/spec'
 import { NON_FILL_COMMUNITY } from '@/constant'
 import { prettyNum, cutRest } from '@/utils/helper'
 
-import TrendLine from '@/widgets/TrendLine'
 import { SpaceGrow } from '@/widgets/Common'
+import { TrendLine } from '@/widgets/dynamic'
 
 import SubscribeBtn from './SubscribeBtn'
 

src/containers/content/ExploreContent/CommunityCard.tsx

@@ -1,6 +1,7 @@
 import { FC, memo } from 'react'
 import Link from 'next/link'
 
+import { ROUTE } from '@/constant'
 import { cutRest } from '@/utils/helper'
 
 import {
@@ -26,7 +27,7 @@ const NotFound: FC<TProps> = ({ searchValue }) => {
         </EmptyTitle>
         <EmptyDesc>
           若没有你感兴趣的社区, 你可以
-          <Link href="/create/community" passHref>
+          <Link href={`/${ROUTE.APPLY_COMMUNITY}`} passHref>
             <IssueLink>参与创建</IssueLink>
           </Link>
         </EmptyDesc>

src/containers/content/ExploreContent/NotFound.tsx

@@ -8,6 +8,7 @@ const pagedCommunities = gql`
         ${F.community}
         contributesDigest
         subscribersCount
+        articlesCount
         viewerHasSubscribed @include(if: $userHasLogin)
       }
       ${F.pagi}
@@ -22,6 +23,7 @@ const searchCommunities = gql`
         ${F.community}
         contributesDigest
         subscribersCount
+        articlesCount
         viewerHasSubscribed @include(if: $userHasLogin)
       }
       ${F.pagi}

src/containers/content/ExploreContent/schema.ts

@@ -4,24 +4,19 @@ import ReactResizeDetector from 'react-resize-detector'
 import uid from '@/utils/uid'
 import { buildLog } from '@/utils/logger'
 
-import { Br } from '@/widgets/Common'
-import NoticeBar from '@/widgets/NoticeBar'
 import fetchGeoData from './geo_data'
+import { MapWrapper, RealMap, NoticeWrapper, TheLink } 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'
+import G2 from 'g2'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:LocationMap')
 
+// see example at https://antv.vision/old-site/g2/demo/10-map/map-projection.html
 class LocationMap extends React.Component {
   constructor(props) {
     super(props)
     this.chart = null
-    // if id start with number, is not valid
-    // see https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers
     this.chartId = `id-${uid.gen()}`
 
     const { curTheme } = props
@@ -68,7 +63,7 @@ class LocationMap extends React.Component {
     G2.track(false)
 
     this.chart.forceFit()
-    // animate it's to "dragy"
+    // animate it's to0 "dragy"
     this.chart.animate(false)
     this.chart.legend(false)
     this.chart.tooltip({ title: null })
@@ -159,8 +154,8 @@ class LocationMap extends React.Component {
       })
       .catch((ex) => log('parsing failed', ex))
   }
-  /* eslint-enable no-undef */
 
+  /* eslint-enable no-undef */
   render() {
     return (
       <MapWrapper>
@@ -174,8 +169,22 @@ class LocationMap extends React.Component {
         />
         <RealMap id={this.chartId} />
         <NoticeWrapper>
-          上图显示数据为本站已注册用户在中国境内的分布范围，数据由 IP
-          地址根据第三方地图服务商获得，仅供参考。
+          地理坐标信息由注册用户 IP
+          地址根据第三方地图服务商获得（城市定位仅限国内）。由定位失败或科学上网等因素导致的误差后期会专门提供手动矫正措施。全球范围内的访问数据可
+          <TheLink
+            href="https://plausible.io/coderplanets.com/countries"
+            target="_blank"
+          >
+            参考这里
+          </TheLink>
+          （台湾地区单独统计，
+          <TheLink
+            href="https://en.wikipedia.org/wiki/ISO_3166-2:TW"
+            target="_blank"
+          >
+            非技术原因
+          </TheLink>
+          ，本站不持任何政治立场）。
         </NoticeWrapper>
       </MapWrapper>
     )

src/containers/thread/CperMapThread/GeoMap.js

@@ -1,6 +1,6 @@
 import { FC, memo } from 'react'
 
-import { LavaLampLoading } from '@/widgets/dynamic'
+import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
 import { Wrapper, LoadingIcon, Desc } from './styles/map_loading'
 
 const MapLoading: FC = () => (

src/containers/thread/CperMapThread/MapLoading.tsx

@@ -2,20 +2,17 @@ import { FC, memo } from 'react'
 import { sort, isEmpty } from 'ramda'
 
 import CustomScroller from '@/widgets/CustomScroller'
-// import { ICON_CMD } from '../../config'
-import DotDivider from '@/widgets/DotDivider'
 
 import {
   Wrapper,
-  SumWrapper,
-  DetailText,
   DashItem,
   Divider,
   Title,
-  Num,
   Chart,
   ChartBar,
-} from './styles/num_dashboard'
+  TotalWrapper,
+  TotalNum,
+} from './styles/raning_board'
 
 type TMarker = {
   city: string
@@ -32,42 +29,56 @@ type TProps = {
   geoData: TMarker[]
 }
 
-const NumDashboard: FC<TProps> = ({ total, geoData }) => {
+const RankingBoard: FC<TProps> = ({ total, geoData }) => {
   if (isEmpty(geoData)) return null
 
   const sortGeo = sortByValue(geoData) || []
   const maxValue = sortGeo[0].value || 0
+  const topList = sortGeo.slice(0, 3)
+  const restList = sortGeo.slice(3)
 
   return (
     <Wrapper>
-      {/* <SumWrapper>
-        总人数: {total} <DotDivider />{' '}
-      </SumWrapper> */}
+      {topList.map((item) => (
+        <div key={item.value + item.city}>
+          <DashItem>
+            <Title active>{item.city}</Title>
+            <Chart>
+              <ChartBar
+                width={`${Math.floor((item.value / maxValue) * 100)}%`}
+                active
+              />
+            </Chart>
+          </DashItem>
+        </div>
+      ))}
+      <Divider />
+
       <CustomScroller
         direction="vertical"
-        height="200px"
+        height="180px"
         showShadow={false}
-        autoHide
+        autoHide={false}
       >
-        {sortGeo.map((item, idx) => (
+        {restList.map((item) => (
           <div key={item.value + item.city}>
             <DashItem>
-              <Title active={idx <= 2}>{item.city}</Title>
-              {/* <DotDivider radius={3} space={3} />
-              <Num>{item.value}人</Num> */}
+              <Title>{item.city}</Title>
               <Chart>
                 <ChartBar
                   width={`${Math.floor((item.value / maxValue) * 100)}%`}
-                  active={idx <= 2}
                 />
               </Chart>
             </DashItem>
-            <Divider show={idx === 2} />
           </div>
         ))}
       </CustomScroller>
+      <Divider />
+      <TotalWrapper>
+        总数: <TotalNum>{total}</TotalNum>
+      </TotalWrapper>
     </Wrapper>
   )
 }
 
-export default memo(NumDashboard)
+export default memo(RankingBoard)

src/containers/thread/CperMapThread/NumDashboard.tsx renamed to src/containers/thread/CperMapThread/RankingBoard.tsx

@@ -4,29 +4,49 @@
  *
  */
 
-import { FC, memo } from 'react'
+import { FC } from 'react'
 import dynamic from 'next/dynamic'
+import { useTheme } from 'styled-components'
 
 import { buildLog } from '@/utils/logger'
+import { pluggedIn } from '@/utils/mobx'
+
+import RankingBoard from './RankingBoard'
 import MapLoading from './MapLoading'
 
 import { Wrapper } from './styles'
+import type { TStore } from './store'
+import { useInit } from './logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:CperMapThread')
 
-export const RealMap = dynamic(() => import('./RealMap'), {
-  /* eslint-disable react/display-name */
-  loading: () => <MapLoading />,
+const GeoMap = dynamic(() => import('./GeoMap'), {
   ssr: false,
 })
 
-const CperMapThread: FC = () => {
+type TProps = {
+  cperMapThread?: TStore
+}
+
+const CperMapThreadContainer: FC<TProps> = ({ cperMapThread: store }) => {
+  useInit(store)
+  const theme = useTheme()
+
+  const { geoInfosData, geoDataLoading, curCommunity, curTheme } = store
+  const ready = !geoDataLoading
+  const markers = geoDataLoading ? [] : geoInfosData
+
+  if (!ready) {
+    return <MapLoading />
+  }
+
   return (
     <Wrapper>
-      <RealMap />
+      <RankingBoard total={curCommunity.subscribersCount} geoData={markers} />
+      <GeoMap markers={markers} curTheme={curTheme} theme={theme} />
     </Wrapper>
   )
 }
 
-export default memo(CperMapThread)
+export default pluggedIn(CperMapThreadContainer) as FC<TProps>