diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx index a6a659bb7..cec098495 100644 --- a/src/components/molecules/FormFields/Price/index.tsx +++ b/src/components/molecules/FormFields/Price/index.tsx @@ -6,6 +6,7 @@ import Tabs from '../../../atoms/Tabs' import Fixed from './Fixed' import Dynamic from './Dynamic' import { useField } from 'formik' +import { useUserPreferences } from '../../../../providers/UserPreferences' const query = graphql` query PriceFieldQuery { @@ -35,6 +36,7 @@ const query = graphql` ` export default function Price(props: InputProps): ReactElement { + const { debug } = useUserPreferences() const data = useStaticQuery(query) const content = data.content.edges[0].node.childPagesJson.price @@ -89,9 +91,11 @@ export default function Price(props: InputProps): ReactElement { return (
-
-        {JSON.stringify(field.value)}
-      
+ {debug === true && ( +
+          {JSON.stringify(field.value)}
+        
+ )}
) } diff --git a/src/providers/UserPreferences.tsx b/src/providers/UserPreferences.tsx index cda5003b8..f85259134 100644 --- a/src/providers/UserPreferences.tsx +++ b/src/providers/UserPreferences.tsx @@ -3,7 +3,8 @@ import React, { useContext, ReactElement, ReactNode, - useState + useState, + useEffect } from 'react' declare type Currency = 'EUR' | 'USD' @@ -11,19 +12,46 @@ declare type Currency = 'EUR' | 'USD' interface UserPreferencesValue { debug: boolean currency: Currency - setDebug: (value: boolean) => void - setCurrency: (value: string) => void + setDebug?: (value: boolean) => void + setCurrency?: (value: string) => void } const UserPreferencesContext = createContext(null) +const localStorageKey = 'ocean-user-preferences' + +function getLocalStorage() { + const storageParsed = + window && JSON.parse(window.localStorage.getItem(localStorageKey)) + return storageParsed +} + +function setLocalStorage(values: UserPreferencesValue) { + return ( + window && + window.localStorage.setItem(localStorageKey, JSON.stringify(values)) + ) +} + function UserPreferencesProvider({ children }: { children: ReactNode }): ReactElement { - const [debug, setDebug] = useState(false) - const [currency, setCurrency] = useState('EUR') + const localStorage = getLocalStorage() + + // Set default values from localStorage + const [debug, setDebug] = useState( + (localStorage && localStorage.debug) || false + ) + const [currency, setCurrency] = useState( + (localStorage && localStorage.currency) || 'EUR' + ) + + // Write values to localStorage on change + useEffect(() => { + setLocalStorage({ debug, currency }) + }, [debug, currency]) return (