From 709bd2fddcea033d162f61a076ec82ce34969887 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Thu, 11 Mar 2021 14:28:30 +0100 Subject: moved preferencesContext to seperate file + updatePreferences api endpoint --- pages/_app.tsx | 45 ++++----------------------------------------- pages/settings.tsx | 9 ++++++--- 2 files changed, 10 insertions(+), 44 deletions(-) (limited to 'pages') 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(); - - 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
4 op een rij - + + +
} 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 (
@@ -67,8 +70,8 @@ export default function SettingsPage() {
- document.getElementsByTagName("html")[0].classList[state ? "add" : "remove"]("dark") + updatePreference({"darkMode": state}) }/>

Donkere modus

-- cgit v1.2.3