progress history report

src/components/Global/TableList.jsx

@@ -1,6 +1,6 @@
 import React, { memo, useState, useEffect, useRef } from 'react';
 import { Table, Pagination, Row, Col, Card, Grid, Button, Typography, Tag, Segmented } from 'antd';
-import { AppstoreOutlined, TableOutlined } from '@ant-design/icons';
+import { MacCommandOutlined, TableOutlined } from '@ant-design/icons';
 import CardList from './CardList';
 
 const { Text } = Typography;
@@ -18,6 +18,7 @@ const TableList = memo(function TableList({
     showDeleteDialog,
     cardColor,
     fieldColor,
+    firstLoad = true,
 }) {
     const [gridLoading, setGridLoading] = useState(false);
 
@@ -30,12 +31,19 @@ const TableList = memo(function TableList({
         total_page: 1,
     });
 
-    const [viewMode, setViewMode] = useState('list');
+    const [viewMode, setViewMode] = useState('table');
 
     const { useBreakpoint } = Grid;
 
+    const [renderCount, setRenderCount] = useState(firstLoad ? 1 : 0);
+
     useEffect(() => {
-        filter(1, pagination.current_limit);
+        if (renderCount < 1) {
+            setRenderCount(renderCount + 1);
+            return;
+        } else {
+            filter(1, pagination.current_limit);
+        }
     }, [triger]);
 
     const filter = async (currentPage, pageSize) => {
@@ -90,8 +98,8 @@ const TableList = memo(function TableList({
         <div>
             <Segmented
                 options={[
-                    { value: 'card', icon: <AppstoreOutlined /> },
                     { value: 'table', icon: <TableOutlined /> },
+                    { value: 'card', icon: <MacCommandOutlined /> },
                 ]}
                 value={viewMode}
                 onChange={setViewMode}
@@ -116,6 +124,7 @@ const TableList = memo(function TableList({
                         pagination={false}
                         loading={gridLoading}
                         scroll={{ y: 520 }}
+                        size="small"
                     />
                 </Row>
             )}