From 05b071b320c9856683419d328e84f4d843e6c968 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Thu, 22 Apr 2021 13:20:02 +0200
Subject: theme saved to preferences

---
 components/preferencesContext.tsx |  7 ++---
 components/themes.tsx             | 66 ++++++++++++++++++++++++---------------
 components/ui.tsx                 |  2 +-
 3 files changed, 44 insertions(+), 31 deletions(-)

(limited to 'components')

diff --git a/components/preferencesContext.tsx b/components/preferencesContext.tsx
index 965b185..f7b6db8 100644
--- a/components/preferencesContext.tsx
+++ b/components/preferencesContext.tsx
@@ -5,9 +5,8 @@ import { userPreferences } from '../api/api';
 
 function applyPreferences(preferences: userPreferences) {
 	if (typeof preferences === 'undefined') return;
-	if (typeof preferences.darkMode !== 'undefined') {
-		document.getElementsByTagName('html')[0].classList[preferences.darkMode ? 'add' : 'remove']('dark');
-	}
+	document.getElementsByTagName('html')[0].classList[preferences.darkMode ? 'add' : 'remove']('dark');
+	document.getElementById('theme').setAttribute('href', '/themes/' + preferences.theme);
 }
 
 var PreferencesContext = createContext<
@@ -20,7 +19,7 @@ export function PreferencesContextWrapper(props: { children?: ReactNode; }) {
 
 	var [preferences, setPreferences] = useState<userPreferences>();
 
-	var [dummy, setDummy] = useState(false); //FIXME: janky fix to cause rerender
+	var [dummy, setDummy] = useState(false); // FIXME: janky fix to cause rerender
 
 	useEffect(() => {
 		(async () => {
diff --git a/components/themes.tsx b/components/themes.tsx
index be98685..547319f 100644
--- a/components/themes.tsx
+++ b/components/themes.tsx
@@ -1,7 +1,8 @@
-import { useEffect, useState, CSSProperties } from 'react';
 import axios from 'axios';
+import { CSSProperties, useContext, useEffect, useState } from 'react';
 
 import { userPreferences } from '../api/api';
+import PreferencesContext from '../components/preferencesContext';
 import { Button } from './ui';
 
 type previewThemeColors = {
@@ -9,19 +10,21 @@ type previewThemeColors = {
 	fg: string;
 	a: string;
 	b: string;
-}
+};
 
 export type themeInfo = {
 	name: string;
 	url: string;
 	dark: previewThemeColors;
 	light: previewThemeColors;
-}
+};
 
 export type themeJSON = themeInfo[];
 
-export default function ThemePicker(props: { preferences?: userPreferences }) {
-	var [ themes, setThemes ] = useState<themeJSON>([]);
+export default function ThemePicker(props: { preferences?: userPreferences; }) {
+	var { preferences, updatePreference } = useContext(PreferencesContext);
+
+	var [themes, setThemes] = useState<themeJSON>([]);
 
 	useEffect(() => {
 		axios.request<themeJSON>({
@@ -30,32 +33,43 @@ export default function ThemePicker(props: { preferences?: userPreferences }) {
 		}).then(response => {
 			setThemes(response.data);
 		}).catch(err => {
-			console.error(err)
-		})
+			console.error(err);
+		});
 	}, []);
 
 	return <>
-		{themes.map(theme => <ThemeCard theme={theme} dark={props.preferences?.darkMode}/>)}
+		{themes.map(theme =>
+			<ThemeCard
+				theme={theme}
+				dark={props.preferences?.darkMode}
+				setTheme={theme => updatePreference({ theme })}
+			/>
+		)}
 	</>;
 }
 
-export function ThemeCard(props: { theme: themeInfo; dark?: boolean }) {
-	var mode = props.dark ? "dark" : "light";
-
-	return <div className="dispinbl themeCardWrapper" style={{
-		"--bg": props.theme[mode].bg,
-		"--fg": props.theme[mode].fg,
-		"--a": props.theme[mode].a,
-		"--b": props.theme[mode].b,
-	} as CSSProperties}>
-	<Button className="themeCard dispinbl drop-1" onclick={() => {
-		document.getElementById("theme").setAttribute("href", "/themes/" + props.theme.url)
-	}}>
-			<span className="name">{props.theme.name}</span>
-				<div className="posabs r0 v0 disks">
-					<div className="disk posabs a"/>
-					<div className="disk posabs b"/>
-				</div>
+export function ThemeCard(props: {
+	theme: themeInfo;
+	dark?: boolean;
+	setTheme: (theme: string) => void;
+}) {
+	var mode = props.dark ? 'dark' : 'light';
+
+	return <div
+		className='dispinbl themeCardWrapper'
+		style={{
+			'--bg': props.theme[mode].bg,
+			'--fg': props.theme[mode].fg,
+			'--a': props.theme[mode].a,
+			'--b': props.theme[mode].b,
+		} as CSSProperties}
+	>
+		<Button className='themeCard dispinbl drop-1' onclick={() => props.setTheme(props.theme.url)}>
+			<span className='name'>{props.theme.name}</span>
+			<div className='posabs r0 v0 disks'>
+				<div className='disk posabs a' />
+				<div className='disk posabs b' />
+			</div>
 		</Button>
-	</div>
+	</div>;
 }
diff --git a/components/ui.tsx b/components/ui.tsx
index c92ebfe..bf8c65d 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -123,7 +123,7 @@ export function CheckBox(props: {
 	onclick?: (state: boolean) => void;
 }) {
 	return <div
-        onClick={() => props.onclick && props.onclick(!props.state)}
+		onClick={() => props.onclick && props.onclick(!props.state)}
 		id={props.id}
 		className={'checkbox dispinbl ' + (props.state ? 'on' : 'off')}
 	>
-- 
cgit v1.2.3