Save tab state to local storage

uktrade · Dec 17, 2024 · f22bb57 · f22bb57
1 parent 4f59556
commit f22bb57
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
@@ -29,6 +29,14 @@ export default function Payroll() {
     initialPayModifiersState,
   );
   const [saveSuccess, setSaveSuccess] = useState(false);
+  const [activeTab, setActiveTab] = useState(() => {
+    const savedTab = localStorage.getItem("activeTab");
+    return savedTab ? parseInt(savedTab) : 0;
+  });
+
+  useEffect(() => {
+    localStorage.setItem("activeTab", activeTab);
+  }, [activeTab]);
 
   useEffect(() => {
     const savedSuccessFlag = localStorage.getItem("saveSuccess");
@@ -98,7 +106,7 @@ export default function Payroll() {
           </div>
         </div>
       )}
-      <Tabs>
+      <Tabs activeTab={activeTab} setActiveTab={setActiveTab}>
         <Tab label="Dashboard" key="1">
           <h2 className="govuk-heading-m">Payroll</h2>
           <PayrollTable

diff --git a/front_end/src/Components/EditPayroll/Tabs/index.jsx b/front_end/src/Components/EditPayroll/Tabs/index.jsx
@@ -1,7 +1,6 @@
 import { useState } from "react";
 
-export default function Tabs({ children }) {
-  const [activeTab, setActiveTab] = useState(0);
+export default function Tabs({ activeTab, setActiveTab, children }) {
   const tabs = Array.isArray(children) ? children : [children];
   return (
     <>