Merge pull request 'them tinh nang impor anh va menu' (#3) from feature/import-img into dev

Reviewed-on: huyt/fsi_project#3

app/package.json

@@ -17,9 +17,11 @@
     "react-bootstrap": "1.0.1",
     "react-datepicker": "^4.6.0",
     "react-dom": "^17.0.2",
+    "react-dropzone": "^11.5.1",
     "react-file-reader": "^1.1.4",
     "react-js-pagination": "^3.0.3",
-    "react-router-dom": "^6.2.1",
+    "react-loading-overlay": "^1.0.1",
+    "react-router-dom": "5.2.0",
     "react-scripts": "5.0.0",
     "react-spinners": "^0.11.0",
     "sweetalert": "^2.1.2",

app/src/App.css

@@ -340,3 +340,29 @@ button.close:hover {
   color: rgba(0, 0, 0, 0.6);
   font-weight: bold;
 }
+
+/* //dropzone */
+.dropzone {
+  text-align: center;
+  padding: 20px;
+  border: 3px dashed #eeeeee;
+  background-color: #fafafa;
+  color: #bdbdbd;
+  cursor: pointer;
+  margin-bottom: 20px;
+}
+
+.accept {
+  border-color: #107c10 !important;
+}
+
+.reject {
+  border-color: #58b4ff !important;
+}
+
+@media (min-width: 1024px) {
+  .m-header {
+    height: 60px;
+}
+ 
+}

app/src/App.js

@@ -2,22 +2,33 @@ import React from 'react'
 import ListItem from './components/List/ListItem';
 import Login from './components/Login/Login';
 import SearchImage from './components/SearchImg/SearchImage';
+import ImportImage from './components/ImportImg/ImportImage';
+import MenuBar from './components/layouts/MenuBar'
+import Header from './components/layouts/Header'
 import 'antd/dist/antd.css';
 import "./App.css";
-import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
+import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
 
 
 function App() {
   return (
-    <div className="Container">
+    <div>
-     <Router>
+      <Router>
-          <Routes>
+            <Switch>
-            <Route path="/" element={<Navigate replace to="/list-famous" />} />
+            <div className="m-grid m-grid--hor m-grid--root m-page">
-            <Route path='/login' element={<Login />} />
+            <Header />
-            <Route path='/search-image' element={<SearchImage />} />
+            <MenuBar />
-            <Route path="/list-famous" element={<ListItem />} />
+            <div>
-          </Routes>
+              {/* <Redirect exact from='/' to='/search-image' /> */}
-        </Router>
+              <Route path='/login' component={Login} />
+              <Route path='/import-image' component={ImportImage} />
+              <Route path='/search-image' component={SearchImage} />
+              <Route path="/list-famous" component={ListItem} />
+              </div>
+          </div>
+            </Switch>
+         
+      </Router>
     </div>
   );
 }

app/src/components/ImportImg/ImportImage.js

@@ -0,0 +1,330 @@
+import React, { Component } from "react";
+import { HOST } from '../../config';
+import swal from 'sweetalert';
+import { Redirect } from 'react-router-dom';
+import Pagination from "react-js-pagination";
+import $ from 'jquery';
+import { PulseLoader } from 'react-spinners';
+import Modalupload from '../Modal/ModalUpload';
+import ModalEditImg from '../Modal/ModalEditImg';
+import axios from 'axios';
+import { Avatar, Tooltip } from 'antd';
+import {UserOutlined} from '@ant-design/icons';
+import momment from 'moment';
+class ImportImage extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            listImgImport: [],
+            crrImg: [],
+            activePage: 1,
+            offset: 0,
+            showFirst: 0,
+            showLast: 0,
+            totalLength: 0,
+            loading: true,
+            count: 0,
+            modalShow: false,
+            dataEdit: null,
+            modalUploadShow: false,
+            dataSearch: ""
+        }
+        this.itemsPerPage = 5;
+    }
+
+    componentDidMount() {
+        this.getListImg(1);
+    }
+
+
+    getListImg = async (page) => {
+        this.setState({ loading: true });
+        try {
+            const result = await axios({
+                method: 'POST',
+                url: `${HOST}/api/face_images/search`,
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json',
+                    // 'Authorization': token
+                },
+                data: {
+                    index: page,
+                    item_per_page: this.itemsPerPage,
+                    search_data: this.state.dataSearch
+                },
+            })
+
+            if (result.data.status === 10000) {
+                this.setState({
+                    listImgImport: result.data.data,
+                    totalLength: result.data.count,
+                }, () => {
+                    this.FilterItem(this.state.activePage)
+                })
+            }
+        } catch (error) {
+            this.setState({
+            })
+            console.log(error);
+        }
+        this.setState({ loading: false });
+    }
+
+
+
+    modalClose = () => {
+        this.setState({
+            modalShow: false,
+        });
+        this.getListImg(this.state.activePage);
+    }
+
+    modalUploadClose = () => {
+        this.setState({
+            modalUploadShow: false,
+        });
+        this.getListImg(this.state.activePage);
+    }
+
+    FilterItem = (activePage) => {
+        const offset = (activePage - 1) * this.itemsPerPage;
+        this.setState({
+            offset: offset
+        })
+    }
+
+    onClickEdit = (value) => {
+        this.setState({
+            modalShow: true,
+            dataEdit: value
+        })
+    }
+
+    handlePageChange = (pageNumber) => {
+        this.setState({
+            activePage: pageNumber
+        }, () => {
+            this.getListImg(pageNumber);
+        })
+    }
+
+    onDelete = async (img) => {
+        let data = await fetch(`${HOST}/api/face_images/delete`, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+                // 'Authorization': token
+            },
+            body: JSON.stringify({ 'image_obj_id_list': [img._id] })
+        }).then((response) => {
+            return response.json()
+        });
+
+        if (data.status === 10000) {
+            var { activePage } = this.state
+            if (this.state.listImgImport.length === 1) {
+                activePage = activePage - 1
+            }
+            this.setState({
+                activePage: activePage
+            })
+            swal("Thành công", "Xoá ảnh thành công", "success")
+            this.getListImg(this.state.activePage);
+        }
+        else {
+            swal("Thất bại", "Xoá ảnh thất bại", "error");
+        }
+    }
+
+    handleOnKeyDown = e => {
+        if (e.key === 'Enter') {
+            this.getListImg(1)
+        }
+    }
+
+    reset = () => {
+        this.setState({
+            activePage: 1,
+            dataSearch: "",
+        }, () => {
+            this.getListImg(1);
+        })
+    }
+
+
+    render() {
+        // if (this.state.isLogin == false) {
+        //     return (
+        //         <Redirect to={'/login'} />
+        //     )
+        // }
+        let bulletedListImg = this.state.listImgImport.map((value, index) => {
+  
+        var listImg
+        listImg = <img key={index} style={{ width: "80px", height: "80px" }} alt="" src={`${value.image_host}`} />
+
+
+        return (
+            <tr key={index}>
+                <td>{(index + this.state.offset + 1)}</td>
+                <td>{listImg}</td>
+                <td>{value.origin_name}</td>
+                <td>{momment(value.created_time).format("DD-MM-YYYY")}</td>
+                <td>
+                    <Tooltip placement="top" title={"Sửa"}>
+                        <button
+                            onClick={() => this.onClickEdit(value)}
+                            className="m-portlet__nav-link btn m-btn m-btn--hover-warning m-btn--icon m-btn--icon-only m-btn--pill" data-tip data-for="Edit" >
+                            <i className="la la-edit" />
+                        </button>
+                    </Tooltip>
+                    <Tooltip placement="top" title={"Xoá"}>
+                        <button
+                            onClick={f => {
+                                f.preventDefault();
+                                swal({
+                                    // title: "Are you sure?",
+                                    text: "Bạn có chắc muốn xoá ảnh này",
+                                    icon: "warning",
+                                    buttons: ["Huỷ", "Xoá"],
+                                    dangerMode: true,
+                                })
+                                    .then(willDelete => {
+                                        if (willDelete) {
+                                            this.onDelete(value);
+                                        }
+                                    });
+                            }}
+                            className="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" data-tip data-for="Edit" >
+                            <i className="la la-trash" />
+                        </button>
+                    </Tooltip>
+                </td>
+            </tr>
+        )
+        });
+
+        return (
+           <div className="m-portlet m-portlet--mobile pb-3">
+                <div className="m-portlet__head">
+                    <div className="m-portlet__head-caption">
+                        <div className="m-portlet__head-title">
+                            <h3 className="m-portlet__head-text">
+                                Kho ảnh
+                            </h3>
+                        </div>
+                    </div>
+                </div>
+                <div className="m-portlet__body pt-2">
+                    <div className="row pl-4">
+                        <div className="row p-3 col-xl-11">
+                            <div className="col-lg-2 p-0 m--margin-bottom-10-tablet-and-mobile">
+                                <input type="text"
+                                    onKeyPress={(e) => this.handleOnKeyDown(e)}
+                                    onChange={(e) => {
+                                        this.setState({
+                                            dataSearch: e.target.value
+                                        })
+                                    }}
+                                    value={this.state.dataSearch}
+                                    id="inputSearch" className="form-control m-input"
+                                    placeholder="Tên ảnh..."
+                                    data-col-index={0}
+                                />
+                            </div>
+                            <div className="pl-3">
+                                <button
+                                    onClick={() => {
+                                        this.getListImg(1);
+                                        this.setState({
+                                            activePage: 1
+                                        })
+                                    }}
+                                    className="btn btn-accent m-btn m-btn--icon" id="m_search">
+                                    <span>
+                                        <i className="la la-search" />
+                                        <span>Tìm kiếm</span>
+                                    </span>
+                                </button>
+                            </div>
+                            <div className="pl-3">
+                                <button
+                                    onClick={() => {
+                                       this.reset()
+                                    }}
+                                    className="btn btn-secondary m-btn m-btn--icon" id="m_reset">
+                                    <span>
+                                        <i className="la la-rotate-left" />
+                                        <span>Tải lại</span>
+                                    </span>
+                                </button>
+                            </div>
+                        </div>
+                        <div className="m-portlet__head-tools col-xl-1 d-flex align-items-center">
+                            <button
+                                onClick={(e) => {
+                                    this.setState({
+                                        modalUploadShow: true,
+                                    })
+                                }}
+                                className="btn btn-accent m-btn m-btn--custom m-btn--icon m-btn--pill m-btn--air">
+                                <span>
+                                    <i className="la la-plus" />
+                                    <span>Tải ảnh lên</span>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                    {/*begin: Datatable */}
+                    <table className="table table-striped- table-bordered table-hover table-checkable" id="m_table_1">
+                        <thead>
+                            <tr>
+                                <th style={{width: "50px"}}>STT</th>
+                                <th>Ảnh</th>
+                                <th>Tên ảnh</th>
+                                <th>Ngày tải lên</th>
+                                <th>Thao tác</th>
+                            </tr>
+                        </thead>
+                        <tbody>{bulletedListImg}</tbody>
+                    </table>
+                    <Modalupload
+                                show={this.state.modalUploadShow}
+                                onHide={this.modalUploadClose}
+                            />
+                    <ModalEditImg
+                                show={this.state.modalShow}
+                                onHide={this.modalClose}
+                                data={this.state.dataEdit}
+                            />
+                    <PulseLoader
+                        // css={override}
+                        sizeUnit={"px"}
+                        size={12}
+                        margin={'2px'}
+                        color={'#36D7B7'}
+                        loading={this.state.loading}
+                    />
+                    <Pagination
+                        prevPageText='Trang trước'
+                        nextPageText='Trang sau'
+                        firstPageText='Trang đầu'
+                        lastPageText='Trang cuối'
+                        activePage={this.state.activePage}
+                        itemsCountPerPage={this.itemsPerPage}
+                        totalItemsCount={this.state.totalLength}
+                        pageRangeDisplayed={5}
+                        onChange={this.handlePageChange}
+                    />
+                    <div>Tổng kết quả <strong>{this.state.totalLength}</strong></div>
+                </div>
+            </div>
+        )
+    }
+}
+
+
+export default ImportImage;

