mostly abstracted (emoji) checkbox list

web/source/settings/admin/emoji/remote/parse-from-toot.js

@@ -25,9 +25,11 @@ const syncpipe = require("syncpipe");
 
 const {
 	useTextInput,
-	useComboBoxInput
+	useComboBoxInput,
+	useCheckListInput
 } = require("../../../lib/form");
 
+const CheckList = require("../../../components/check-list");
 const { CategorySelect } = require('../category-select');
 
 const query = require("../../../lib/query");
@@ -87,17 +89,17 @@ module.exports = function ParseFromToot({ emojiCodes }) {
 							onChange={onURLChange}
 							value={url}
 						/>
-						<button disabled={isLoading}>
+						<button className="button-inline" disabled={isLoading}>
 							<i className={[
 								"fa",
 								(isLoading
 									? "fa-refresh fa-spin"
 									: "fa-search")
-							].join(" ")} aria-hidden="true" title="Search"/>
+							].join(" ")} aria-hidden="true" title="Search" />
 							<span className="sr-only">Search</span>
 						</button>
 					</div>
-					{isLoading && <Loading/>}
+					{isLoading && <Loading />}
 					{error && <div className="error">{error.data.error}</div>}
 				</div>
 			</form>
@@ -106,102 +108,21 @@ module.exports = function ParseFromToot({ emojiCodes }) {
 	);
 };
 
