[Frontend] Settings for profile fields (#1885)

* get max emoji size from instance settings

* expose (hardcoded) max amount of profile fields in instance api

* basic profile field setting

* fix profile field hook structure for updates

* *twirls mustache* fix ze tests

---------

Co-authored-by: tsmethurst <tobi.smethurst@protonmail.com>

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

@@ -0,0 +1,33 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	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 FormContext = React.createContext({});
+
+module.exports = {
+	FormContext,
+	useWithFormContext(index, form) {
+		const formContainer = React.useContext(FormContext);
+		formContainer[index] = form;
+		return form;
+	}
+};

web/source/settings/lib/form/field-array.jsx

@@ -0,0 +1,65 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	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 getFormMutations = require("./get-form-mutations");
+
+function parseFields(entries, length) {
+	const fields = [];
+
+	for (let i = 0; i < length; i++) {
+		if (entries[i] != undefined) {
+			fields[i] = Object.assign({}, entries[i]);
+		} else {
+			fields[i] = {};
+		}
+	}
+
+	return fields;
+}
+
+module.exports = function useArrayInput({ name, _Name }, { initialValue, length = 0 }) {
+	const fields = React.useRef({});
+
+	const value = React.useMemo(() => parseFields(initialValue, length), [initialValue, length]);
+
+	return {
+		name,
+		value,
+		ctx: fields.current,
+		maxLength: length,
+		selectedValues() {
+			// if any form field changed, we need to re-send everything
+			const hasUpdate = Object.values(fields.current).some((fieldSet) => {
+				const { updatedFields } = getFormMutations(fieldSet, { changedOnly: true });
+				return updatedFields.length > 0;
+			});
+			if (hasUpdate) {
+				return Object.values(fields.current).map((fieldSet) => {
+					return getFormMutations(fieldSet, { changedOnly: false }).mutationData;
+				});
+			} else {
+				return [];
+			}
+		}
+	};
+};

web/source/settings/lib/form/get-form-mutations.js

@@ -0,0 +1,47 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	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 syncpipe = require("syncpipe");
+
+module.exports = function getFormMutations(form, { changedOnly }) {
+	let updatedFields = [];
+	return {
+		updatedFields,
+		mutationData: syncpipe(form, [
+			(_) => Object.values(_),
+			(_) => _.map((field) => {
+				if (field.selectedValues != undefined) {
+					let selected = field.selectedValues();
+					if (!changedOnly || selected.length > 0) {
+						updatedFields.push(field);
+						return [field.name, selected];
+					}
+				} else if (!changedOnly || field.hasChanged()) {
+					updatedFields.push(field);
+					return [field.name, field.value];
+				}
+				return null;
+			}),
+			(_) => _.filter((value) => value != null),
+			(_) => Object.fromEntries(_)
+		])
+	};
+};

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

@@ -74,6 +74,7 @@ module.exports = {
 	useRadioInput: makeHook(require("./radio")),
 	useComboBoxInput: makeHook(require("./combo-box")),
 	useCheckListInput: makeHook(require("./check-list")),
+	useFieldArrayInput: makeHook(require("./field-array")),
 	useValue: function (name, value) {
 		return {
 			name,

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

@@ -21,7 +21,7 @@
 
 const Promise = require("bluebird");
 const React = require("react");
-const syncpipe = require("syncpipe");
+const getFormMutations = require("./get-form-mutations");
 
 module.exports = function useFormSubmit(form, mutationQuery, { changedOnly = true, onFinish } = {}) {
 	if (!Array.isArray(mutationQuery)) {
@@ -44,25 +44,12 @@ module.exports = function useFormSubmit(form, mutationQuery, { changedOnly = tru
 			}
 			usedAction.current = action;
 			// transform the field definitions into an object with just their values 
-			let updatedFields = [];
-			const mutationData = syncpipe(form, [
-				(_) => Object.values(_),
-				(_) => _.map((field) => {
-					if (field.selectedValues != undefined) {
-						let selected = field.selectedValues();
-						if (!changedOnly || selected.length > 0) {
-							updatedFields.push(field);
-							return [field.name, selected];
-						}
-					} else if (!changedOnly || field.hasChanged()) {
-						updatedFields.push(field);
-						return [field.name, field.value];
-					}
-					return null;
-				}),
-				(_) => _.filter((value) => value != null),
-				(_) => Object.fromEntries(_)
-			]);
+
+			const { mutationData, updatedFields } = getFormMutations(form, { changedOnly });
+
+			if (updatedFields.length == 0) {
+				return;
+			}
 
 			mutationData.action = action;