app/src/components/Modal/ModalEdit.js

@@ -58,15 +58,11 @@ const Modaledit = (props) => {
 
     const click_handle = async () => {
         let dataPost = {
-            obj_id: crrData._id ? crrData._id : "",
+            origin_name : crrData.name,
-            id: crrData.id,
-            name: crrData.name,
-            birthday: crrData.birthday,
-            gender: crrData.gender ? crrData.gender : ""
         }
         const result = await axios({
             method: 'POST',
-            url: `${HOST}/api/famous_persons/insert_or_update`,
+            url: `${HOST}/api/face_images/insert_or_update`,
             headers: {
                 'Accept': 'application/json',
                 'Content-Type': 'application/json',

app/src/components/Modal/ModalEditImg.js

@@ -0,0 +1,146 @@
+import { Form, Image, Input } from 'antd';
+import moment from 'moment';
+import 'moment/locale/vi';
+import React, { Component } from 'react';
+import { Button, Modal } from 'react-bootstrap';
+import swal from 'sweetalert';
+import { HOST } from '../../config/index';
+
+class ModalEditImg extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            valueImg: {},
+            show: this.props.show
+        }
+        this.refForm = React.createRef();
+    }
+
+    UpdateNameImg = async (event) => {
+        //Insert
+        this.state.valueImg.origin_name = this.state.valueImg.origin_name.trim()
+                let data = await fetch(`${HOST}/api/face_images/insert_or_update`, {
+                    method: 'POST',
+                    headers: {
+                        'Accept': 'application/json',
+                        'Content-Type': 'application/json',
+                        // 'Authorization': token
+                    },
+                    body: JSON.stringify({
+                        "origin_name": this.state.valueImg.origin_name,
+                        "obj_id": this.state.valueImg._id
+                    })
+                }).then((response) => {
+                    return (
+                        response.json()
+                    )
+                });
+                if (data.status === 10000) {
+                    swal("Thành công!", "Cập nhật ảnh thành công!", "success", {
+                        buttons: false,
+                        timer: 1500,
+                    });
+                    return this.props.onHide();
+                }
+                else {
+                    swal("Lỗi!", "Cập nhật ảnh thất bại", "error");
+                }
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.show === true) {
+            this.setState({ valueImg: nextProps.data });
+        }
+    }
+    
+    nameHandle = (e) => {
+        var nameImg = this.state.valueImg;
+        nameImg[e.target.name] = e.target.value;
+        this.setState({
+             valueImg: nameImg 
+        });
+    }
+
+    render() {
+            
+        return (
+            <Modal
+            {...this.props}
+            animation={false}
+            size="md"
+            // keyboard={false}
+            dialogClassName={`${window.innerWidth >= 1920 ? "modal-size-res" : "modal-size"}`}
+            aria-labelledby="contained-modal-title-vcenter"
+        >
+            <Modal.Header closeButton>
+                <Modal.Title id="contained-modal-title-vcenter">Sửa thông tin ảnh
+                </Modal.Title>
+            </Modal.Header>
+                <Modal.Body>
+                    <div id="formUpdateMeeting">
+                        <div className="m-widget14 p-0">
+                            <div className="row">
+                                <div className="col-md-6 boder-right d-flex flex-column justify-content-between ">
+                                    <div className="d-flex justify-content-center">
+                                        <Image
+                                            width={240}
+                                            src={this.state.valueImg.image_host}
+                                        />
+                                    </div>
+                                </div>
+                                <div className="col-md-6 d-flex flex-column justify-content-between">
+                                    <Form
+                                        id="formEdit"
+                                        // form={form}
+                                        ref={this.refForm}
+                                        layout="vertical"
+                                        onFinish={() => this.UpdateNameImg()}
+                                        // onFinishFailed={onFinishFailed}
+                                        autoComplete="off"
+                                        initialValues={{
+                                            origin_name: this.state.valueImg.origin_name
+                                        }}
+                                    >
+
+                                        <Form.Item
+                                            label="Tên ảnh"
+                                            rules={[{ required: true, message: '' }]}
+                                            name='origin_name'
+                                        >
+                                            <Input  
+                                                value={this.state.valueImg.origin_name}
+                                                onChange={e => this.nameHandle(e)} 
+                                                name='origin_name'
+                                                 />
+                                        </Form.Item>
+
+                                        <Form.Item
+                                            label="Ngày tải lên"
+                                        >
+                                            <Input disabled value={moment(this.state.valueImg.created_time).format("DD-MM-YYYY")}
+                                                // onChange={e => UserHandle(e)} 
+                                                name='date_create' />
+                                        </Form.Item>
+
+
+
+                                    </Form>
+                                    <div className="row d-flex justify-content-end mr-1">
+                                        <Button variant="accent" className={"m-loader--light m-loader--right "}
+                                            // disabled={loading} 
+                                            onClick={() => this.refForm.current.submit()}
+                                        >Lưu</Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </Modal.Body>
+          
+        </Modal>
+        );
+    }
+}
+
+export default ModalEditImg;

app/src/components/Modal/ModalUpload.js

@@ -0,0 +1,139 @@
+import { InboxOutlined } from '@ant-design/icons';
+import { Upload } from 'antd';
+import axios from 'axios';
+import 'moment/locale/vi';
+import React, { useState } from 'react';
+import { Modal } from 'react-bootstrap';
+import Dropzone from "react-dropzone";
+import LoadingOverlay from 'react-loading-overlay';
+import { PulseLoader } from 'react-spinners';
+import swal from 'sweetalert';
+import { HOST } from '../../config/index';
+
+const { Dragger } = Upload;
+
+
+const ModalUpload = (props) => {
+    const { show, onHide } = props;
+    const [loading, setLoading] = useState(false);
+
+    const handleDrop = async acceptedFiles => {
+        let formData = new FormData()
+  
+        const fileObjects = acceptedFiles.map(file => {
+        formData.append('files', file, file.name)
+        })
+
+        setLoading(true)
+        try {
+            let result = await axios
+            .post(`${HOST}/api/files_face_import`, formData, {
+                headers: {
+                    "X-Requested-With": "XMLHttpRequest",
+                    "Content-Type": "application/x-www-form-urlencoded",
+                    "Authorization": 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJjbGFzc2lmeS9sb2dpbiJdLCJleHAiOjE2NDE5NzQ5NjV9.2F2PAUKjpfjPJKzgvzgCDtyBuTXDRl86EnJJGdYgWTM'
+                }
+            })
+            console.log(result)
+            if (result.data.status === 10000) {
+                setLoading(false)
+                swal({
+                    text: "Tải ảnh lên thành công",
+                    icon: "success",
+                    // buttons: ["Thử lại", "Huỷ"],
+                })
+                    .then(willTry => {
+                        if (willTry) {
+                            onHide()
+                        }
+                    })
+            } else if (result.data.status === 10002) {
+                swal("Thất bại", "Lỗi hệ thống!", "error")
+            } else if (result.data.status === 10003) {
+                swal("Thất bại", "Không có quyền!", "error")
+            }
+        } catch (error) {
+            console.log(error)
+            swal("Thất bại", "Tải ảnh lên thất bại!", "error")
+        }
+    }
+
+
+
+    return (
+        <Modal
+            {...props}
+            animation={false}
+            size="md"
+            backdrop={loading ? 'static' : true}
+            keyboard={false}
+            dialogClassName={`${window.innerWidth >= 1920 ? "modal-size-res" : "modal-size"}`}
+            aria-labelledby="contained-modal-title-vcenter"
+        >
+            <LoadingOverlay
+                active={loading}
+                spinner={<PulseLoader
+                    sizeUnit={"px"}
+                    size={12}
+                    margin={'2px'}
+                    color={'#36D7B7'}
+                    loading={true}
+                />}
+                styles={{
+                    overlay: (base) => ({
+                        ...base,
+                        background: 'rgba(0, 0, 0, 0.58)'
+                    })
+                }}
+
+                className="col-xl-12 p-0"
+            >
+                <Modal.Header closeButton>
+                    <Modal.Title id="contained-modal-title-vcenter">Tải ảnh lên
+                    </Modal.Title>
+                </Modal.Header>
+
+                <Modal.Body>
+                    <div className="Container-modal">
+                        <Dropzone
+                            onDrop={handleDrop}
+                            accept="image/*"
+                        // minSize={1024}
+                        // maxSize={300000}
+                        >
+                            {({
+                                getRootProps,
+                                getInputProps,
+                                isDragActive,
+                                isDragAccept,
+                                isDragReject
+                            }) => {
+                                const additionalClass = isDragAccept
+                                    ? "accept"
+                                    : isDragReject
+                                        ? "reject"
+                                        : "";
+
+                                return (
+                                    <div
+                                        {...getRootProps({
+                                            className: `dropzone ${additionalClass}`
+                                        })}
+                                    >
+                                        <input {...getInputProps()} />
+                                        <InboxOutlined style={{ fontSize: "50px" }} />
+                                        <p>Kéo thả thư mục hình ảnh, hoặc chọn ảnh để nhập</p>
+                                    </div>
+                                );
+                            }}
+                        </Dropzone>
+                    </div>
+
+                </Modal.Body>
+            </LoadingOverlay>
+
+        </Modal>
+    );
+}
+
+export default ModalUpload;

app/src/components/SearchImg/SearchImage.js

@@ -43,11 +43,13 @@ class SearchImage extends Component {
         this.onchange = this.onchange.bind(this);
         this.closeModal = this.closeModal.bind(this);
 
-        var itemsPerPage = 1;
+        var itemsPerPage = 6;
-        if ($(window).width() < 768) {
+        if ($(window).width() >= 1400 && $(window).width() < 1750) {
+            itemsPerPage = 6
+        } else if ($(window).width() <= 1280 ) {
             itemsPerPage = 6
         } else {
-            itemsPerPage = 6
+            itemsPerPage = 8
         }
         this.itemsPerPage = itemsPerPage;
 
@@ -382,7 +384,7 @@ class SearchImage extends Component {
                     <Card
                         style={{ width: 300 }}
                         cover={<ImageAntd
-                            style={{ objectFit: 'contain', maxHeight: '200px'}}
+                            style={{ objectFit: 'contain', height: '180px'}}
                             // width={200}
                             src={value.image_url} 
                           />}

app/src/components/layouts/Header.js

@@ -0,0 +1,88 @@
+import $ from 'jquery';
+import React, { Component } from 'react';
+import { withRouter } from 'react-router';
+
+class Header extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+           
+        };
+       
+    }
+   
+
+    onClickOpen = () => {
+        $('#m_aside_left').addClass('m-aside-left--on')
+        $('#body_form').addClass('m-aside-left--on')
+        $('#m_aside_left_toggle').addClass('m-aside-left-toggler--active')
+        $('#root').append(
+            $('<div/>', {
+                'class': 'm-aside-left-overlay',
+            }).on({
+                'click': function () {
+                    $('#m_aside_left').removeClass('m-aside-left--on')
+                    $('#body_form').removeClass('m-aside-left--on')
+                    $('#m_aside_left_toggle').removeClass('m-aside-left-toggler--active')
+                    $('.m-aside-left-overlay').remove()
+                }
+            })
+        )
+    }
+    componentDidUpdate(prevProps, prevState) {
+      
+    }
+
+    render() {
+  
+        return (
+            <header id="m_header" className="m-grid__item m-header" m-minimize="minimize" m-minimize-mobile="minimize" m-minimize-offset={200} m-minimize-mobile-offset={200}>
+                <div className="m-container m-container--fluid m-container--full-height pr-4 pl-4">
+                    <div className="m-stack m-stack--ver m-stack--desktop  m-header__wrapper">
+                        <div className="m-stack__item m-brand m-brand--mobile">
+                            <div className="m-stack m-stack--ver m-stack--general">
+                                <div className="m-stack__item m-stack__item--middle m-brand__logo">
+                                    {/* <a href="/dashboard" className="m-brand__logo-wrapper">
+                                        <img alt="" src={this.state.logo_link} style={{ 'width': '160px' }} />
+                                    </a> */}
+                                </div>
+                                <div className="m-stack__item m-stack__item--middle m-brand__tools">
+                                    {/* BEGIN: Responsive Aside Left Menu Toggler */}
+                                    <a href="#/" id="m_aside_left_toggle_mobile" className="m-brand__icon m-brand__toggler m-brand__toggler--left">
+                                        <span />
+                                    </a>
+                                    {/* END */}
+                                    {/* BEGIN: Topbar Toggler */}
+                                    <a id="m_aside_header_topbar_mobile_toggle" href="#/" className="m-brand__icon">
+                                        <i className="flaticon-more" />
+                                    </a>
+                                    {/* BEGIN: Topbar Toggler */}
+                                </div>
+                            </div>
+                        </div>
+                        <div className="m-stack__item m-stack__item--middle m-stack__item--left m-header-head" id="m_header_nav">
+                            <div className="m-stack m-stack--ver m-stack--desktop">
+                                <div className="m-stack__item m-stack__item--middle m-stack__item--fit">
+                                    {/* BEGIN: Aside Left Toggle */}
+                                    <a className="m-aside-left-toggler m-aside-left-toggler--left m_aside_left_toggler" onClick={() => this.onClickOpen()}>
+                                        <span />
+                                    </a>
+                                    {/* END: Aside Left Toggle */}
+                                </div>
+                            </div>
+                        </div>
+                        <div className="m-stack__item m-stack__item--middle m-stack__item--center" style={{ 'width': '160px' }}>
+                        <a href="/" className="m-brand m-brand--desktop">
+                                        {/* <img alt="" src={this.state.logo_link} style={{ 'width': '100%' }} /> */}
+                                    </a>
+                        </div>
+                        
+                    </div>
+                </div>
+            </header>
+        );
+    }
+}
+
+
+export default withRouter(Header);

app/src/components/layouts/MenuBar.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import { NavLink } from 'react-router-dom';
+import $ from 'jquery';
+
+
+class MenuBar extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            type: '',
+        }
+        
+
+    }
+
+
+    onClickClose = () => {
+        $('#m_aside_left').removeClass('m-aside-left--on')
+        $('#body_form').removeClass('m-aside-left--on')
+        $('#m_aside_left_toggle').removeClass('m-aside-left-toggler--active')
+        $('.m-aside-left-overlay').remove()
+    }
+
+    render() {
+        var active = '';
+     
+
+        return (
+            <div id="m_aside_left" className="m-aside-left  m-aside-left--skin-dark">
+                {/* BEGIN: Aside Menu */}
+                <div id="m_ver_menu" className="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark " data-menu-vertical="true" m-menu-scrollable={1} m-menu-dropdown-timeout={500}>
+                    <ul className="m-menu__nav  m-menu__nav--dropdown-submenu-arrow ">
+                        <li className="m-menu__section m-menu__section--first">
+                            {/* <h4 className="m-menu__section-text">Departments</h4> */}
+                            <i className="m-menu__section-icon flaticon-more-v3" />
+                        </li>
+                        <li className="m-menu__item  m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
+                            <NavLink to="/search-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
+                                <i className="m-menu__link-icon flaticon-search-1"/>
+                                <span className="m-menu__link-title">
+                                    <span className="m-menu__link-wrap">
+                                        <span className="m-menu__link-text">Tìm kiếm</span>
+                                    </span>
+                                </span>
+                            </NavLink>
+                        </li>
+
+                        <li className="m-menu__item  m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
+                            <NavLink to="/import-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
+                                <i className="m-menu__link-icon flaticon-tabs" />
+                                <span className="m-menu__link-title">
+                                    <span className="m-menu__link-wrap">
+                                        <span className="m-menu__link-text">Kho ảnh</span>
+                                    </span>
+                                </span>
+                            </NavLink>
+                        </li>   
+                          
+                        <li className="m-menu__item  m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
+                            <NavLink to="/list-famous" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
+                                <i className="m-menu__link-icon flaticon-avatar" />
+                                <span className="m-menu__link-title">
+                                    <span className="m-menu__link-wrap">
+                                        <span className="m-menu__link-text">Người nổi tiếng</span>
+                                    </span>
+                                </span>
+                            </NavLink>
+                        </li>
+
+                     
+                    </ul>
+                </div>
+                {/* END: Aside Menu */}
+            </div>
+        );
+    }
+}
+
+
+export default MenuBar;

