Progress

client/src/pages/phonebook/phonebook.page.component.jsx

@@ -6,7 +6,7 @@ import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_PHONEBOOK_PAGINATED } from "../../graphql/phonebook.queries";
@@ -25,7 +25,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function PhonebookPageComponent({ bodyshop, authLevel }) {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { page, sortcolumn, sortorder, search, phonebookentry } = searchParams;
   const history = useNavigate();
 
@@ -66,7 +66,7 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
     } else {
       delete searchParams.statusFilters;
     }
-    history.push({ search: queryString.stringify(searchParams) });
+    history({ search: queryString.stringify(searchParams) });
   };
 
   const columns = [
@@ -129,16 +129,16 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
 
   const handleNewPhonebook = () => {
     searchParams.phonebookentry = "new";
-    history.push({ search: queryString.stringify(searchParams) });
+    history({ search: queryString.stringify(searchParams) });
   };
 
   const handleOnRowClick = (record) => {
     if (record) {
       searchParams.phonebookentry = record.id;
-      history.push({ search: queryString.stringify(searchParams) });
+      history({ search: queryString.stringify(searchParams) });
     } else {
       delete searchParams.phonebookentry;
-      history.push({ search: queryString.stringify(searchParams) });
+      history({ search: queryString.stringify(searchParams) });
     }
   };
   const hasNoAccess = !HasRbacAccess({
@@ -162,7 +162,7 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
                 onClick={() => {
                   delete searchParams.search;
                   searchParams.page = 1;
-                  history.push({ search: queryString.stringify(searchParams) });
+                  history({ search: queryString.stringify(searchParams) });
                 }}
               >
                 {t("general.actions.clear")}
@@ -180,7 +180,7 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
             onSearch={(value) => {
               searchParams.search = value;
               searchParams.page = 1;
-              history.push({ search: queryString.stringify(searchParams) });
+              history({ search: queryString.stringify(searchParams) });
             }}
           />
         </Space>

client/src/pages/phonebook/phonebook.page.container.jsx

@@ -8,9 +8,9 @@ import {
 } from "../../redux/application/application.actions";
 import PhonebookPage from "./phonebook.page.component";
 import { Drawer, Grid } from "antd";
-import queryString from "query-string";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useSearchParams, useNavigate } from "react-router-dom";
 import PhonebookFormContainer from "../../components/phonebook-form/phonebook-form.container";
+
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
   setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
@@ -29,13 +29,16 @@ export function PhonebookContainer({ setBreadcrumbs, setSelectedHeader }) {
       },
     ]);
   }, [setBreadcrumbs, t, setSelectedHeader]);
-  const search = queryString.parse(useLocation().search);
-  const { phonebookentry } = search;
-  const history = useNavigate();
+
+    const [searchParams] = useSearchParams();
+    const search = Object.fromEntries(searchParams);
+    const { phonebookentry } = search;
+
+    const navigate = useNavigate();
 
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
+      .filter((screen) => !!screen[1])
+      .slice(-1)[0];
 
   const bpoints = {
     xs: "100%",
@@ -46,23 +49,23 @@ export function PhonebookContainer({ setBreadcrumbs, setSelectedHeader }) {
     xxl: "45%",
   };
   const drawerPercentage = selectedBreakpoint
-    ? bpoints[selectedBreakpoint[0]]
-    : "100%";
+      ? bpoints[selectedBreakpoint[0]]
+      : "100%";
 
   return (
-    <RbacWrapper action="phonebook:view">
-      <PhonebookPage />
-      <Drawer
-        width={drawerPercentage}
-        onClose={() => {
-          delete search.phonebookentry;
-          history.push({ search: queryString.stringify(search) });
-        }}
-        visible={phonebookentry}
-      >
-        <PhonebookFormContainer />
-      </Drawer>
-    </RbacWrapper>
+      <RbacWrapper action="phonebook:view">
+        <PhonebookPage />
+        <Drawer
+            width={drawerPercentage}
+            onClose={() => {
+              searchParams.delete("phonebookentry");
+              navigate({ search: searchParams.toString() });
+            }}
+            visible={phonebookentry}
+        >
+          <PhonebookFormContainer />
+        </Drawer>
+      </RbacWrapper>
   );
 }
-export default connect(null, mapDispatchToProps)(PhonebookContainer);
+export default connect(null, mapDispatchToProps)(PhonebookContainer);