Community list

src/pages/home/market/index.tsx

@@ -1,17 +1,117 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { connect, DispatchProp, routerRedux } from 'dva';
+import { Spin, Icon } from 'antd';
+import { formatMessage } from 'umi-plugin-locale';
 import FittedImage from 'react-fitted-image';
-import banner from '@/assets/m_banner.jpg';
+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';
 
-const MarketPage: React.FC = () => {
-  return (
-    <div className={styles.container}>
-      <div className={styles.banner}>
-        <FittedImage src={banner} fit="cover" />
+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.rewardAll : 0} USDT</span>
+      </span>
+      <div className={styles.card}>
+        <div className="left">
+          <span className="line">
+            {formatMessage({
+              id: 'home.community.totalInvited',
+            }, {
+              num: info ? info.followerNumber : 0,
+            })}
+          </span>
+          <span className="line">
+            {formatMessage({
+              id: 'home.community.totalAll',
+            }, {
+              num: info ? info.communeNumber : 0,
+            })}
+          </span>
+        </div>
+
+        <div
+          className="right app-btn"
+        >
+          {formatMessage({ id: 'home.community.invite' })}
+        </div>
       </div>
     </div>
   );
-}
 
-export default MarketPage;
+  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]) || 'F'}</div>}
+      </div>
+      <div className="line">
+        <span>{it.nickname}</span>
+        <span className="time">{formatMessage({ id: 'home.community.time' })}{it.registryTime}</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);