app/yarn.lock

@@ -200,7 +200,7 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
-"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz"
   integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
@@ -1049,7 +1049,7 @@
     core-js-pure "^3.19.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz"
   integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
@@ -1104,6 +1104,16 @@
   resolved "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz"
   integrity sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==
 
+"@emotion/cache@^10.0.27":
+  version "10.0.29"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
+  integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
+  dependencies:
+    "@emotion/sheet" "0.9.4"
+    "@emotion/stylis" "0.8.5"
+    "@emotion/utils" "0.11.3"
+    "@emotion/weak-memoize" "0.2.5"
+
 "@emotion/cache@^11.7.1":
   version "11.7.1"
   resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz"
@@ -1115,11 +1125,16 @@
     "@emotion/weak-memoize" "^0.2.5"
     stylis "4.0.13"
 
-"@emotion/hash@^0.8.0":
+"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@emotion/memoize@^0.7.4":
   version "0.7.5"
   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz"
@@ -1138,6 +1153,17 @@
     "@emotion/weak-memoize" "^0.2.5"
     hoist-non-react-statics "^3.3.1"
 
+"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
+  version "0.11.16"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
+  integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
+  dependencies:
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/unitless" "0.7.5"
+    "@emotion/utils" "0.11.3"
+    csstype "^2.5.7"
+
 "@emotion/serialize@^1.0.2":
   version "1.0.2"
   resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz"
