diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/_app.tsx | 45 | ||||
| -rw-r--r-- | pages/settings.tsx | 9 |
2 files changed, 10 insertions, 44 deletions
diff --git a/pages/_app.tsx b/pages/_app.tsx index 08338d0..3c238b9 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,56 +1,19 @@ import Head from 'next/head'; -import axios from 'axios'; -import { useState, useEffect } from 'react'; - -import { userPreferences } from '../api/api'; +import { PreferencesContextWrapper } from '../components/preferencesContext'; import '../styles/global.css'; import '../styles/dark.css'; import '../styles/disk.css'; -function applyPreferences(preferences: userPreferences) { - if(typeof preferences === "undefined") return; - if(typeof preferences.darkMode !== "undefined") - document.getElementsByTagName("html")[0].classList[preferences.darkMode ? "add" : "remove"]("dark"); -} - export default function VierOpEenRijWebsite({ Component, pageProps }) { - var [gotData, setGotData] = useState(false); - var [preferences, setPreferences] = useState<userPreferences>(); - - useEffect(() => {(async() => { - if (gotData) return; - if (typeof window === "undefined") return; - if (!document.cookie.includes("token")) return; - - var local_prefs = window.localStorage.getItem("preferences"); - if (local_prefs) { - var local_prefs_json = JSON.parse(local_prefs) as userPreferences; - console.log(typeof local_prefs_json); - setPreferences(local_prefs_json); - applyPreferences(local_prefs_json); - } - - var preferencesReq = await axios.request<{ preferences: userPreferences; }>({ - method: "get", - url: `/api/user/preferences`, - headers: {"content-type": "application/json"} - }); - - window.localStorage.setItem("preferences", JSON.stringify(preferencesReq.data.preferences)); - setPreferences(preferencesReq.data.preferences); - - setGotData(true); - })()}) - - useEffect(() => applyPreferences(preferences), [preferences]); - return <div> <Head> <title>4 op een rij</title> <link rel="stylesheet" href="/font/stylesheet.css"/> </Head> - <Component {...pageProps}/> + <PreferencesContextWrapper> + <Component {...pageProps}/> + </PreferencesContextWrapper> </div> } diff --git a/pages/settings.tsx b/pages/settings.tsx index 5034bd7..a713a5a 100644 --- a/pages/settings.tsx +++ b/pages/settings.tsx @@ -1,4 +1,4 @@ -import { CSSProperties } from 'react'; +import { CSSProperties, useContext } from 'react'; import * as cookies from 'react-cookies'; import { NavBar } from '../components/navbar'; @@ -6,6 +6,7 @@ import { CenteredPage, PageTitle } from '../components/page'; import { Vierkant, IconLabelButton, CheckBox, ColorPicker } from '../components/ui'; import { AccountAvatar } from '../components/account'; import { CurrentGameSettings } from '../components/gameSettings'; +import PreferencesContext from '../components/preferencesContext'; import EditOutlinedIcon from '@material-ui/icons/EditOutlined'; import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined'; @@ -17,6 +18,8 @@ var SettingsSubsectionStyle: CSSProperties = { }; export default function SettingsPage() { + var { preferences, updatePreference } = useContext(PreferencesContext); + return ( <div> <NavBar/> @@ -67,8 +70,8 @@ export default function SettingsPage() { </div> <div style={SettingsSubsectionStyle}> <div style={{ float: "right" }}> - <CheckBox state={typeof window !== "undefined" && document.getElementsByTagName("html")[0].classList.contains("dark")} onclick={ - (state) => document.getElementsByTagName("html")[0].classList[state ? "add" : "remove"]("dark") + <CheckBox state={preferences?.darkMode} onclick={ + state => updatePreference({"darkMode": state}) }/> </div> <h3>Donkere modus</h3> |