120 lines
3.3 KiB
TypeScript
120 lines
3.3 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { connect, DispatchProp, routerRedux } from 'dva';
|
|
import _ from 'lodash';
|
|
import { formatMessage } from 'umi-plugin-locale';
|
|
import FittedImage from 'react-fitted-image';
|
|
import { HomeCommunityModelState } from './model';
|
|
import { Inviter } from '@/types/common';
|
|
import Label from '@/components/Label';
|
|
import List from '@/components/List';
|
|
import { dispatch } from '@/utils/utils';
|
|
|
|
import styles from './style.less';
|
|
import { displayPhone } from '@/utils/transform';
|
|
|
|
const CommunityPage: React.FC<HomeCommunityModelState & DispatchProp> = ({
|
|
dispatch,
|
|
refreshingList,
|
|
loadingList,
|
|
loadingFinished,
|
|
errorList,
|
|
data,
|
|
refreshingBasic,
|
|
errorBasic,
|
|
info,
|
|
}) => {
|
|
|
|
useEffect(() => {
|
|
if (!data || errorList) {
|
|
dispatch({ type: 'homeCommunity/loadList', payload: true });
|
|
}
|
|
if (!info || errorBasic) {
|
|
dispatch({ type: 'homeCommunity/loadBasic' });
|
|
}
|
|
}, []);
|
|
|
|
const onRefresh = () => {
|
|
if (refreshingBasic || refreshingList) return;
|
|
dispatch({ type: 'homeCommunity/loadList', payload: true });
|
|
dispatch({ type: 'homeCommunity/loadBasic' });
|
|
};
|
|
|
|
const renderBanner = (
|
|
<div className={styles.banner}>
|
|
<div className="bg" />
|
|
<span className="title">{formatMessage({ id: 'home.community.total' })}</span>
|
|
<span className="content">
|
|
<span className="large">+{info ? info.reward : 0} USDT</span>
|
|
</span>
|
|
<div className={styles.card}>
|
|
<div className="left">
|
|
<span className="line">
|
|
{formatMessage({
|
|
id: 'home.community.totalInvited',
|
|
}, {
|
|
num: info ? info.follower : 0,
|
|
})}
|
|
</span>
|
|
<span className="line">
|
|
{formatMessage({
|
|
id: 'home.community.totalAll',
|
|
}, {
|
|
num: info ? info.groupScale : 0,
|
|
})}
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
className="right app-btn"
|
|
onClick={() => dispatch(routerRedux.push('/invite'))}
|
|
>
|
|
{formatMessage({ id: 'home.community.invite' })}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const renderItem = (it: Inviter) => (
|
|
<div className={styles.item} key={it.id}>
|
|
<div className="avatar">
|
|
{it.avatar ? <FittedImage
|
|
src={it.avatar}
|
|
fit="cover"
|
|
/> : <div className="fake">{(it.nickname && it.nickname[0]) || _.last(it.phone) || 'F'}</div>}
|
|
</div>
|
|
<div className="line">
|
|
<span>{it.nickname || displayPhone(it.phone)}</span>
|
|
<span className="time">{formatMessage({ id: 'home.community.time' })}{it.createdAt}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
{renderBanner}
|
|
|
|
<Label
|
|
className={styles.controller}
|
|
name={formatMessage({ id: 'home.community.title' })}
|
|
/>
|
|
|
|
<List
|
|
className={styles.list}
|
|
data={data || []}
|
|
renderItem={renderItem}
|
|
refreshing={refreshingList}
|
|
onRefresh={onRefresh}
|
|
loading={loadingList}
|
|
enableLoading={!loadingFinished}
|
|
onLoadMore={() => dispatch({ type: 'homeCommunity/loadList' })}
|
|
itemKey={data => data.id}
|
|
itemSize={60}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default connect(
|
|
({ homeCommunity } : any) => ({ ...homeCommunity }),
|
|
)(CommunityPage);
|