@@ -1149,22 +1175,37 @@
     "@emotion/utils" "^1.0.0"
     csstype "^3.0.2"
 
+"@emotion/sheet@0.9.4":
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
+  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
+
 "@emotion/sheet@^1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz"
   integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==
 
-"@emotion/unitless@^0.7.5":
+"@emotion/stylis@0.8.5":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.5":
   version "0.7.5"
   resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@emotion/utils@0.11.3":
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
+  integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
+
 "@emotion/utils@^1.0.0":
   version "1.0.0"
   resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz"
   integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
 
-"@emotion/weak-memoize@^0.2.5":
+"@emotion/weak-memoize@0.2.5", "@emotion/weak-memoize@^0.2.5":
   version "0.2.5"
   resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
@@ -2599,6 +2640,11 @@ atob@^2.1.2:
   resolved "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+attr-accept@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
+  integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
+
 autoprefixer@^10.4.1:
   version "10.4.1"
   resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.1.tgz"
@@ -2669,6 +2715,22 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-emotion@^10.0.27:
+  version "10.2.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz#a1fe3503cff80abfd0bdda14abd2e8e57a79d17d"
+  integrity sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/serialize" "^0.11.16"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^1.0.5"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+
 babel-plugin-istanbul@^6.0.0:
   version "6.1.1"
   resolved "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz"
