UI Updates & Bill Entering

client/src/pages/shop-vendor/shop-vendor.page.component.jsx

@@ -1,28 +1,45 @@
-import { Col, Row } from "antd";
+import { Drawer, Grid } from "antd";
+import queryString from "query-string";
 import React from "react";
+import { useHistory, useLocation } from "react-router-dom";
 import VendorsFormContainer from "../../components/vendors-form/vendors-form.container";
 import VendorsListContainer from "../../components/vendors-list/vendors-list.container";
 
-const listSpan = {
-  md: { span: 24 },
-  lg: { span: 8 },
-};
-const formSapn = {
-  md: { span: 24 },
-  lg: { span: 16 },
-};
-
 export default function ShopVendorPageComponent() {
+  const search = queryString.parse(useLocation().search);
+  const { selectedvendor } = search;
+  const history = useHistory();
+
+  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+    .filter((screen) => !!screen[1])
+    .slice(-1)[0];
+
+  const bpoints = {
+    xs: "100%",
+    sm: "100%",
+    md: "100%",
+    lg: "50%",
+    xl: "50%",
+    xxl: "45%",
+  };
+  const drawerPercentage = selectedBreakpoint
+    ? bpoints[selectedBreakpoint[0]]
+    : "100%";
+
   return (
     <div>
-      <Row gutter={[16, 16]}>
-        <Col {...listSpan}>
-          <VendorsListContainer />
-        </Col>
-        <Col {...formSapn}>
-          <VendorsFormContainer />
-        </Col>
-      </Row>
+      <VendorsListContainer />
+
+      <Drawer
+        width={drawerPercentage}
+        onClose={() => {
+          delete search.selectedvendor;
+          history.push({ search: queryString.stringify(search) });
+        }}
+        visible={selectedvendor}
+      >
+        <VendorsFormContainer />
+      </Drawer>
     </div>
   );
 }