-function makeEmojiState(emojiList, checked) {
-	/* Return a new object, with a key for every emoji's shortcode,
-		 And a value for it's checkbox `checked` state.
-	 */
-	return syncpipe(emojiList, [
-		(_) => _.map((emoji) => [emoji.shortcode, {
-			checked,
-			valid: true
-		}]),
-		(_) => Object.fromEntries(_)
-	]);
-}
-
-function updateEmojiState(emojiState, checked) {
-	/* Create a new object with all emoji entries' checked state updated */
-	return syncpipe(emojiState, [
-		(_) => Object.entries(emojiState),
-		(_) => _.map(([key, val]) => [key, {
-			...val,
-			checked
-		}]),
-		(_) => Object.fromEntries(_)
-	]);
-}
-
 function CopyEmojiForm({ localEmojiCodes, type, domain, emojiList }) {
 	const [patchRemoteEmojis, patchResult] = query.usePatchRemoteEmojisMutation();
 	const [err, setError] = React.useState();
 
-	const toggleAllRef = React.useRef(null);
+	const emojiCheckList = useCheckListInput("selectedEmoji", {
-	const [toggleAllState, setToggleAllState] = React.useState(0);
+		entries: emojiList,
-	const [emojiState, setEmojiState] = React.useState(makeEmojiState(emojiList, false));
+		uniqueKey: "shortcode"
-	const [someSelected, setSomeSelected] = React.useState(false);
+	});
 
 	const [categoryState, resetCategory, { category }] = useComboBoxInput("category");
 
-	React.useEffect(() => {
-		if (emojiList != undefined) {
-			setEmojiState(makeEmojiState(emojiList, false));
-		}
-	}, [emojiList]);
-
-	React.useEffect(() => {
-		/* Updates (un)check all checkbox, based on shortcode checkboxes
-			 Can be 0 (not checked), 1 (checked) or 2 (indeterminate)
-		 */
-		if (toggleAllRef.current == null) {
-			return;
-		}
-
-		let values = Object.values(emojiState);
-		/* one or more boxes are checked */
-		let some = values.some((v) => v.checked);
-
-		let all = false;
-		if (some) {
-			/* there's not at least one unchecked box */
-			all = !values.some((v) => v.checked == false);
-		}
-
-		setSomeSelected(some);
-
-		if (some && !all) {
-			setToggleAllState(2);
-			toggleAllRef.current.indeterminate = true;
-		} else {
-			setToggleAllState(all ? 1 : 0);
-			toggleAllRef.current.indeterminate = false;
-		}
-	}, [emojiState, toggleAllRef]);
-
-	function updateEmoji(shortcode, value) {
-		setEmojiState({
-			...emojiState,
-			[shortcode]: {
-				...emojiState[shortcode],
-				...value
-			}
-		});
-	}
-
-	function toggleAll(e) {
-		let selectAll = e.target.checked;
-
-		if (toggleAllState == 2) { // indeterminate
-			selectAll = false;
-		}
-
-		setEmojiState(updateEmojiState(emojiState, selectAll));
-		setToggleAllState(selectAll);
-	}
-
 	function submit(action) {
 		Promise.try(() => {
 			setError(null);
-			const selectedShortcodes = syncpipe(emojiState, [
+			const selectedShortcodes = syncpipe(emojiCheckList.value, [
 				(_) => Object.entries(_),
 				(_) => _.filter(([_shortcode, entry]) => entry.checked),
 				(_) => _.map(([shortcode, entry]) => {
@@ -222,7 +143,7 @@ function CopyEmojiForm({ localEmojiCodes, type, domain, emojiList }) {
 				category
 			}).unwrap();
 		}).then(() => {
-			setEmojiState(makeEmojiState(emojiList, false));
+			emojiCheckList.reset();
 			resetCategory();
 		}).catch((e) => {
 			if (Array.isArray(e)) {
@@ -240,16 +161,12 @@ function CopyEmojiForm({ localEmojiCodes, type, domain, emojiList }) {
 	return (
 		<div className="parsed">
 			<span>This {type == "statuses" ? "toot" : "account"} uses the following custom emoji, select the ones you want to copy/disable:</span>
-			<div className="emoji-list">
+			<CheckList
-				<label className="header">
+				field={emojiCheckList}
-					<input
+				Component={EmojiEntry}
-						ref={toggleAllRef}
+				localEmojiCodes={localEmojiCodes}
-						type="checkbox"
+			/>
-						onChange={toggleAll}
+			{/* {emojiList.map((emoji) => (
-						checked={toggleAllState === 1}
-					/> All
-				</label>
-				{emojiList.map((emoji) => (
 				<EmojiEntry
 					key={emoji.shortcode}
 					emoji={emoji}
@@ -257,8 +174,7 @@ function CopyEmojiForm({ localEmojiCodes, type, domain, emojiList }) {
 					updateEmoji={(value) => updateEmoji(emoji.shortcode, value)}
 					checked={emojiState[emoji.shortcode].checked}
 				/>
-				))}
+			))} */}
-			</div>
 
 			<CategorySelect
 				value={category}
@@ -266,8 +182,8 @@ function CopyEmojiForm({ localEmojiCodes, type, domain, emojiList }) {
 			/>
 
 			<div className="action-buttons row">
-				<button disabled={!someSelected} onClick={() => submit("copy")}>{patchResult.isLoading ? "Processing..." : "Copy to local emoji"}</button>
+				<button disabled={!emojiCheckList.someSelected} onClick={() => submit("copy")}>{patchResult.isLoading ? "Processing..." : "Copy to local emoji"}</button>
-				<button disabled={!someSelected} onClick={() => submit("disable")} className="danger">{patchResult.isLoading ? "Processing..." : "Disable"}</button>
+				<button disabled={!emojiCheckList.someSelected} onClick={() => submit("disable")} className="danger">{patchResult.isLoading ? "Processing..." : "Disable"}</button>
 			</div>
 			{err && <div className="error">
 				{err}
@@ -279,28 +195,23 @@ function CopyEmojiForm({ localEmojiCodes, type, domain, emojiList }) {
 	);
 }
 
-function EmojiEntry({ emoji, localEmojiCodes, updateEmoji, checked }) {
+function EmojiEntry({ entry: emoji, localEmojiCodes, onChange }) {
 	const [onShortcodeChange, _resetShortcode, { shortcode, shortcodeRef, shortcodeValid }] = useTextInput("shortcode", {
 		defaultValue: emoji.shortcode,
 		validator: function validateShortcode(code) {
-			return (checked && localEmojiCodes.has(code))
+			return (emoji.checked && localEmojiCodes.has(code))
 				? "Shortcode already in use"
 				: "";
 		}
 	});
 
 	React.useEffect(() => {
-		updateEmoji({ valid: shortcodeValid });
+		onChange({ valid: shortcodeValid });
 		/* eslint-disable-next-line react-hooks/exhaustive-deps */
 	}, [shortcodeValid]);
 
 	return (
-		<label key={emoji.shortcode} className="row">
+		<>
-			<input
-				type="checkbox"
-				onChange={(e) => updateEmoji({ checked: e.target.checked })}
-				checked={checked}
-			/>
 			<img className="emoji" src={emoji.url} title={emoji.shortcode} />
 
 			<input
@@ -310,10 +221,10 @@ function EmojiEntry({ emoji, localEmojiCodes, updateEmoji, checked }) {
 				ref={shortcodeRef}
 				onChange={(e) => {
 					onShortcodeChange(e);
-					updateEmoji({ shortcode: e.target.value, checked: true });
+					onChange({ shortcode: e.target.value, checked: true });
 				}}
 				value={shortcode}
 			/>
-		</label>
+		</>
 	);
 }

web/source/settings/components/check-list.jsx

@@ -0,0 +1,58 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const React = require("react");
+
+module.exports = function CheckList({ field, Component, ...componentProps }) {
+	return (
+		<div className="checkbox-list">
+			<label className="header">
+				<input
+					ref={field.toggleAll.ref}
+					type="checkbox"
+					onChange={field.toggleAll.onChange}
+					checked={field.toggleAll.value === 1}
+				/> All
+			</label>
+			{Object.values(field.value).map((entry) => (
+				<CheckListEntry
+					key={entry.key}
+					onChange={(value) => field.onChange(entry.key, value)}
+					entry={entry}
+					Component={Component}
+					componentProps={componentProps}
+				/>
+			))}
+		</div>
+	);
+};
+
+function CheckListEntry({ entry, onChange, Component, componentProps }) {
+	return (
+		<label className="row">
+			<input
+				type="checkbox"
+				onChange={(e) => onChange({ checked: e.target.value })}
+				checked={entry.checked}
+			/>
+			<Component entry={entry} onChange={onChange} {...componentProps} />
+		</label>
+	);
+}

web/source/settings/components/form/inputs.jsx

@@ -20,8 +20,8 @@
 
 const React = require("react");
 
-function TextInput({label, field, ...inputProps}) {
+function TextInput({ label, field, ...inputProps }) {
-	const {onChange, value, ref} = field;
+	const { onChange, value, ref } = field;
 
 	return (
 		<div className="form-field text">
@@ -29,7 +29,7 @@ function TextInput({label, field, ...inputProps}) {
 				{label}
 				<input
 					type="text"
-					{...{onChange, value, ref}}
+					{...{ onChange, value, ref }}
 					{...inputProps}
 				/>
 			</label>
@@ -37,8 +37,8 @@ function TextInput({label, field, ...inputProps}) {
 	);
 }
 
-function TextArea({label, field, ...inputProps}) {
+function TextArea({ label, field, ...inputProps }) {
-	const {onChange, value, ref} = field;
+	const { onChange, value, ref } = field;
 
 	return (
 		<div className="form-field textarea">
@@ -46,7 +46,7 @@ function TextArea({label, field, ...inputProps}) {
 				{label}
 				<textarea
 					type="text"
-					{...{onChange, value, ref}}
+					{...{ onChange, value, ref }}
 					{...inputProps}
 				/>
 			</label>
@@ -54,8 +54,8 @@ function TextArea({label, field, ...inputProps}) {
 	);
 }
 
-function FileInput({label, field, ...inputProps}) {
+function FileInput({ label, field, ...inputProps }) {
-	const {onChange, ref, infoComponent} = field;
+	const { onChange, ref, infoComponent } = field;
 
 	return (
 		<div className="form-field file">
@@ -67,7 +67,7 @@ function FileInput({label, field, ...inputProps}) {
 				<input
 					type="file"
 					className="hidden"
-					{...{onChange, ref}}
+					{...{ onChange, ref }}
 					{...inputProps}
 				/>
 			</label>
@@ -75,8 +75,8 @@ function FileInput({label, field, ...inputProps}) {
 	);
 }
 
-function Checkbox({label, field, ...inputProps}) {
+function Checkbox({ label, field, ...inputProps }) {
-	const {onChange, value} = field;
+	const { onChange, value } = field;
 
 	return (
 		<div className="form-field checkbox">
@@ -92,15 +92,15 @@ function Checkbox({label, field, ...inputProps}) {
 	);
 }
 
-function Select({label, field, options, ...inputProps}) {
+function Select({ label, field, options, ...inputProps }) {
-	const {onChange, value, ref} = field;
+	const { onChange, value, ref } = field;
 
 	return (
 		<div className="form-field select">
 			<label>
 				{label}
 				<select
-					{...{onChange, value, ref}}
+					{...{ onChange, value, ref }}
 					{...inputProps}
 				>
 					{options}

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

@@ -0,0 +1,139 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const React = require("react");
+const syncpipe = require("syncpipe");
+
+function createState(entries, uniqueKey, oldState, defaultValue) {
+	return syncpipe(entries, [
+		(_) => _.map((entry) => {
+			let key = entry[uniqueKey];
+			return [
+				key,
+				{
+					...entry,
+					key,
+					checked: oldState[key]?.checked ?? entry.checked ?? defaultValue
+				}
+			];
+		}),
+		(_) => Object.fromEntries(_)
+	]);
+}
+
+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, Name }, { entries, uniqueKey = "key", defaultValue = false }) {
+	const [state, setState] = React.useState({});
+
+	const [someSelected, setSomeSelected] = React.useState(false);
+	const [toggleAllState, setToggleAllState] = React.useState(0);
+	const toggleAllRef = React.useRef(null);
+
+	React.useEffect(() => {
+		/* 
+			entries changed, update state,
+			re-using old state if available for key
+		*/
+		setState(createState(entries, uniqueKey, state, defaultValue));
+
+		/* eslint-disable-next-line react-hooks/exhaustive-deps */
+	}, [entries]);
+
+	React.useEffect(() => {
+		/* Updates (un)check all checkbox, based on shortcode checkboxes
+			 Can be 0 (not checked), 1 (checked) or 2 (indeterminate)
+		 */
+		if (toggleAllRef.current == null) {
+			return;
+		}
+
+		let values = Object.values(state);
+		/* one or more boxes are checked */
+		let some = values.some((v) => v.checked);
+
+		let all = false;
+		if (some) {
+			/* there's not at least one unchecked box */
+			all = !values.some((v) => v.checked == false);
+		}
+
+		setSomeSelected(some);
+
+		if (some && !all) {
+			setToggleAllState(2);
+			toggleAllRef.current.indeterminate = true;
+		} else {
+			setToggleAllState(all ? 1 : 0);
+			toggleAllRef.current.indeterminate = false;
+		}
+	}, [state, toggleAllRef]);
+
+	function toggleAll(e) {
+		let selectAll = e.target.checked;
+
+		if (toggleAllState == 2) { // indeterminate
+			selectAll = false;
+		}
+
+		setState(updateAllState(state, selectAll));
+		setToggleAllState(selectAll);
+	}
+
+	function reset() {
+		setState(updateAllState(state, defaultValue));
+	}
+
+	return Object.assign([
+		state,
+		reset,
+		{ name }
+	], {
+		name,
+		value: state,
+		onChange: (key, newValue) => setState(updateState(state, key, newValue)),
+		reset,
+		someSelected,
+		toggleAll: {
+			ref: toggleAllRef,
+			value: toggleAllState,
+			onChange: toggleAll
+		}
+	});
+};

web/source/settings/lib/form/combobox.jsx

@@ -20,7 +20,7 @@
 
 const { useComboboxState } = require("ariakit/combobox");
 
-module.exports = function useComboBoxInput({name, Name}, {defaultValue} = {}) {
+module.exports = function useComboBoxInput({ name, Name }, { defaultValue } = {}) {
 	const state = useComboboxState({
 		defaultValue,
 		gutter: 0,
@@ -34,9 +34,9 @@ module.exports = function useComboBoxInput({name, Name}, {defaultValue} = {}) {
 	return Object.assign([
 		state,
 		reset,
-		name,
 		{
 			[name]: state.value,
+			name
 		}
 	], {
 		name,

web/source/settings/lib/form/index.js

@@ -19,20 +19,20 @@
 "use strict";
 
 function capitalizeFirst(str) {
-	return str.slice(0,1).toUpperCase()+str.slice(1);
+	return str.slice(0, 1).toUpperCase() + str.slice(1);
 }
 
 function makeHook(func) {
 	return (name, ...args) => func({
 		name,
 		Name: capitalizeFirst(name)
-	},
+	}, ...args);
-	...args);
 }
 
 module.exports = {
 	useTextInput: makeHook(require("./text")),
 	useFileInput: makeHook(require("./file")),
 	useBoolInput: makeHook(require("./bool")),
-	useComboBoxInput: makeHook(require("./combobox"))
+	useComboBoxInput: makeHook(require("./combobox")),
+	useCheckListInput: makeHook(require("./check-list"))
 };

web/source/settings/style.css

@@ -223,6 +223,10 @@ section.with-sidebar > div, section.with-sidebar > form {
 		line-height: 1.5rem;
 	}
 
+	.button-inline {
+		width: auto;
+	}
+
 	input[type=checkbox] {
 		justify-self: start;
 		width: initial;
@@ -403,7 +407,7 @@ span.form-info {
 	justify-content: space-between;
 }
 
-.emoji-list {
+.checkbox-list {
 	background: $settings-entry-bg;
 
 	.entry {
@@ -616,7 +620,7 @@ span.form-info {
 			gap: 1rem;
 		}
 
-		.emoji-list {
+		.checkbox-list {
 			display: flex;
 			flex-direction: column;