feat(#3681): add local storage for the value persistence

Author: MSzalowski

govtool/frontend/src/components/organisms/MaintenanceEndingBanner/MaintenanceEndingBannerContext.tsx

@@ -6,12 +6,17 @@ import {
   useRef,
   useState,
   useLayoutEffect,
+  useEffect,
 } from "react";
+import {
+  getItemFromLocalStorage,
+  MAINTENANCE_ENDING_BANNER_EXPANDED_KEY,
+  setItemToLocalStorage,
+} from "@/utils";
 
 interface MaintenanceEndingBannerContextType {
   ref: React.RefObject<HTMLDivElement>;
   height: number;
-  y: number;
   isExpanded: boolean;
   toggleExpanded: () => void;
 }
@@ -20,7 +25,6 @@ const MaintenanceEndingBannerContext =
   createContext<MaintenanceEndingBannerContextType>({
     ref: createRef<HTMLDivElement>(),
     height: 0,
-    y: 0,
     isExpanded: true,
     toggleExpanded: () => {},
   });
@@ -30,10 +34,19 @@ export const MaintenanceEndingBannerProvider = ({
 }: React.PropsWithChildren) => {
   const ref = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState(0);
-  const [y, setY] = useState(0);
-  const [isExpanded, setIsExpanded] = useState(true);
+  const [isExpanded, setIsExpanded] = useState<boolean>(true);
+
+  useEffect(() => {
+    const storedValue = getItemFromLocalStorage(
+      MAINTENANCE_ENDING_BANNER_EXPANDED_KEY,
+    );
+    if (storedValue !== null) {
+      setIsExpanded(JSON.parse(storedValue));
+    }
+  }, []);
 
   const toggleExpanded = () => {
+    setItemToLocalStorage(MAINTENANCE_ENDING_BANNER_EXPANDED_KEY, !isExpanded);
     setIsExpanded((prev) => !prev);
   };
 
@@ -44,7 +57,6 @@ export const MaintenanceEndingBannerProvider = ({
       if (ref.current) {
         const rect = ref.current.getBoundingClientRect();
 
-        setY(rect.top);
         setHeight(rect.height);
       }
     };
@@ -78,11 +90,10 @@ export const MaintenanceEndingBannerProvider = ({
     () => ({
       ref,
       height,
-      y,
       isExpanded,
       toggleExpanded,
     }),
-    [ref, height, y, isExpanded, toggleExpanded],
+    [ref, height, isExpanded, toggleExpanded],
   );
 
   return (

govtool/frontend/src/context/contextProviders.tsx

@@ -7,6 +7,7 @@ import { FeatureFlagProvider } from "./featureFlag";
 import { GovernanceActionProvider } from "./governanceAction";
 import { AdaHandleProvider } from "./adaHandle";
 import { ProposalDiscussionProvider } from "./proposalDiscussion";
+
 import { MaintenanceEndingBannerProvider } from "@/components/organisms/MaintenanceEndingBanner/MaintenanceEndingBannerContext";
 
 interface Props {
@@ -15,23 +16,25 @@ interface Props {
 
 const ContextProviders = ({ children }: Props) => (
   <AppContextProvider>
-    <MaintenanceEndingBannerProvider>
-      <GovernanceActionProvider>
-        <ProposalDiscussionProvider>
-          <FeatureFlagProvider>
-            <AdaHandleProvider>
-              <ModalProvider>
-                <SnackbarProvider>
-                  <DataActionsBarProvider>
-                    <CardanoProvider>{children}</CardanoProvider>
-                  </DataActionsBarProvider>
-                </SnackbarProvider>
-              </ModalProvider>
-            </AdaHandleProvider>
-          </FeatureFlagProvider>
-        </ProposalDiscussionProvider>
-      </GovernanceActionProvider>
-    </MaintenanceEndingBannerProvider>
+    <GovernanceActionProvider>
+      <ProposalDiscussionProvider>
+        <FeatureFlagProvider>
+          <AdaHandleProvider>
+            <ModalProvider>
+              <SnackbarProvider>
+                <DataActionsBarProvider>
+                  <CardanoProvider>
+                    <MaintenanceEndingBannerProvider>
+                      {children}
+                    </MaintenanceEndingBannerProvider>
+                  </CardanoProvider>
+                </DataActionsBarProvider>
+              </SnackbarProvider>
+            </ModalProvider>
+          </AdaHandleProvider>
+        </FeatureFlagProvider>
+      </ProposalDiscussionProvider>
+    </GovernanceActionProvider>
   </AppContextProvider>
 );
 

govtool/frontend/src/utils/localStorage.ts

@@ -3,6 +3,8 @@ export const PROTOCOL_PARAMS_KEY = "protocol_params";
 export const NETWORK_METRICS_KEY = "network_metrics";
 export const NETWORK_INFO_KEY = "network_info";
 export const NETWORK_TOTAL_STAKE_KEY = "network_total_stake";
+export const MAINTENANCE_ENDING_BANNER_EXPANDED_KEY =
+  "maintenance_ending_banner_expanded";
 
 export const WALLET_LS_KEY = "wallet_data";