fix: fix dismissible banner ssr bug (#547)

packages/data-explorer-ui/src/components/common/Banner/components/CookieBanner/cookieBanner.tsx

@@ -1,10 +1,8 @@
 import { AlertProps as MAlertProps, ButtonProps } from "@mui/material";
 import React, { forwardRef, Fragment, ReactNode } from "react";
 import { FLAG } from "../../../../../hooks/useFeatureFlag/common/entities";
-import {
-  getLocalStorage,
-  setLocalStorage,
-} from "../../../../../hooks/useFeatureFlag/common/utils";
+import { setLocalStorage } from "../../../../../hooks/useLocalStorage/common/utils";
+import { useLocalStorage } from "../../../../../hooks/useLocalStorage/useLocalStorage";
 import { ButtonPrimary } from "../../../Button/components/ButtonPrimary/buttonPrimary";
 import { DismissibleBanner } from "../DismissibleBanner/dismissibleBanner";
 import { CookieBanner as Banner } from "./cookieBanner.styles";
@@ -22,7 +20,8 @@ export const CookieBanner = ({
   message,
   secondaryAction,
 }: CookieBannerProps): JSX.Element => {
-  const isCookieAccepted = getLocalStorage(localStorageKey) === FLAG.TRUE;
+  const localStorage = useLocalStorage(localStorageKey);
+  const isCookieAccepted = localStorage === FLAG.TRUE;
 
   // Callback fired when the banner requests to be closed.
   const onDismiss = (): void => {

packages/data-explorer-ui/src/components/common/Banner/components/DismissibleBanner/dismissibleBanner.tsx

@@ -3,7 +3,7 @@ import {
   AlertProps as MAlertProps,
   Fade,
 } from "@mui/material";
-import React, { ElementType, ReactNode, useState } from "react";
+import React, { ElementType, ReactNode, useEffect, useState } from "react";
 
 export interface CookieBannerProps extends MAlertProps {
   Alert?: ElementType;
@@ -21,14 +21,19 @@ export const DismissibleBanner = ({
   open,
   ...props /* Spread props to allow for Mui AlertProps specific prop overrides. */
 }: CookieBannerProps): JSX.Element => {
-  const [isIn, setIsIn] = useState<boolean>(open);
+  const [isIn, setIsIn] = useState<boolean>(false);
 
   // Callback fired when the component requests to be closed.
   const onClose = (): void => {
     onDismiss?.();
     setIsIn(false);
   };
 
+  // Sets the open state.
+  useEffect(() => {
+    setIsIn(open);
+  }, [open]);
+
   return (
     <Fade in={isIn} unmountOnExit>
       <Alert className={className} onClose={onClose} {...props}>

packages/data-explorer-ui/src/hooks/useFeatureFlag/common/utils.ts

@@ -1,3 +1,5 @@
+import { setLocalStorage } from "../../useLocalStorage/common/utils";
+
 /**
  * Set feature flags from URL.
  * @param features - List of feature flags.
@@ -13,23 +15,3 @@ export function setFeatureFlags(features: string[]): void {
     }
   }
 }
-
-/**
- * Return the value for the specified key.
- * @param key - Key.
- * @returns value.
- */
-export function getLocalStorage(key: string): string | null {
-  if (typeof window === "undefined") return null;
-  return window?.localStorage?.getItem(key) ?? null;
-}
-
-/**
- * Set the value for the specified key.
- * @param key - Key.
- * @param value - Value.
- */
-export function setLocalStorage(key: string, value: string): void {
-  if (typeof window === "undefined") return;
-  window?.localStorage?.setItem(key, value);
-}

packages/data-explorer-ui/src/hooks/useFeatureFlag/useFeatureFlag.ts

@@ -1,22 +1,19 @@
 import { useEffect, useState } from "react";
+import { getLocalStorage } from "../useLocalStorage/common/utils";
 import { FLAG } from "./common/entities";
-import { getLocalStorage } from "./common/utils";
 
 /**
  * Determine if feature is available to user.
  * @param featureFlag - Name of feature.
  * @returns true if feature is available to user.
  */
 export function useFeatureFlag(featureFlag: string): boolean {
-  /* Flag value from local storage. */
-  const enabled = getLocalStorage(featureFlag) === FLAG.TRUE;
-  /* Flag indicating if feature is available to user. */
-  const [isEnabled, setIsEnabled] = useState<boolean>(enabled);
+  const [isEnabled, setIsEnabled] = useState<boolean>(false);
 
-  /* Update state of enabled flag and redirect user if feature is not available to them. */
+  // Sets state of enabled flag.
   useEffect(() => {
-    setIsEnabled(enabled);
-  }, [enabled, featureFlag]);
+    setIsEnabled(getLocalStorage(featureFlag) === FLAG.TRUE);
+  }, [featureFlag]);
 
   return isEnabled;
 }

packages/data-explorer-ui/src/hooks/useLocalStorage/common/utils.ts

@@ -0,0 +1,19 @@
+/**
+ * Return the value for the specified key.
+ * @param key - Key.
+ * @returns value.
+ */
+export function getLocalStorage(key: string): string | null {
+  if (typeof window === "undefined") return null;
+  return window?.localStorage?.getItem(key) ?? null;
+}
+
+/**
+ * Set the value for the specified key.
+ * @param key - Key.
+ * @param value - Value.
+ */
+export function setLocalStorage(key: string, value: string): void {
+  if (typeof window === "undefined") return;
+  window?.localStorage?.setItem(key, value);
+}

packages/data-explorer-ui/src/hooks/useLocalStorage/useLocalStorage.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+import { getLocalStorage } from "./common/utils";
+
+/**
+ * Determine local storage value.
+ * @param key - Local storage key.
+ * @returns local storage value.
+ */
+export function useLocalStorage(key: string): string | null {
+  const [value, setValue] = useState<string | null>(null);
+
+  useEffect(() => {
+    setValue(getLocalStorage(key));
+  }, [key]);
+
+  return value;
+}