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 (