Progress

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

@@ -1,12 +1,9 @@
 import Icon, { FieldTimeOutlined } from "@ant-design/icons";
 import { Tabs } from "antd";
-import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { FaShieldAlt } from "react-icons/fa";
 import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
 import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
@@ -17,6 +14,8 @@ import {
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import {createStructuredSelector} from "reselect";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -29,9 +28,9 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
-  const searchParams = queryString.parse(useLocation().search);
-  const { tab } = searchParams;
-  const history = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { tab } = Object.fromEntries(searchParams);
+  const navigate = useNavigate();
   useEffect(() => {
     document.title = t("titles.scoreboard");
     setSelectedHeader("scoreboard");
@@ -44,60 +43,58 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
   }, [t, setBreadcrumbs, setSelectedHeader]);
 
   return (
-    <FeatureWrapper featureName="scoreboard">
-      <RbacWrapper action="scoreboard:view">
-        <Tabs
-          activeKey={tab || "sb"}
-          destroyInactiveTabPane
-          onChange={(key) => {
-            searchParams.tab = key;
-            history.push({
-              search: queryString.stringify(searchParams),
-            });
-          }}
-        >
-          <Tabs.TabPane
-            tab={
-              <span>
+      <FeatureWrapper featureName="scoreboard">
+        <RbacWrapper action="scoreboard:view">
+          <Tabs
+              activeKey={tab || "sb"}
+              destroyInactiveTabPane
+              onChange={(key) => {
+                searchParams.set("tab", key);
+                navigate({ search: searchParams.toString() });
+              }}
+          >
+            <Tabs.TabPane
+                tab={
+                  <span>
                 <Icon component={FaShieldAlt} />
-                {t("scoreboard.labels.jobs")}
+                    {t("scoreboard.labels.jobs")}
               </span>
-            }
-            destroyInactiveTabPane
-            key="sb"
-          >
-            <ScoreboardDisplay />
-          </Tabs.TabPane>
-          <Tabs.TabPane
-            tab={
-              <span>
+                }
+                destroyInactiveTabPane
+                key="sb"
+            >
+              <ScoreboardDisplay />
+            </Tabs.TabPane>
+            <Tabs.TabPane
+                tab={
+                  <span>
                 <FieldTimeOutlined />
-                {t("scoreboard.labels.timeticketsemployee")}
+                    {t("scoreboard.labels.timeticketsemployee")}
               </span>
-            }
-            destroyInactiveTabPane
-            key="tickets"
-          >
-            <ScoreboardTimeTickets />
-          </Tabs.TabPane>
-          <Tabs.TabPane
-            tab={
-              <span>
+                }
+                destroyInactiveTabPane
+                key="tickets"
+            >
+              <ScoreboardTimeTickets />
+            </Tabs.TabPane>
+            <Tabs.TabPane
+                tab={
+                  <span>
                 <FieldTimeOutlined />
-                {t("scoreboard.labels.allemployeetimetickets")}
+                    {t("scoreboard.labels.allemployeetimetickets")}
               </span>
-            }
-            destroyInactiveTabPane
-            key="ticketsstats"
-          >
-            <ScoreboardTimeTicketsStats />
-          </Tabs.TabPane>
-        </Tabs>
-      </RbacWrapper>
-    </FeatureWrapper>
+                }
+                destroyInactiveTabPane
+                key="ticketsstats"
+            >
+              <ScoreboardTimeTicketsStats />
+            </Tabs.TabPane>
+          </Tabs>
+        </RbacWrapper>
+      </FeatureWrapper>
   );
 }
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ScoreboardContainer);
+    mapStateToProps,
+    mapDispatchToProps
+)(ScoreboardContainer);