import React, { createContext, useState, useEffect, useContext } from 'react' import translations from 'configs/translations' import useUser from 'hooks/useUser' const SettingsContext = createContext() export const SettingsProvider = ({children}) => { const defaultSettings = {theme: 'green', language: 'en'} const {user} = useUser() const [data, setData] = useState() const setSettings = s => { if (typeof window !== "undefined") { window.localStorage.setItem('loggedOutSettings', JSON.stringify(s(data))) } setData(s) } const t = key => data && data.language && translations[data.language][key] ? translations[data.language][key] ? translations[data.language][key] : translations.en[key] : '...' useEffect(() => { const loggedOutSettings = JSON.parse(localStorage.getItem('loggedOutSettings')) if (user && user.isLoggedIn) { const settings = {theme: user.theme, language: user.language} if (typeof window !== "undefined") { window.localStorage.setItem('loggedOutSettings', JSON.stringify(settings)) } setData(settings) } else if (loggedOutSettings) { setData(loggedOutSettings) } else { setData(defaultSettings) } }, [user]) return ( {children} ) } const useSettings = () => useContext(SettingsContext) export default useSettings