improve theme storage key

massalabs · Jan 25, 2024 · ba96ef5 · ba96ef5
1 parent e64e451
commit ba96ef5
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 12 deletions.
diff --git a/src/components/ThemeMode/ThemeMode.stories.tsx b/src/components/ThemeMode/ThemeMode.stories.tsx
@@ -6,5 +6,5 @@ export default {
 };
 
 export const _ThemeMode = {
-  render: () => <ThemeMode />,
+  render: () => <ThemeMode storageKey="stories-theme" />,
 };
diff --git a/src/components/ThemeMode/ThemeMode.test.tsx b/src/components/ThemeMode/ThemeMode.test.tsx
@@ -4,7 +4,7 @@ import { ThemeMode } from './ThemeMode';
 
 describe('Components | Button | ThemeMode', () => {
   test('it should render', () => {
-    render(<ThemeMode />);
+    render(<ThemeMode storageKey="test-theme" />);
 
     let button = screen.getByTestId('theme-mode');
 

diff --git a/src/components/ThemeMode/ThemeMode.tsx b/src/components/ThemeMode/ThemeMode.tsx
@@ -9,13 +9,14 @@ import { Theme } from '../../util/types';
 
 interface ThemeProps {
   onSetTheme?: (theme: Theme) => void;
+  storageKey: string;
 }
 
 export function ThemeMode(props: ThemeProps) {
-  let { onSetTheme } = props;
+  let { onSetTheme, storageKey } = props;
 
   const [storedTheme, setStoredTheme] = useLocalStorage<string>(
-    'massa-station-theme',
+    storageKey,
     'theme-dark',
   );
   const [theme, setTheme] = useState(storedTheme || 'theme-dark');

diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx
@@ -18,7 +18,7 @@ export const _Toast = {
       <Button onClick={() => toast.success('Uuurraa! This is a success CSS')}>
         Create SUCCESS Toast
       </Button>
-      <Toast theme="theme-dark" />
+      <Toast storageKey="stories-theme" theme="theme-dark" />
     </>
   ),
 };
diff --git a/src/components/Toast/Toast.test.tsx b/src/components/Toast/Toast.test.tsx
@@ -4,7 +4,13 @@ import { Toast } from './Toast';
 
 describe('Components | Toast', () => {
   test('it should render', () => {
-    render(<Toast content="this is the content" error="Oupps!" />);
+    render(
+      <Toast
+        storageKey="test-theme"
+        content="this is the content"
+        error="Oupps!"
+      />,
+    );
 
     let input = screen.getByTestId('toast');
 

diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
@@ -11,6 +11,7 @@ import { useLocalStorage } from '../../util/useLocalStorage';
 import { Transition } from '@headlessui/react';
 
 export interface ToastProps extends ComponentPropsWithoutRef<'div'> {
+  storageKey: string;
   error?: string;
   success?: string;
   theme?: string;
@@ -56,12 +57,9 @@ function Success(props: ToastProps) {
 export const toast = _toast;
 
 export function Toast(props: ToastProps) {
-  const { error, theme: _theme, ...rest } = props;
+  const { storageKey, error, theme: _theme, ...rest } = props;
 
-  const [storedTheme] = useLocalStorage<string>(
-    'massa-station-theme',
-    'theme-dark',
-  );
+  const [storedTheme] = useLocalStorage<string>(storageKey, 'theme-dark');
   const [theme, setTheme] = useState<string>(storedTheme);
   const isError = Boolean(error);
 

diff --git a/src/util/useLocalStorage.ts b/src/util/useLocalStorage.ts
@@ -28,7 +28,12 @@ export function useLocalStorage<T>(
 ): [T, (value: T) => void] {
   const [value, setValue] = useState<T>(() => {
     const storedValue = localStorage.getItem(storageKey);
-    return storedValue ? JSON.parse(storedValue) : fallbackState;
+    try {
+      return storedValue ? JSON.parse(storedValue) : fallbackState;
+    } catch (error) {
+      console.error(error);
+      return fallbackState;
+    }
   });
 
   useEffect(() => {