Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

refactor: adjust UsersThread#1145

Merged
mydearxym merged 1 commit intodevfromuser-thread-redesign
Aug 12, 2021
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletionsrc/components/TabBar/alias.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,7 +4,7 @@ import { TTabItem } from '@/spec'

const alias = {
home: {
user: 'C友',
user: 'CPer',
},
#"b90da118a032ef79b4f8845bbdac3ae2adbc95b44922b54b5599baad2d30a069"> user: 'JSer',
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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()};
Expand Down
10 changes: 7 additions & 3 deletionssrc/containers/thread/UsersThread/GeoMap.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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'
Expand DownExpand Up@@ -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>
)
}
Expand Down
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
importReact 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 defaultReact.memo(MapLoading)
export default memo(MapLoading)
62 changes: 0 additions & 62 deletionssrc/containers/thread/UsersThread/NumDashboard.js
View file
Open in desktop

This file was deleted.

73 changes: 73 additions & 0 deletionssrc/containers/thread/UsersThread/NumDashboard.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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)
14 changes: 3 additions & 11 deletionssrc/containers/thread/UsersThread/RealMap.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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}
/>
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand DownExpand Up@@ -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()
Expand Down
1 change: 0 additions & 1 deletionsrc/containers/thread/UsersThread/store.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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 {
Expand Down
25 changes: 23 additions & 2 deletionssrc/containers/thread/UsersThread/styles/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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``
Expand All@@ -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;
`
26 changes: 5 additions & 21 deletionssrc/containers/thread/UsersThread/styles/num_dashboard.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp