Progress

client/src/pages/shop-csi/shop-csi.container.page.jsx

@@ -1,22 +1,19 @@
 import { Row, Col } from "antd";
 import { useQuery } from "@apollo/client";
-import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import CsiResponseFormContainer from "../../components/csi-response-form/csi-response-form.container";
 import CsiResponseListPaginated from "../../components/csi-response-list-paginated/csi-response-list-paginated.component";
 import { QUERY_CSI_RESPONSE_PAGINATED } from "../../graphql/csi.queries";
-import {
-  setBreadcrumbs,
-  setSelectedHeader,
-} from "../../redux/application/application.actions";
+import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
-import {pageLimit} from "../../utils/config";
+import { pageLimit } from "../../utils/config";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -26,36 +23,30 @@ const mapDispatchToProps = (dispatch) => ({
   setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function ShopCsiContainer({
-  bodyshop,
-  setBreadcrumbs,
-  setSelectedHeader,
-}) {
+export function ShopCsiContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
-
-  const searchParams = queryString.parse(useLocation().search);
-  const { page, sortcolumn, sortorder } = searchParams;
+  const [searchParams] = useSearchParams();
+  const { page, sortcolumn, sortorder } = Object.fromEntries(searchParams);
 
   const { loading, error, data, refetch } = useQuery(
-    QUERY_CSI_RESPONSE_PAGINATED,
-    {
-      fetchPolicy: "network-only",
-      nextFetchPolicy: "network-only",
-      variables: {
-        //search: search || "",
-        offset: page ? (page - 1) * pageLimit : 0,
-        limit: pageLimit,
-        order: [
-          {
-            [sortcolumn || "completedon"]: sortorder
-              ? sortorder === "descend"
-                ? "desc_nulls_last"
-                : "asc"
-              : "desc_nulls_last",
-          },
-        ],
-      },
-    }
+      QUERY_CSI_RESPONSE_PAGINATED,
+      {
+        fetchPolicy: "network-only",
+        nextFetchPolicy: "network-only",
+        variables: {
+          offset: page ? (page - 1) * pageLimit : 0,
+          limit: pageLimit,
+          order: [
+            {
+              [sortcolumn || "completedon"]: sortorder
+                  ? sortorder === "descend"
+                      ? "desc_nulls_last"
+                      : "asc"
+                  : "desc_nulls_last",
+            },
+          ],
+        },
+      }
   );
 
   useEffect(() => {
@@ -73,26 +64,21 @@ export function ShopCsiContainer({
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <RbacWrapper
-      action="csi:page"
-      // noauth={
-      //   <AlertComponent message="You don't have acess to see this screen." />
-      // }
-    >
-      <Row gutter={16}>
-        <Col span={10}>
-          <CsiResponseListPaginated
-            refetch={refetch}
-            loading={loading}
-            responses={data ? data.csi : []}
-            total={data ? data.csi_aggregate.aggregate.count : 0}
-          />
-        </Col>
-        <Col span={14}>
-          <CsiResponseFormContainer />
-        </Col>
-      </Row>
-    </RbacWrapper>
+      <RbacWrapper action="csi:page">
+        <Row gutter={16}>
+          <Col span={10}>
+            <CsiResponseListPaginated
+                refetch={refetch}
+                loading={loading}
+                responses={data ? data.csi : []}
+                total={data ? data.csi_aggregate.aggregate.count : 0}
+            />
+          </Col>
+          <Col span={14}>
+            <CsiResponseFormContainer />
+          </Col>
+        </Row>
+      </RbacWrapper>
   );
 }
-export default connect(mapStateToProps, mapDispatchToProps)(ShopCsiContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(ShopCsiContainer);