feat: add upload excel product functions

src/pages/Product/Product.js

@@ -1,10 +1,6 @@
-import React, { useContext, useEffect } from "react";
+import React, {useContext, useEffect, useState} from "react";
 import {Button, Card, Col, Input, message, Row, Upload} from "antd";
-import {
+import {FilterOutlined, LoadingOutlined, UploadOutlined,} from "@ant-design/icons";
-  FilterOutlined,
-  PlusSquareOutlined,
-  UploadOutlined,
-} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
@@ -17,6 +13,7 @@ const { Search } = Input;
 export const Product = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     const init = async () => {
@@ -53,6 +50,67 @@ export const Product = observer(() => {
     },
   ];
 
+  const beforeUpload = (file) => {
+    let isLt2M;
+    let allowedFile = [
+      "text/csv", "application/csv",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      "application/vnd.ms-excel.sheet.binary.macroEnabled.12",
+      "application/vnd.ms-excel",
+      "application/vnd.ms-excel.sheet.macroEnabled.12"
+    ];
+    let isValid = allowedFile.includes(file.type);
+    if (!isValid) {
+      message.error("You can only upload Excel file!");
+    }
+    isLt2M = file.size / 1024 / 1024 < 10;
+    if (!isLt2M) {
+      message.error("File must smaller than 10MB!");
+    }
+    return isValid && isLt2M ? true : Upload.LIST_IGNORE;
+  };
+
+  const uploadHandler = async (args) => {
+    const file = args.file;
+    const responseUpload = await store.product.uploadExcel(file);
+
+    if (responseUpload.status === 201) {
+      message.success("Success upload excel!");
+    } else {
+      message.error("Failed upload excel!");
+      setLoading(false);
+    }
+
+    const responseUploadProduct = await handleUploadProduct(responseUpload);
+    setLoading(false);
+  };
+
+  const handleChange = (info) => {
+    if (info.file.status === 'uploading') {
+      setLoading(true);
+    } else {
+      setLoading(false)
+    }
+  };
+
+  const handleUploadProduct = async (data) => {
+    const response = await store.product.uploadProduct({fileName: data.body.filename});
+
+    if (response.status === 201) {
+      message.success("Success Create Product by Excel!");
+    } else {
+      message.error("Failed Create Product by Excel!");
+      setLoading(false);
+    }
+    return response;
+  }
+
+  const loadingState = (
+      <div>
+        {loading ? <LoadingOutlined/> : null}
+      </div>
+  );
+
   return (
       <div className={["ppob-container"].join(" ")}>
         <BreadcumbComponent data={routeData}/>
@@ -94,9 +152,17 @@ export const Product = observer(() => {
                             textAlign: "right",
                           }}
                       >
-                    <Upload>
+                        <Upload
+                            showUploadList={false}
+                            onChange={handleChange}
+                            beforeUpload={(file) => beforeUpload(file)}
+                            customRequest={(args) => uploadHandler(args)}
+                            onRemove={(file) => {
+                              setLoading(false);
+                            }}
+                        >
                           <Button
-                        disabled={store.product.uploadBtnProduct}
+                              disabled={loading}
                               style={{
                                 marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
@@ -106,11 +172,7 @@ export const Product = observer(() => {
                             Upload Product
                           </Button>
                         </Upload>
-                    {/* <Button
+                        {loadingState}
-                      onClick={() => (store.product.visibleModalProduct = true)}
-                    >
-                      <PlusSquareOutlined /> New
-                    </Button> */}
                       </div>
                     </div>
               </Col>

src/store/product.js

@@ -107,6 +107,24 @@ export class Product {
             console.error(e);
         }
     }
+
+    async uploadExcel(data) {
+        try {
+            const response = await http.upload(data);
+            return response;
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    async uploadProduct(data) {
+        try {
+            const response = await http.post('/product/upload-product').send(data);
+            return response;
+        } catch (e) {
+            console.error(e);
+        }
+    }
 }