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: () => ,
+ render: () => ,
};
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();
+ render();
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(
- '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 = {
-
+
>
),
};
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();
+ render(
+ ,
+ );
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(
- 'massa-station-theme',
- 'theme-dark',
- );
+ const [storedTheme] = useLocalStorage(storageKey, 'theme-dark');
const [theme, setTheme] = useState(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, (value: T) => void] {
const [value, setValue] = useState(() => {
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(() => {