@@ -2690,6 +2752,15 @@ babel-plugin-jest-hoist@^27.4.0:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
+babel-plugin-macros@^2.0.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.0"
+
 babel-plugin-macros@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz"
@@ -2728,6 +2799,11 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.0"
 
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 babel-plugin-transform-react-remove-prop-types@^0.4.24:
   version "0.4.24"
   resolved "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz"
@@ -3273,7 +3349,7 @@ content-type@~1.0.4:
   resolved "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz"
   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@@ -3347,6 +3423,16 @@ cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+create-emotion@^10.0.27:
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.27.tgz#cb4fa2db750f6ca6f9a001a33fbf1f6c46789503"
+  integrity sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==
+  dependencies:
+    "@emotion/cache" "^10.0.27"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/sheet" "0.9.4"
+    "@emotion/utils" "0.11.3"
+
 cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
@@ -3562,6 +3648,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^2.5.7:
+  version "2.6.19"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
+  integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
+
 csstype@^3.0.2:
   version "3.0.10"
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz"
@@ -3832,6 +3923,13 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-helpers@^5.0.1, dom-helpers@^5.1.0, dom-helpers@^5.1.2:
   version "5.2.1"
   resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz"
@@ -3966,6 +4064,14 @@ emojis-list@^3.0.0:
   resolved "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
