feat: add upload excel product functions

src/pages/Product/Product.js

@@ -1,22 +1,19 @@
-import React, { useContext, useEffect } from "react";
-import { Button, Card, Col, Input, message, Row, Upload } from "antd";
-import {
-  FilterOutlined,
-  PlusSquareOutlined,
-  UploadOutlined,
-} from "@ant-design/icons";
-import { BreadcumbComponent } from "../../component/BreadcumbComponent";
-import { useStore } from "../../utils/useStore";
-import { observer } from "mobx-react-lite";
-import { ProductComponent } from "../../component/ProductComponent";
-import { LINKS } from "../../routes/app";
-import { ModalLoaderContext } from "../../utils/modal";
+import React, {useContext, useEffect, useState} from "react";
+import {Button, Card, Col, Input, message, Row, Upload} from "antd";
+import {FilterOutlined, LoadingOutlined, UploadOutlined,} from "@ant-design/icons";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
+import {ProductComponent} from "../../component/ProductComponent";
+import {LINKS} from "../../routes/app";
+import {ModalLoaderContext} from "../../utils/modal";
 
-const { Search } = Input;
+const {Search} = Input;
 
 export const Product = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     const init = async () => {
@@ -49,24 +46,85 @@ export const Product = observer(() => {
     },
     {
       route: LINKS.PRODUCT,
-      name: <span style={{ fontWeight: "bold" }}>Product</span>,
+      name: <span style={{fontWeight: "bold"}}>Product</span>,
     },
   ];
 
+  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} />
+        <BreadcumbComponent data={routeData}/>
         <Card>
           {store.authentication.userData.role !== "Admin" && (
               <div>
-            <Row style={{ marginBottom: 20 }}>
+                <Row style={{marginBottom: 20}}>
                   <Col span={12}>
                     <Button
                         onClick={() => {
                           store.product.visibleModalFilterProduct = true;
                         }}
                     >
-                  <FilterOutlined />
+                      <FilterOutlined/>
                       Filter
                     </Button>
                   </Col>
@@ -94,23 +152,27 @@ 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,
                               }}
-                        icon={<UploadOutlined />}
+                              icon={<UploadOutlined/>}
                           >
                             Upload Product
                           </Button>
                         </Upload>
-                    {/* <Button
-                      onClick={() => (store.product.visibleModalProduct = true)}
-                    >
-                      <PlusSquareOutlined /> New
-                    </Button> */}
+                        {loadingState}
                       </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);
+        }
+    }
 }