Progress

client/src/pages/time-tickets/time-tickets.container.jsx

@@ -1,11 +1,10 @@
 import { useQuery } from "@apollo/client";
 import { Col, Row, Space } from "antd";
 import moment from "moment";
-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 RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
@@ -28,28 +27,17 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function TimeTicketsContainer({
-  bodyshop,
-  setBreadcrumbs,
-  setSelectedHeader,
-}) {
+                                       bodyshop,
+                                       setBreadcrumbs,
+                                       setSelectedHeader,
+                                     }) {
   const { t } = useTranslation();
-  useEffect(() => {
-    document.title = t("titles.timetickets");
-    setSelectedHeader("timetickets");
-    setBreadcrumbs([
-      {
-        link: "/manage/timetickets",
-        label: t("titles.bc.timetickets"),
-      },
-    ]);
-  }, [t, setBreadcrumbs, setSelectedHeader]);
-
-  const searchParams = queryString.parse(useLocation().search);
-  const { start, end } = searchParams;
+  const [searchParams] = useSearchParams();
+  const { start, end } = Object.fromEntries(searchParams);
 
   const startDate = start
-    ? moment(start)
-    : moment().startOf("week").subtract(7, "days");
+      ? moment(start)
+      : moment().startOf("week").subtract(7, "days");
   const endDate = end ? moment(end) : moment().endOf("week");
 
   const { loading, error, data } = useQuery(QUERY_TIME_TICKETS_IN_RANGE, {
@@ -61,38 +49,49 @@ export function TimeTicketsContainer({
     nextFetchPolicy: "network-only",
   });
 
+  useEffect(() => {
+    document.title = t("titles.timetickets");
+    setSelectedHeader("timetickets");
+    setBreadcrumbs([
+      {
+        link: "/manage/timetickets",
+        label: t("titles.bc.timetickets"),
+      },
+    ]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
+
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <RbacWrapper action="timetickets:list">
-      <Row gutter={[16, 16]}>
-        <Col span={24}>
-          <TimeTicketList
-            loading={loading}
-            timetickets={data ? data.timetickets : []}
-            extra={
-              <Space wrap>
-                <TimeTicketsAttendanceTable />
-                <TimeTicketsPayrollTable />
-                <TimeTicketsDatesSelector />
-              </Space>
-            }
-          />
-        </Col>
-        <Col span={24}>
-          <TimeTicketsSummaryEmployees
-            loading={loading}
-            timetickets={data ? data.timetickets : []}
-            startDate={startDate}
-            endDate={endDate}
-          />
-        </Col>
-      </Row>
-    </RbacWrapper>
+      <RbacWrapper action="timetickets:list">
+        <Row gutter={[16, 16]}>
+          <Col span={24}>
+            <TimeTicketList
+                loading={loading}
+                timetickets={data ? data.timetickets : []}
+                extra={
+                  <Space wrap>
+                    <TimeTicketsAttendanceTable />
+                    <TimeTicketsPayrollTable />
+                    <TimeTicketsDatesSelector />
+                  </Space>
+                }
+            />
+          </Col>
+          <Col span={24}>
+            <TimeTicketsSummaryEmployees
+                loading={loading}
+                timetickets={data ? data.timetickets : []}
+                startDate={startDate}
+                endDate={endDate}
+            />
+          </Col>
+        </Row>
+      </RbacWrapper>
   );
 }
 
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(TimeTicketsContainer);
+    mapStateToProps,
+    mapDispatchToProps
+)(TimeTicketsContainer);