+emotion@^10.0.1:
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.27.tgz#f9ca5df98630980a23c819a56262560562e5d75e"
+  integrity sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==
+  dependencies:
+    babel-plugin-emotion "^10.0.27"
+    create-emotion "^10.0.27"
+
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz"
@@ -4520,6 +4626,13 @@ file-loader@^6.2.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
+file-selector@^0.2.2:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.2.4.tgz#7b98286f9dbb9925f420130ea5ed0a69238d4d80"
+  integrity sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==
+  dependencies:
+    tslib "^2.0.3"
+
 filelist@^1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz"
@@ -4561,6 +4674,11 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz"
@@ -4994,14 +5112,19 @@ he@^1.2.0:
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-history@^5.2.0:
+history@^4.9.0:
-  version "5.2.0"
+  version "4.10.1"
-  resolved "https://registry.npmjs.org/history/-/history-5.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
-  integrity sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
   dependencies:
-    "@babel/runtime" "^7.7.6"
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
 
-hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -5543,6 +5666,11 @@ is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
@@ -6365,7 +6493,7 @@ lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -6544,6 +6672,14 @@ min-indent@^1.0.0:
   resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-create-react-context@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
+  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    tiny-warning "^1.0.3"
+
 mini-css-extract-plugin@^2.4.5:
   version "2.4.5"
   resolved "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.4.5.tgz"
