From ba96ef52c1eda8bc3d449dd239ba506fc9dbc755 Mon Sep 17 00:00:00 2001
From: Nathan Seva <thykof@protonmail.ch>
Date: Thu, 25 Jan 2024 10:34:39 +0100
Subject: [PATCH] improve theme storage key

---
 src/components/ThemeMode/ThemeMode.stories.tsx | 2 +-
 src/components/ThemeMode/ThemeMode.test.tsx    | 2 +-
 src/components/ThemeMode/ThemeMode.tsx         | 5 +++--
 src/components/Toast/Toast.stories.tsx         | 2 +-
 src/components/Toast/Toast.test.tsx            | 8 +++++++-
 src/components/Toast/Toast.tsx                 | 8 +++-----
 src/util/useLocalStorage.ts                    | 7 ++++++-
 7 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/ThemeMode/ThemeMode.stories.tsx b/src/components/ThemeMode/ThemeMode.stories.tsx
index 41348e9e..54add784 100644
--- 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
index 6fc2fd5a..1fd8c74f 100644
--- 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
index 34a3bc07..28026178 100644
--- 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
index 8670d799..09882008 100644
--- 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
index 77f74e7e..4a00f6e3 100644
--- 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
index e7f87b73..2a6aa18e 100644
--- 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
index 9c7ee066..87758d8b 100644
--- 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(() => {