Progress

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

@@ -1,45 +1,44 @@
 import { Drawer, Grid } from "antd";
-import queryString from "query-string";
 import React from "react";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import VendorsFormContainer from "../../components/vendors-form/vendors-form.container";
 import VendorsListContainer from "../../components/vendors-list/vendors-list.container";
 
 export default function ShopVendorPageComponent() {
-  const search = queryString.parse(useLocation().search);
-  const { selectedvendor } = search;
-  const history = useNavigate();
+    const [searchParams] = useSearchParams();
+    const { selectedvendor } = Object.fromEntries(searchParams);
+    const navigate = useNavigate();
 
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
+    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%";
+    const bpoints = {
+        xs: "100%",
+        sm: "100%",
+        md: "100%",
+        lg: "50%",
+        xl: "50%",
+        xxl: "45%",
+    };
+    const drawerPercentage = selectedBreakpoint
+        ? bpoints[selectedBreakpoint[0]]
+        : "100%";
 
-  return (
-    <div>
-      <VendorsListContainer />
+    return (
+        <div>
+            <VendorsListContainer />
 
-      <Drawer
-        width={drawerPercentage}
-        onClose={() => {
-          delete search.selectedvendor;
-          history.push({ search: queryString.stringify(search) });
-        }}
-        visible={selectedvendor}
-      >
-        <VendorsFormContainer />
-      </Drawer>
-    </div>
-  );
-}
+            <Drawer
+                width={drawerPercentage}
+                onClose={() => {
+                    searchParams.delete("selectedvendor");
+                    navigate({ search: searchParams.toString() });
+                }}
+                visible={selectedvendor}
+            >
+                <VendorsFormContainer />
+            </Drawer>
+        </div>
+    );
+}