From fce651a618ca6d0d64fbcea757c3e0f582e1b437 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Thu, 22 Apr 2021 12:35:53 +0200
Subject: beginnings of theme settings

---
 components/preferencesContext.tsx | 22 +++++++-------
 components/themes.tsx             | 61 +++++++++++++++++++++++++++++++++++++++
 components/ui.tsx                 | 20 ++-----------
 3 files changed, 75 insertions(+), 28 deletions(-)
 create mode 100644 components/themes.tsx

(limited to 'components')

diff --git a/components/preferencesContext.tsx b/components/preferencesContext.tsx
index a169be6..965b185 100644
--- a/components/preferencesContext.tsx
+++ b/components/preferencesContext.tsx
@@ -20,6 +20,8 @@ export function PreferencesContextWrapper(props: { children?: ReactNode; }) {
 
 	var [preferences, setPreferences] = useState<userPreferences>();
 
+	var [dummy, setDummy] = useState(false); //FIXME: janky fix to cause rerender
+
 	useEffect(() => {
 		(async () => {
 			if (!loggedIn) return;
@@ -31,31 +33,29 @@ export function PreferencesContextWrapper(props: { children?: ReactNode; }) {
 				applyPreferences(local_prefs_json);
 			}
 
-			if (!preferences) {
-				var preferencesReq = await axios.request<{ preferences: userPreferences; }>({
-					method: 'get',
-					url: `/api/user/preferences`,
-					headers: { 'content-type': 'application/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);
-			}
+			window.localStorage.setItem('preferences', JSON.stringify(preferencesReq.data.preferences));
+			setPreferences(preferencesReq.data.preferences);
 		})();
 	}, []);
 
-	useEffect(() => applyPreferences(preferences), [preferences]);
+	applyPreferences(preferences);
 
 	function updatePreference(newPreference: userPreferences) {
 		var prefs: userPreferences = Object.assign(preferences, newPreference);
 		setPreferences(prefs);
-		applyPreferences(prefs);
 		axios.request({
 			method: 'post',
 			url: `/api/user/preferences`,
 			headers: { 'content-type': 'application/json' },
 			data: { 'newPreferences': prefs },
 		});
+		setDummy(!dummy);
 	}
 
 	return <PreferencesContext.Provider value={{ preferences, updatePreference }}>
diff --git a/components/themes.tsx b/components/themes.tsx
new file mode 100644
index 0000000..be98685
--- /dev/null
+++ b/components/themes.tsx
@@ -0,0 +1,61 @@
+import { useEffect, useState, CSSProperties } from 'react';
+import axios from 'axios';
+
+import { userPreferences } from '../api/api';
+import { Button } from './ui';
+
+type previewThemeColors = {
+	bg: string;
+	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>([]);
+
+	useEffect(() => {
+		axios.request<themeJSON>({
+			method: 'get',
+			url: '/themes/themes.json',
+		}).then(response => {
+			setThemes(response.data);
+		}).catch(err => {
+			console.error(err)
+		})
+	}, []);
+
+	return <>
+		{themes.map(theme => <ThemeCard theme={theme} dark={props.preferences?.darkMode}/>)}
+	</>;
+}
+
+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>
+		</Button>
+	</div>
+}
diff --git a/components/ui.tsx b/components/ui.tsx
index 1e9997a..c92ebfe 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -122,26 +122,12 @@ export function CheckBox(props: {
 	id?: string;
 	onclick?: (state: boolean) => void;
 }) {
-	var [gotDefaultState, setGotDefaultState] = useState(false);
-	var [on, setOn] = useState(props.state);
-
-	useEffect(() => {
-		if (gotDefaultState) return;
-		setOn(props.state);
-		if (typeof props.state !== 'undefined') setGotDefaultState(true);
-	});
-
-	var toggle = () => {
-		setOn(!on);
-		props.onclick && props.onclick(!on);
-	};
-
 	return <div
-		onClick={toggle}
+        onClick={() => props.onclick && props.onclick(!props.state)}
 		id={props.id}
-		className={'checkbox dispinbl ' + (on ? 'on' : 'off')}
+		className={'checkbox dispinbl ' + (props.state ? 'on' : 'off')}
 	>
-		{on
+		{props.state
 			? <CheckBoxIcon />
 			: <CheckBoxOutlineBlankIcon />}
 	</div>;
-- 
cgit v1.2.3