add

.env

-REACT_APP_SECRET_API=http://localhost:3000
\ No newline at end of file
+REACT_APP_SECRET_API=http://localhost:4000
\ No newline at end of file

package.json

@@ -9,9 +9,11 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "antd": "^4.18.2",
+    "axios": "^0.24.0",
     "craco-less": "^2.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-google-maps": "^9.4.5",
     "react-router-dom": "5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"

src/Layouts/index.jsx

-import { React, Fragment } from "react";
+import { React } from "react";
+
+import { Layout } from "antd";
+
 
 import TabHeader from "./tabHeader";
+import MenuList from './menulist'
 
-export default function App () {
+export default function App() {
   return (
-    <Fragment>
+    <Layout>
       <TabHeader />
-    </Fragment>
+      <MenuList />
+    </Layout>
   );
 }

src/Layouts/menulist.jsx

+import React, { useState } from "react";
+
+import { Layout, Menu } from "antd";
+import {
+  DesktopOutlined,
+  PieChartOutlined,
+  TeamOutlined,
+  SearchOutlined,
+  FileSearchOutlined,
+  CommentOutlined,
+} from "@ant-design/icons";
+
+const { Sider } = Layout;
+const { SubMenu } = Menu;
+
+export default function App() {
+  const [collapsed, setCollapsed] = useState(false);
+
+  const onCollapse = (collapsed) => {
+    setCollapsed(collapsed);
+  };
+
+  return (
+    <>
+      <Sider
+        theme="light"
+        collapsible
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      >
+        <div className="logo" />
+        <Menu
+          theme="light"
+          defaultSelectedKeys={["1"]}
+          defaultOpenKeys={["sub1"]}
+          mode="inline"
+        >
+          <Menu.Item key="1" icon={<PieChartOutlined />}>
+            เริ่มต้นใช้งาน
+          </Menu.Item>
+          <Menu.Item key="2" icon={<DesktopOutlined />}>
+            ลงทะเบียนร้านซ่อม
+          </Menu.Item>
+          <SubMenu key="sub1" icon={<TeamOutlined />} title="บริการลูกค้า">
+            <Menu.Item key="8" icon={<SearchOutlined />}>
+              ค้นหาร้านซ่อม
+            </Menu.Item>
+            <Menu.Item key="6" icon={<FileSearchOutlined />}>
+              เช็คสถานะการซ่อม
+            </Menu.Item>
+            <Menu.Item key="7" icon={<CommentOutlined />}>
+              แจ้งปัญหาการใช้งาน
+            </Menu.Item>
+          </SubMenu>
+          <Menu.Item key="9" icon={<CommentOutlined />}>
+              แจ้งปัญหาการใช้งาน
+            </Menu.Item>
+        </Menu>
+      </Sider>
+    </>
+  );
+}

src/Layouts/tabHeader.jsx

@@ -10,19 +10,22 @@ export default function App() {
   const clicklogo = () => {
     history.push("/");
   };
+  // const onclickLogin = () => {
+  //   console.log('click login')
+  // }
   return (
     <Header className="header-home" style={{ zIndex: 1 }}>
-      <div>
-        {/* <img src={logo} alt="Logo" width={30} height={30}/> */}
-        <Row>
-          <Col span={20}>
+      {/* <img src={logo} alt="Logo" width={30} height={30}/> */}
+      <Row gutter={[32, 32]} justify="space-between">
+        <Col span={15}>
+          <Row>
             <Row className="main-logo" onClick={clicklogo}>
               <div> Repair </div>&nbsp;
               <div className="logo"> Center</div>
             </Row>
-          </Col>
-        </Row>
-      </div>
+          </Row>
+        </Col>
+      </Row>
     </Header>
   );
 }

src/assets/less/Registion/index.less

+
+.title {
+    text-align: center;
+    font-size: 25px;
+    font-weight: bold;
+    padding: 10px 20px;
+}
+
+.map {
+    height: 300px;
+}
+
+.div-time{
+    padding: 10px 15px;
+}
\ No newline at end of file

src/assets/less/index.less

 @import "Layouts/header.less";
-@import "Home/index.less";
\ No newline at end of file
+@import "Home/index.less";
+@import "Registion/index.less";
\ No newline at end of file

src/router/Routers.jsx

 import { BrowserRouter as AppRouter, Route, Switch } from "react-router-dom";
-import Ecommerce from "../view/Dashboards/ecommerce";
+
+// import Ecommerce from "../view/Dashboards/ecommerce";
+
+import HeaderTap from "../Layouts/tabHeader";
+import MenuList from "../Layouts/menulist";
 
 //import
 import Login from "../view/Login";
 // import Home from "../view/Homes/index";
-import Home from "../view/Homes/index"
+import Home from "../view/Homes/index";
+import RegistionPage from "../view/Registion";
+
+import { Layout } from "antd";
+
+const { Content, Footer } = Layout;
 
 export default function Routers() {
   return (
-    <AppRouter>
-      <Switch>
-        <Route
-          exact
-          path={"/"}
-          render={() => {
-            return <Home />;
-          }}
-        />
-
-        <Route
-          exact
-          path={"/login"}
-          render={() => {
-            return <Login />;
-          }}
-        />
-
-        <Route
-          exact
-          path={"/dashboard"}
-          render={() => {
-            return <Ecommerce />;
-          }}
-        />
-      </Switch>
-    </AppRouter>
+    <>
+      <HeaderTap
+        className="site-layout-background"
+        style={{ padding: 0, position: "fixed", zIndex: 1, width: "100%" }}
+      />
+      <Layout style={{ minHeight: "100vh", paddingTop: "2vh" }}>
+        <MenuList />
+
+        <Layout className="site-layout">
+          <Content style={{ margin: "0 16px" }}>
+            <div
+              className="site-layout-background"
+              style={{ padding: 24, mixHeight: 360 }}
+            >
+              <AppRouter>
+                <Switch>
+                  <Route
+                    exact
+                    path={"/login"}
+                    render={() => {
+                      return <Login />;
+                    }}
+                  />
+
+                  <Route
+                    exact
+                    path={"/registion"}
+                    render={() => {
+                      return <RegistionPage />;
+                    }}
+                  />
+                  <Route
+                    exact
+                    path={"/"}
+                    render={() => {
+                      return <Home />;
+                    }}
+                  />
+                </Switch>
+              </AppRouter>
+            </div>
+          </Content>
+          <Footer style={{ textAlign: "center" }}>
+            Ant Design ©2018 Created by Ant UED
+          </Footer>
+        </Layout>
+      </Layout>
+  
+    </>
   );
 }

src/services/index.js

+import axios from "axios";
+
+export const sendToken = (data) => {
+  return axios
+    .post(
+      process.env.REACT_APP_SECRET_API + "/authentication/accesstoken",
+      data
+    )
+    .then((response) => response.data)
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+export const sendLogin = (data) => {
+    return axios
+      .post(
+        process.env.REACT_APP_SECRET_API + "/authentication/login",
+        data
+      )
+      .then((response) => response.data)
+      .catch((err) => {
+        console.log(err);
+      });
+  };

src/view/Dashboards/ecommerce/index.jsx

-import { React, Fragment } from "react";
+import { React } from "react";
+import { Layout } from "antd";
 
-import Header from '../../../Layouts/tabHeader'
+import HeaderTap from "../../../Layouts/tabHeader";
+import MenuList from "../../../Layouts/menulist";
+
+const { Content, Footer } = Layout;
 
 export default function Ecommerce() {
   return (
-    <Fragment>
-      <Header />
-      <h3>สวัสดี, Fariw 👋</h3>
-    </Fragment>
+    <>
+      <HeaderTap className="site-layout-background" style={{ padding: 0 }} />
+      <Layout style={{ minHeight: "100vh", paddingTop: "2vh" }}>
+        <MenuList />
+
+        <Layout className="site-layout">
+          <Content style={{ margin: "0 16px" }}>
+            <div
+              className="site-layout-background"
+              style={{ padding: 24, minHeight: 360 }}
+            >
+              Bill is a cat.
+            </div>
+          </Content>
+          <Footer style={{ textAlign: "center" }}>
+            Ant Design ©2018 Created by Ant UED
+          </Footer>
+        </Layout>
+      </Layout>
+    </>
   );
 }

src/view/Login/Login.js

-// import liff from "@line/liff";
-import { React, Fragment } from "react";
-
-function App() {
-
-  console.log(process.env.REACT_APP_SECRET_API)
-  
-  return (
-    <Fragment>
-      <h3>สวัสดี, Login page 👋</h3>
-    </Fragment>
-  );
-}
-
-export default App;

src/view/Login/Login.jsx

+// import liff from "@line/liff";
+import { React, Fragment } from "react";
+
+import { Form, Input, Button, Checkbox, Row, Col, Divider } from "antd";
+
+import { sendLogin } from '../../services'
+
+function App() {
+  console.log(process.env.REACT_APP_SECRET_API);
+
+  const onFinish = (values) => {
+    const data = {
+      garageID : values.garageID,
+      password : values.password
+    }
+    console.log(data)
+
+    sendLogin(data).then((response) => console.log('response', response))
+  };
+
+
+
+  return (
+    <Fragment>
+      <Row>
+        <Col
+          span={6}
+          xs={{ order: 1 }}
+          sm={{ order: 2 }}
+          md={{ order: 3 }}
+          lg={{ order: 4 }}
+        ></Col>
+        <Col
+          // style={{ textAlign: "center" }}
+          span={12}
+          xs={{ order: 1 }}
+          sm={{ order: 2 }}
+          md={{ order: 3 }}
+          lg={{ order: 4 }}
+        >
+          <div className="title"></div>
+          <Divider orientation="center">
+            <b>เข้าสู่ระบบร้านซ่อม</b>
+          </Divider>
+          <Form
+            name="basic"
+            labelCol={{
+              span: 8,
+            }}
+            wrapperCol={{
+              span: 16,
+            }}
+            initialValues={{
+              remember: true,
+            }}
+            onFinish={onFinish}
+            autoComplete="off"
+          >
+            <Form.Item
+              label="User ID"
+              name="garageID"
+              rules={[
+                {
+                  required: true,
+                  message: "กรุณากรอก User ID ของคุณ!",
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+
+            <Form.Item
+              label="รหัสผ่าน"
+              name="password"
+              rules={[
+                {
+                  required: true,
+                  message: "กรุณากรอกรหัสผ่านของคุณ!",
+                },
+              ]}
+            >
+              <Input.Password />
+            </Form.Item>
+
+            <Form.Item
+              name="remember"
+              valuePropName="checked"
+              wrapperCol={{
+                offset: 8,
+                span: 16,
+              }}
+            >
+              <Checkbox>Remember me</Checkbox>
+            </Form.Item>
+
+            <Form.Item
+              wrapperCol={{
+                offset: 8,
+                span: 16,
+              }}
+            >
+              <Button type="primary" htmlType="submit">
+                Submit
+              </Button>
+            </Form.Item>
+          </Form>
+        </Col>
+        <Col
+          span={6}
+          xs={{ order: 1 }}
+          sm={{ order: 2 }}
+          md={{ order: 3 }}
+          lg={{ order: 4 }}
+        ></Col>
+      </Row>
+    </Fragment>
+  );
+}
+
+export default App;

src/view/Registion/Registion.jsx

+import React, { useState } from "react";
+// import axios from "axios";
+import {
+  Form,
+  Input,
+  Select,
+  Row,
+  Col,
+  Button,
+  Divider,
+  TimePicker,
+} from "antd";
+import moment from "moment";
+
+import {
+  withScriptjs,
+  withGoogleMap,
+  GoogleMap,
+  Marker,
+} from "react-google-maps";
+
+import { sendToken } from '../../services'
+
+let newLatLng = [{ lat: 15.118524429823255, lng: 104.9075726928711 }];
+
+const onMarkerDragEnd = (event) => {
+  newLatLng[0].lat = event.latLng.lat();
+  newLatLng[0].lng = event.latLng.lng();
+  console.log("newLat", newLatLng[0].lat, "newLng", newLatLng[0].lng);
+};
+
+const MapWithAMarker = withScriptjs(
+  withGoogleMap(() => (
+    <GoogleMap defaultZoom={8} defaultCenter={newLatLng[0]}>
+      <Marker
+        draggable={true}
+        position={newLatLng[0]}
+        onDragEnd={(e) => onMarkerDragEnd(e)}
+      />
+    </GoogleMap>
+  ))
+);
+
+const { Option } = Select;
+
+const formItemLayout = {
+  labelCol: {
+    xs: {
+      span: 24,
+    },
+    sm: {
+      span: 8,
+    },
+  },
+  wrapperCol: {
+    xs: {
+      span: 24,
+    },
+    sm: {
+      span: 16,
+    },
+  },
+};
+const tailFormItemLayout = {
+  wrapperCol: {
+    xs: {
+      span: 24,
+      offset: 0,
+    },
+    sm: {
+      span: 16,
+      offset: 8,
+    },
+  },
+};
+
+//Main Function
+export default function RegistrationForm() {
+  const [ontime, setOnTime] = useState();
+  const [offtime, setOffTime] = useState();
+
+  const [form] = Form.useForm();
+
+  const onFinish = (values) => {
+   
+    const data = {
+      party: "garage",
+      garageID: values.userID,
+      password: values.password,
+      user_name: values.username,
+      garage_name: values.garagename,
+      email: values.email,
+      garage_type: values.garagetype,
+      address_number: values.addressnumber,
+      moo: values.moo,
+      alley: values.alley,
+      road: values.road,
+      sub_district: values.subdistrict,
+      district: values.district,
+      province: values.province,
+      pos_code: values.poscode,
+      address_map: [newLatLng[0].lat, newLatLng[0].lng],
+      on_time: ontime,
+      off_time: offtime,
+      tel: values.phone
+    }
+
+    sendToken(data).then((response) => console.log('response', response))
+
+  };
+
+  const handleOnTime = (time, timeString) => {
+    setOnTime(timeString);
+  };
+
+  const handleOffTime = (time, timeString) => {
+    setOffTime(timeString);
+  };
+
+  return (
+    <Row>
+      <Col
+        span={6}
+        xs={{ order: 1 }}
+        sm={{ order: 2 }}
+        md={{ order: 3 }}
+        lg={{ order: 4 }}
+      ></Col>
+      <Col
+        // style={{ textAlign: "center" }}
+        span={12}
+        xs={{ order: 1 }}
+        sm={{ order: 2 }}
+        md={{ order: 3 }}
+        lg={{ order: 4 }}
+      >
+        <div className="title"></div>
+        <Divider orientation="left">
+          <b>รายละเอียดของร้าน</b>
+        </Divider>
+        <Form
+          {...formItemLayout}
+          form={form}
+          name="register"
+          onFinish={onFinish}
+          scrollToFirstError
+        >
+          {/* User ID */}
+          <Form.Item
+            name="userID"
+            label="User ID"
+            tooltip="User ID เพื่อใช้ในการเข้าระบบในครั้งต่อไป"
+            rules={[
+              {
+                required: true,
+                message: "กรุณาระบุ userID ของคุณ",
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+
+          {/* Password  รหัสผ่าน*/}
+          <Form.Item
+            name="password"
+            label="รหัสผ่าน"
+            rules={[
+              {
+                required: true,
+                message: "กรุณาใส่รหัสผ่านของคุณ!",
+              },
+            ]}
+            hasFeedback
+          >
+            <Input.Password />
+          </Form.Item>
+          {/* confirm Password  ยืนยันรหัสผ่าน */}
+          <Form.Item
+            name="confirm"
+            label="ยืนยันรหัสผ่าน"
+            dependencies={["password"]}
+            hasFeedback
+            rules={[
+              {
+                required: true,
+                message: "กรุณายืนยันรหัสผ่านของคุณ!",
+              },
+              ({ getFieldValue }) => ({
+                validator(_, value) {
+                  if (!value || getFieldValue("password") === value) {
+                    return Promise.resolve();
+                  }
+
+                  return Promise.reject(
+                    new Error("รหัสผ่านทั้งสองที่คุณป้อนไม่ตรงกัน!")
+                  );
+                },
+              }),
+            ]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+          {/* User Name  ชื่อ-นามสกุล */}
+          <Form.Item
+            name="username"
+            label="ชื่อ-นามสกุล"
+            tooltip="ชื่อเจ้าของร้าน หรือผู้ที่ได้รับผิดชอบ"
+            rules={[
+              {
+                required: true,
+                message: "กรุณาระบุ ชื่อ-นามสกุล ของคุณ!",
+                whitespace: true,
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+
+          {/* Garage Name ชื่อร้านซ่อม */}
+          <Form.Item
+            name="garagename"
+            label="ชื่อร้านซ่อม"
+            tooltip="ชื่อร้านซ่อม หรืออู่ซ่อมรถ"
+            rules={[
+              {
+                required: true,
+                message: "กรุณาระบุ ชื่อร้านซ่อม หรืออู่ซ่อมรถ ของคุณ!",
+                whitespace: true,
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+
+          {/* Gmail */}
+          <Form.Item
+            name="email"
+            label="E-mail"
+            rules={[
+              {
+                type: "email",
+                message: "ข้อมูลที่ป้อนไม่ถูกต้อง ตามรูปแบบ E-mail!",
+              },
+              {
+                required: true,
+                message: "กรุณาใส่อีเมลของคุณ!",
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+
+          {/* Garage type ประเภทของร้านซ่อม */}
+          <Form.Item
+            name="garagetype"
+            label="ประเภทของร้านซ่อม"
+            tooltip="เลือกประเภทของร้านซ่อม (สามารถเลือกได้มากกว่าหนึ่งประเภท)"
+            rules={[
+              {
+                required: true,
+                message: "กรุณาเลือกประเภทของร้านซ่อมของคุณ!",
+              },
+            ]}
+          >
+            <Select
+              mode="multiple"
+              allowClear
+              style={{ width: "100%" }}
+              placeholder="Please select"
+            >
+              <Option value="ศูนย์บริการรถยนต์">ศูนย์บริการรถยนต์</Option>
+              <Option value="อู่ซ่อมรถยนต์">อู่ซ่อมรถยนต์</Option>
+              <Option value="ศูนย์บริการรถจักรยานยนต์">
+                ศูนย์บริการรถจักรยานยนต์
+              </Option>
+              <Option value="อู่ซ่อมรถจักรยานยนต์">อู่ซ่อมรถจักรยานยนต์</Option>
+              <Option value="ร้านบริการซ่อมอุปกรณ์การเกษตร">
+                ร้านบริการซ่อมอุปกรณ์การเกษตร
+              </Option>
+            </Select>
+          </Form.Item>
+
+          {/* หมายเลขโทรศัพท์ */}
+          <Form.Item
+            style={{ marginTop: "20px" }}
+            name="phone"
+            label="หมายเลขโทรศัพท์"
+            rules={[
+              {
+                required: true,
+                message: "กรุณาใส่หมายเลขโทรศัพท์ของคุณ!",
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+
+          {/* เวลาที่ร้านเปิด */}
+          <Form.Item
+            style={{ marginTop: "20px" }}
+            label="เวลาที่ร้านเปิด"
+            rules={[
+              {
+                // required: true,
+                // message: "กรุณาระบุเวลาเปิด-ปิดร้านของคุณ",
+              },
+            ]}
+          >
+            <Row>
+              <TimePicker
+                defaultOpenValue={moment("00:00:00", "HH:mm:ss")}
+                onChange={handleOnTime}
+              />
+              <div className="div-time">ถึงเวลา</div>
+
+              <TimePicker
+                defaultOpenValue={moment("00:00:00", "HH:mm:ss")}
+                onChange={handleOffTime}
+              />
+            </Row>
+          </Form.Item>
+
+          <Divider orientation="left">
+            <b>ที่อยู่ของร้าน</b>
+          </Divider>
+
+          <Row>
+            {/* Addess Number บ้านเลขที่*/}
+            <Form.Item
+              name="addressnumber"
+              label="ตั้งอยู่เลขที่"
+              rules={[
+                {
+                  required: true,
+                  message: "กรุณาระที่อยู่ให้ครบ!",
+                  whitespace: true,
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+
+            {/* หมู่ที่ */}
+            <Form.Item
+              name="moo"
+              label="หมู่ที่"
+              rules={[
+                {
+                  required: true,
+                  message: "กรุณาระที่อยู่ให้ครบ!",
+                  whitespace: true,
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+          </Row>
+
+          <Row>
+            {/* ตรอก/ซอย */}
+            <Form.Item
+              name="alley"
+              label="ตรอก/ซอย"
+              rules={[
+                {
+                  required: true,
+                  message: "กรุณาระที่อยู่ให้ครบ!",
+                  whitespace: true,
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+
+            {/* ถนน */}
+            <Form.Item
+              name="road"
+              label="ถนน"
+              rules={[
+                {
+                  required: true,
+                  message: "กรุณาระที่อยู่ให้ครบ!",
+                  whitespace: true,
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+          </Row>
+
+          {/* ตำบล/แขวง */}
+          <Form.Item
+            name="subdistrict"
+            label="ตำบล/แขวง"
+            rules={[
+              {
+                required: true,
+                message: "กรุณาระที่อยู่ให้ครบ!",
+                whitespace: true,
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+
+          {/* อำเภอ/เขต */}
+          <Form.Item
+            name="district"
+            label="อำเภอ/เขต"
+            rules={[
+              {
+                required: true,
+                message: "กรุณาระที่อยู่ให้ครบ!",
+                whitespace: true,
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+
+          {/* จังหวัด */}
+          <Form.Item
+            name="province"
+            label="จังหวัด"
+            rules={[
+              {
+                required: true,
+                message: "กรุณาระที่อยู่ให้ครบ!",
+                whitespace: true,
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+
+          {/* รหัสไปรษณีย์ */}
+          <Form.Item
+            name="poscode"
+            label="รหัสไปรษณีย์"
+            rules={[
+              {
+                required: true,
+                message: "กรุณาระที่อยู่ให้ครบ!",
+                whitespace: true,
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+
+          <Divider orientation="left">
+            <b>กรุณาปักหมุดที่อยู่ของร้าน</b>
+          </Divider>
+
+          {/* ปักหมุดแผนที่ */}
+          <Col md={24} span={24}>
+            <MapWithAMarker
+              googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKBdBAnDzrOkcfHq9InQFfYM7Inig-Zeg&v=3.exp&libraries=geometry,drawing,places"
+              loadingElement={<div style={{ height: "100%" }} />}
+              containerElement={<div style={{ height: "300px" }} />}
+              mapElement={<div style={{ height: "100%" }} />}
+            />
+          </Col>
+
+          <Form.Item {...tailFormItemLayout}>
+            <Button type="primary" htmlType="submit" style={{marginTop: "30px"}}>
+              ยืนยันการสมัคร
+            </Button>
+          </Form.Item>
+        </Form>
+      </Col>
+      <Col
+        span={6}
+        xs={{ order: 1 }}
+        sm={{ order: 2 }}
+        md={{ order: 3 }}
+        lg={{ order: 4 }}
+      ></Col>
+    </Row>
+  );
+}

src/view/Registion/googleMap.jsx

+import { Col } from 'antd'
+import {
+    withScriptjs,
+    withGoogleMap,
+    GoogleMap,
+    Marker,
+  } from 'react-google-maps'
+  
+  let newLatLng = [{ lat: 15.118524429823255, lng: 104.9075726928711 }]
+
+  const onMarkerDragEnd = (event) => {
+    newLatLng[0].lat = event.latLng.lat()
+    newLatLng[0].lng = event.latLng.lng()
+    console.log('newLat', newLatLng[0].lat, 'newLng', newLatLng[0].lng)
+  }
+
+  const MapWithAMarker = withScriptjs(
+    withGoogleMap(() => (
+      <GoogleMap defaultZoom={8} defaultCenter={newLatLng[0]}>
+        <Marker
+          draggable={true}
+          position={newLatLng[0]}
+          onDragEnd={(e) => onMarkerDragEnd(e)}
+        />
+      </GoogleMap>
+    ))
+  )
+
+  export default function App() {
+      return (
+        <Col md={24} span={24}>
+        <MapWithAMarker
+          googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKBdBAnDzrOkcfHq9InQFfYM7Inig-Zeg&v=3.exp&libraries=geometry,drawing,places"
+          loadingElement={<div style={{ height: '100%' }} />}
+          containerElement={<div style={{ height: '400px' }} />}
+          mapElement={<div style={{ height: '100%' }} />}
+        />
+      </Col>
+      )
+  }
\ No newline at end of file

src/view/Registion/index.jsx

+export { default } from "./Registion";

yarn.lock

@@ -3471,7 +3471,7 @@ arrify@^2.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
   integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
 
-asap@~2.0.6:
+asap@~2.0.3, asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
   integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@@ -3570,6 +3570,13 @@ axios@^0.21.1:
   dependencies:
     follow-redirects "^1.14.0"
 
+axios@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
+  integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
+  dependencies:
+    follow-redirects "^1.14.4"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -3750,7 +3757,7 @@ babel-preset-react-app@^10.0.0:
     babel-plugin-macros "2.8.0"
     babel-plugin-transform-react-remove-prop-types "0.4.24"
 
-babel-runtime@^6.26.0:
+babel-runtime@^6.11.6, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -4158,6 +4165,11 @@ camelcase@^6.0.0, camelcase@^6.1.0, camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.1.tgz#250fd350cfd555d0d2160b1d51510eaf8326e86e"
   integrity sha512-tVI4q5jjFV5CavAU8DXfza/TJcZutVKo/5Foskmsqcm0MsL91moHvwiGNnqaa2o6PF/7yT5ikDRcVcl8Rj6LCA==
 
+can-use-dom@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
+  integrity sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo=
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -4215,6 +4227,11 @@ chalk@^4.0.0, chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+change-emitter@^0.1.2:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
+  integrity sha1-6LL+PX8at9aaMhma/5HqaTFAlRU=
+
 char-regex@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
@@ -4598,6 +4615,11 @@ core-js-pure@^3.19.0:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.19.1.tgz#edffc1fc7634000a55ba05e95b3f0fe9587a5aa4"
   integrity sha512-Q0Knr8Es84vtv62ei6/6jXH/7izKmOrtrxH9WJTHLCMAVeU+8TF8z8Nr08CsH4Ot0oJKzBzJJL9SJBYIv7WlfQ==
 
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
+
 core-js@^2.4.0:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
@@ -5419,6 +5441,13 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
+encoding@^0.1.11:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -6091,6 +6120,19 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fbjs@^0.8.1:
+  version "0.8.18"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.18.tgz#9835e0addb9aca2eff53295cd79ca1cfc7c9662a"
+  integrity sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.30"
+
 figgy-pudding@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
@@ -6239,6 +6281,11 @@ follow-redirects@^1.14.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.5.tgz#f09a5848981d3c772b5392309778523f8d85c381"
   integrity sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==
 
+follow-redirects@^1.14.4:
+  version "1.14.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.6.tgz#8cfb281bbc035b3c067d6cd975b0f6ade6e855cd"
+  integrity sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -6515,6 +6562,11 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+google-maps-infobox@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/google-maps-infobox/-/google-maps-infobox-2.0.0.tgz#1ea6de93c0cdf4138c2d586331835c83dcc59dc2"
+  integrity sha512-hTuWmWZZSOxf5D/z7l3/hTF1grgRvLG53BEKMdjiKOG+FcK/kH7vqseUeyIU9Zj2ZIqKTOaro0nknxpAuRq4Vw==
+
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
@@ -6665,6 +6717,11 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^2.3.1:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
+  integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
+
 hoist-non-react-statics@^3.1.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -6869,6 +6926,13 @@ iconv-lite@0.4.24, iconv-lite@^0.4.4:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@^0.6.2:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 icss-utils@^4.0.0, icss-utils@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
@@ -7037,6 +7101,13 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+invariant@^2.2.1:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ip-regex@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
@@ -7371,7 +7442,7 @@ is-shared-array-buffer@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz#97b0c85fbdacb59c9c446fe653b82cf2b5b7cfe6"
   integrity sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==
 
-is-stream@^1.1.0:
+is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@@ -7480,6 +7551,14 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
@@ -8342,7 +8421,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
-lodash@^4.17.19, lodash@^4.17.21, lodash@^4.7.0:
+lodash@^4.16.2, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -8352,7 +8431,7 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.8.0.tgz#e7ec73a57e1e7b419cb6c6ac06bf050b67356114"
   integrity sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA==
 
-loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, 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.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -8438,6 +8517,16 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marker-clusterer-plus@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz#f8eff74d599dab3b7d0e3fed5264ea0e704f5d67"
+  integrity sha1-+O/3TVmdqzt9Dj/tUmTqDnBPXWc=
+
+markerwithlabel@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/markerwithlabel/-/markerwithlabel-2.0.2.tgz#fa6aee4abb0ee553e24e2b708226858f58b8729e"
+  integrity sha512-C/cbm1A0h/u54gwHk5ZJNdUU3V3+1BbCpRPMsMyFA7vF4yL+aB4rWpxACz29TpQ+cTg6/iQroExh0PMSRGtQFg==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -8827,6 +8916,14 @@ no-case@^3.0.3:
     lower-case "^2.0.1"
     tslib "^1.10.0"
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-forge@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
@@ -10304,6 +10401,13 @@ promise-polyfill@^8.1.3:
   resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.2.1.tgz#1fa955b325bee4f6b8a4311e18148d4e5b46d254"
   integrity sha512-3p9zj0cEHbp7NVUxEYUWjQlffXqnXaZIMPkAO7HhFh8u5636xLRDHOUo2vpWSK0T2mqm6fKLXYn1KP6PAZ2gKg==
 
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+  dependencies:
+    asap "~2.0.3"
+
 promise@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
@@ -10327,6 +10431,15 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
+prop-types@^15.5.8:
+  version "15.8.0"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.0.tgz#d237e624c45a9846e469f5f31117f970017ff588"
+  integrity sha512-fDGekdaHh65eI3lMi5OnErU6a8Ighg2KjcjQxO7m8VHyWjcPyj5kiOgV1LQDOOOgVy3+5FgjXvdSSX7B8/5/4g==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -10889,7 +11002,24 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
-react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
+react-google-maps@^9.4.5:
+  version "9.4.5"
+  resolved "https://registry.yarnpkg.com/react-google-maps/-/react-google-maps-9.4.5.tgz#920c199bdc925e0ce93880edffb09428d263aafa"
+  integrity sha512-8z5nX9DxIcBCXuEiurmRT1VXVwnzx0C6+3Es6lxB2/OyY2SLax2/LcDu6Aldxnl3HegefTL7NJzGeaKAJ61pOA==
+  dependencies:
+    babel-runtime "^6.11.6"
+    can-use-dom "^0.1.0"
+    google-maps-infobox "^2.0.0"
+    invariant "^2.2.1"
+    lodash "^4.16.2"
+    marker-clusterer-plus "^2.1.4"
+    markerwithlabel "^2.0.1"
+    prop-types "^15.5.8"
+    recompose "^0.26.0"
+    scriptjs "^2.5.8"
+    warning "^3.0.0"
+
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -11069,6 +11199,16 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+recompose@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.26.0.tgz#9babff039cb72ba5bd17366d55d7232fbdfb2d30"
+  integrity sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==
+  dependencies:
+    change-emitter "^0.1.2"
+    fbjs "^0.8.1"
+    hoist-non-react-statics "^2.3.1"
+    symbol-observable "^1.0.4"
+
 recursive-readdir@2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"
@@ -11486,7 +11626,7 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
-"safer-buffer@>= 2.1.2 < 3":
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -11577,6 +11717,11 @@ schema-utils@^3.0.0, schema-utils@^3.1.1:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+scriptjs@^2.5.8:
+  version "2.5.9"
+  resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
+  integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==
+
 scroll-into-view-if-needed@^2.2.25:
   version "2.2.28"
   resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.28.tgz#5a15b2f58a52642c88c8eca584644e01703d645a"
@@ -11699,7 +11844,7 @@ set-value@^2.0.0, set-value@^2.0.1:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setimmediate@^1.0.4:
+setimmediate@^1.0.4, setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@@ -12338,6 +12483,11 @@ svgo@^1.0.0, svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+symbol-observable@^1.0.4:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -12741,6 +12891,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+ua-parser-js@^0.7.30:
+  version "0.7.31"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
+  integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==
+
 unbox-primitive@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
@@ -13041,6 +13196,13 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
@@ -13223,7 +13385,7 @@ whatwg-encoding@^1.0.5:
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-fetch@^3.0.0, whatwg-fetch@^3.4.1:
+whatwg-fetch@>=0.10.0, whatwg-fetch@^3.0.0, whatwg-fetch@^3.4.1:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
   integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==