@@ -7152,6 +7288,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
@@ -8328,6 +8471,15 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-dropzone@^11.5.1:
+  version "11.5.1"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.5.1.tgz#f4d664437bf8af6acfccbf5040a9890c6780a49f"
+  integrity sha512-eNhttdq4ZDe3eKbXAe54Opt+sbtqmNK5NWTHf/l5d+1TdZqShJ8gMjBrya00qx5zkI//TYxRhu1d9pemTgaWwg==
+  dependencies:
+    attr-accept "^2.2.1"
+    file-selector "^0.2.2"
+    prop-types "^15.7.2"
+
 react-error-overlay@^6.0.10:
   version "6.0.10"
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz"
@@ -8346,7 +8498,7 @@ react-file-reader@^1.1.4:
     prop-types "^15.5.0"
     uuid4 "^1.0.0"
 
-react-is@^16.12.0, react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -8373,6 +8525,15 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-loading-overlay@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-loading-overlay/-/react-loading-overlay-1.0.1.tgz#ee3b1ad56c45bb2f1ba46d4820ba0d06cd319a91"
+  integrity sha512-aUjtZ8tNXBSx+MbD2SQs0boPbeTAGTh+I5U9nWjDzMasKlYr58RJpr57c8W7uApeLpOkAGbInExRi6GamNC2bA==
+  dependencies:
+    emotion "^10.0.1"
+    prop-types "^15.6.2"
+    react-transition-group "^2.5.0"
+
 react-onclickoutside@^6.12.0:
   version "6.12.1"
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.12.1.tgz#92dddd28f55e483a1838c5c2930e051168c1e96b"
@@ -8410,20 +8571,34 @@ react-refresh@^0.11.0:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-react-router-dom@^6.2.1:
+react-router-dom@5.2.0:
-  version "6.2.1"
+  version "5.2.0"
-  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
-  integrity sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==
+  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
   dependencies:
