checklist field: use reducer for state

web/source/index.js

@@ -66,7 +66,7 @@ skulk({
 			],
 		},
 		settings: {
-			debug: false,
+			debug: true,
 			entryFile: "settings",
 			outputFile: "settings.js",
 			prodCfg: prodCfg,

web/source/settings/lib/form/check-list.jsx

@@ -20,47 +20,50 @@
 
 const React = require("react");
 const syncpipe = require("syncpipe");
+const { createSlice } = require("@reduxjs/toolkit");
 
-function createState(entries, uniqueKey, oldState, defaultValue) {
+const { reducer, actions } = createSlice({
-	return syncpipe(entries, [
+	name: "checklist",
-		(_) => _.map((entry) => {
+	initialState: {},
-			let key = entry[uniqueKey];
+	reducers: {
-			return [
+		create: (state, { payload }) => {
-				key,
+			const { entries, uniqueKey, defaultValue } = payload;
-				{
+			return syncpipe(entries, [
+				(_) => _.map((entry) => {
+					let key = entry[uniqueKey];
+					return [
+						key,
+						{
+							...entry,
+							key,
+							checked: state[key]?.checked ?? entry.checked ?? defaultValue
+						}
+					];
+				}),
+				(_) => Object.fromEntries(_)
+			]);
+		},
+		updateAll: (state, { payload: value }) => {
+			return syncpipe(state, [
+				(_) => Object.values(_),
+				(_) => _.map((entry) => [entry.key, {
 					...entry,
-					key,
+					checked: value
-					checked: oldState[key]?.checked ?? entry.checked ?? defaultValue
+				}]),
-				}
+				(_) => Object.fromEntries(_)
-			];
+			]);
-		}),
+		},
-		(_) => Object.fromEntries(_)
+		update: (state, { payload: { key, value } }) => {
-	]);
+			state[key] = {
-}
+				...state[key],
-
+				...value
-function updateAllState(state, newValue) {
+			};
-	return syncpipe(state, [
-		(_) => Object.values(_),
-		(_) => _.map((entry) => [entry.key, {
-			...entry,
-			checked: newValue
-		}]),
-		(_) => Object.fromEntries(_)
-	]);
-}
-
-function updateState(state, key, newValue) {
-	return {
-		...state,
-		[key]: {
-			...state[key],
-			...newValue
 		}
-	};
+	}
-}
+});
 
 module.exports = function useCheckListInput({ name }, { entries, uniqueKey = "key", defaultValue = false }) {
-	const [state, setState] = React.useState({});
+	const [state, dispatch] = React.useReducer(reducer, {});
 
 	const [someSelected, setSomeSelected] = React.useState(false);
 	const [toggleAllState, setToggleAllState] = React.useState(0);
@@ -71,11 +74,13 @@ module.exports = function useCheckListInput({ name }, { entries, uniqueKey = "ke
 			entries changed, update state,
 			re-using old state if available for key
 		*/
-		setState(createState(entries, uniqueKey, state, defaultValue));
+		dispatch(actions.create({ entries, uniqueKey, defaultValue }));
 
 		/* eslint-disable-next-line react-hooks/exhaustive-deps */
 	}, [entries]);
 
+	console.log(state);
+
 	React.useEffect(() => {
 		/* Updates (un)check all checkbox, based on shortcode checkboxes
 			 Can be 0 (not checked), 1 (checked) or 2 (indeterminate)
@@ -105,43 +110,49 @@ module.exports = function useCheckListInput({ name }, { entries, uniqueKey = "ke
 		}
 	}, [state, toggleAllRef]);
 
-	function toggleAll(e) {
+	return React.useMemo(() => {
-		let selectAll = e.target.checked;
+		function toggleAll(e) {
+			let selectAll = e.target.checked;
 
-		if (toggleAllState == 2) { // indeterminate
+			if (toggleAllState == 2) { // indeterminate
-			selectAll = false;
+				selectAll = false;
+			}
+
+			dispatch(actions.updateAll(selectAll));
+			setToggleAllState(selectAll);
 		}
 
-		setState(updateAllState(state, selectAll));
+		function reset() {
-		setToggleAllState(selectAll);
+			dispatch(actions.updateAll(defaultValue));
-	}
-
-	function reset() {
-		setState(updateAllState(state, defaultValue));
-	}
-
-	function selectedValues() {
-		return syncpipe(state, [
-			(_) => Object.values(_),
-			(_) => _.filter((entry) => entry.checked)
-		]);
-	}
-
-	return Object.assign([
-		state,
-		reset,
-		{ name }
-	], {
-		name,
-		value: state,
-		onChange: (key, newValue) => setState(updateState(state, key, newValue)),
-		selectedValues,
-		reset,
-		someSelected,
-		toggleAll: {
-			ref: toggleAllRef,
-			value: toggleAllState,
-			onChange: toggleAll
 		}
-	});
+
+		function onChange(key, value) {
+			dispatch(actions.update({ key, value }));
+		}
+
+		function selectedValues() {
+			return syncpipe(state, [
+				(_) => Object.values(_),
+				(_) => _.filter((entry) => entry.checked)
+			]);
+		}
+
+		return Object.assign([
+			state,
+			reset,
+			{ name }
+		], {
+			name,
+			value: state,
+			onChange,
+			selectedValues,
+			reset,
+			someSelected,
+			toggleAll: {
+				ref: toggleAllRef,
+				value: toggleAllState,
+				onChange: toggleAll
+			}
+		});
+	}, [defaultValue, name, someSelected, state, toggleAllState]);
 };