fix & add

src/component/Test1.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Avatar, Button, Input, Select, Table } from 'antd';
+import { Avatar, Button, Input, Select, Table, Pagination, message, Spin,Image } from 'antd';
 import axios from 'axios';
 import moment from 'moment';
 import DatePicker from "react-datepicker";
@@ -7,16 +7,17 @@ import "react-datepicker/dist/react-datepicker.css";
 import 'antd/dist/antd.css';
 
 const columns = [
+
     {
         title: 'Avt Origin',
         dataIndex: 'url_origin_img',
-        render: (url_origin_img) => <Avatar src={url_origin_img} size={100} />,
+        render: (url_origin_img) => <Image preview={false} src={url_origin_img} height={100} width={100} />,
         width: '20%',
     },
     {
         title: 'Avt Input',
         dataIndex: 'url_input_img',
-        render: (url_input_img) => <Avatar src={url_input_img} size={100} />,
+        render: (url_input_img) => <Image preview={false} src={url_input_img} height={100} width={100} />,
         width: '20%',
     },
     {
@@ -57,38 +58,81 @@ const Test = () => {
     const [inputURL, setInputURL] = useState();
     const [inputConfidence, setInputConfidence] = useState();
 
+    const [loading, setLoading] = useState(false);
+
+    const [dataCount, setDataCount] = useState(0)
+
     const [itemPerPage, setItemPerPage] = useState(10)
 
 
-    const onChange = page => {
+    const onChangePage = page => {
         setCurrentPage(page);
     };
 
+    const handleChangePageSize = (e) => {
+        setItemPerPage(e)
+    }
+
+    const onChangeSize = (current, size) => {
+        setCurrentPage(current)
+        setItemPerPage(size)
+    }
+
+    useEffect(() => {
+        fetchData()
+    }, [currentPage, itemPerPage])
 
 
     const fetchData = () => {
-
         if (inputCam) {
             var splitCam = inputCam.split(',');
         }
-
+        if (inputURL) {
-
+            setLoading(true)
-        fetch(`${inputURL}/api/statistic_histories`, {
+            fetch(`${inputURL}/api/statistic_histories`, {
-            method: "POST",
+                method: "POST",
-            body: JSON.stringify({
+                body: JSON.stringify({
-                'start_date': moment(startDate).format("YYYY-MM-DD 00:00:00"),
+                    'start_date': moment(startDate).format("YYYY-MM-DD 00:00:00"),
-                'end_date': moment(endDate).format("YYYY-MM-DD 00:00:00"),
+                    'end_date': moment(endDate).format("YYYY-MM-DD 00:00:00"),
-                'index': 1,
+                    'index': currentPage,
-                'item_per_page': itemPerPage,
+                    'item_per_page': itemPerPage,
-                'confidence': +inputConfidence,
+                    'confidence': +inputConfidence,
-                "ids_camera": splitCam
+                    "ids_camera": splitCam
+                })
             })
+                .then((response) => response.json())
+                .then((data) => {
+                    if (data.status === 10000) {
+                        setData(data.data.histories)
+                        setDataCount(data.data.count)
+                        setLoading(false)
+                    }
+                    else {
+                        message.error({
+                            content: "FETCH DATA ERROR",
+                            className: 'custom-class',
+                            style: {
+                                textAlign: "left",
+                              },
+                        })
+                        setLoading(false)
+                    }
 
-        })
+                })
-            .then((response) => response.json())
+                .catch(error => {
-            .then((data) => {
+                    message.error("FETCH DATA ERROR")
-                setData(data.data)
+                    setLoading(false)
+                });
+        } else {
+            message.error({
+                content: "URL required",
+                duration: 1,
+                className: 'custom-class',
+                style: {
+                    textAlign: "left",
+                  },
             })
+        }
     }
 
     const onChangeInput = (e) => {
@@ -103,26 +147,14 @@ const Test = () => {
         setInputConfidence(e.target.value)
     }
 
-    const handleChangePageSize = (e) => {
-        setItemPerPage(e)
-        console.log(itemPerPage)
-
-    }
 
     useEffect(() => {
         fetchData()
-    }, [itemPerPage])
+    }, [currentPage])
-
+
-    console.log(itemPerPage)
+
-
-    const indexOfLastData = currentPage * itemPerPage;
-    const indexOfFirstData = indexOfLastData - itemPerPage;
-    const currentData = data.slice(indexOfFirstData, indexOfLastData)
-
-    const totalData = data.length;
 
 
-    console.log(currentData)
 
     return (
         <div style={{ width: '100%' }}>
@@ -146,7 +178,7 @@ const Test = () => {
             <div style={{ display: 'flex', justifyContent: 'center', marginTop: "30px" }}>
                 <Input
                     style={{ width: 500 }}
-                    placeholder="URL"
+                    placeholder="http://api.demo.beetai.com"
                     onChange={onChangeInputURL}
                 />
             </div>
@@ -194,18 +226,21 @@ const Test = () => {
                                 )
                             })
                         } */}
+                        <Spin spinning={loading}>
+                            <Table
+                                columns={columns}
+                                dataSource={data}
+                                pagination={false}
+                            />
+                        </Spin>
 
-                        <Table
+                        {/* <Select defaultValue="10" style={{ width: 80, marginBottom: "30px" }} onChange={handleChangePageSize}>
-                            columns={columns}
-                            dataSource={currentData}
-                        />
-                        <Select defaultValue="10" style={{ width: 80, marginBottom: "30px" }} onChange={handleChangePageSize}>
                             <Option value={10}>10</Option>
                             <Option value={50}>50</Option>
                             <Option value={100}>100</Option>
                             <Option value={1000}>1000</Option>
                             <Option value={5000}>5000</Option>
-                        </Select>
+                        </Select> */}
                     </div>
                 </div>
                 {/* <div className="right">
@@ -213,11 +248,15 @@ const Test = () => {
                 </div> */}
             </div>
             <div style={{ display: 'flex', justifyContent: 'center', marginTop: "20px" }}>
-                {/* <Pagination
+                <Pagination
                     current={currentPage}
-                    onChange={onChange}
+                    onChange={onChangePage}
-                    total={totalData}
+                    defaultPageSize={itemPerPage}
-                /> */}
+                    total={dataCount}
+                    pageSizeOptions={[20, 50, 100, 500]}
+                    onShowSizeChange={onChangeSize}
+
+                />
                 {/* <Select defaultValue="10" style={{ width: 80 }} onChange={handleChangePageSize}>
                     <Option value={10}>10</Option>
                     <Option value={20}>20</Option>