-    history "^5.2.0"
+    "@babel/runtime" "^7.1.2"
-    react-router "6.2.1"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
 
-react-router@6.2.1:
+react-router@5.2.0:
-  version "6.2.1"
+  version "5.2.0"
-  resolved "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
-  integrity sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==
+  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
   dependencies:
-    history "^5.2.0"
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
 
 react-scripts@5.0.0:
   version "5.0.0"
@@ -8487,6 +8662,16 @@ react-spinners@^0.11.0:
   dependencies:
     "@emotion/react" "^11.1.4"
 
+react-transition-group@^2.5.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
+  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
+  dependencies:
+    dom-helpers "^3.4.0"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+    react-lifecycles-compat "^3.0.4"
+
 react-transition-group@^4.0.0:
   version "4.4.2"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz"
@@ -8722,6 +8907,11 @@ resolve-from@^5.0.0:
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url-loader@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz"
@@ -8738,7 +8928,7 @@ resolve.exports@^1.1.0:
   resolved "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz"
   integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
 
-resolve@^1.10.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0:
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0:
   version "1.21.0"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.21.0.tgz"
   integrity sha512-3wCbTpk5WJlyE4mSOtDLhqQmGFi0/TD9VPwmiolnk8U0wRgMEktqCXd3vy5buTO3tljvalNvKrjHEfrd2WpEKA==
@@ -9150,7 +9340,7 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.5.0:
+source-map@^0.5.0, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -9656,6 +9846,16 @@ timsort@^0.3.0:
   resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-invariant@^1.0.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
+  integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
+
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz"
@@ -9992,6 +10192,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"