[chore/frogend] Restructure form data default values / update from Query data (#1422)

* eslint: set console use to error to catch debug littering in CI

* remove debug logging

* some form field restructuring, fixes submitted updates not being reflected

* more form field restructuring

* remove debug logger

* simplify field updates

* fix react state set during render when submitting import file

* className instead of class

* show Select hints again

1 files changed, 43 insertions, 6 deletions

diff --git a/web/source/settings/lib/form/index.js b/web/source/settings/lib/form/index.js
index aef3bf0d2..38e426baa 100644
--- a/web/source/settings/lib/form/index.js
+++ b/web/source/settings/lib/form/index.js
@@ -18,15 +18,52 @@
 
 "use strict";
 
+const React = require("react");
+const getByDot = require("get-by-dot").default;
+
 function capitalizeFirst(str) {
-	return str.slice(0, 1).toUpperCase() + str.slice(1);
+	return str.slice(0, 1).toUpperCase + str.slice(1);
+}
+
+function selectorByKey(key) {
+	if (key.includes("[")) {
+		// get-by-dot does not support 'nested[deeper][key]' notation, convert to 'nested.deeper.key'
+		key = key
+			.replace(/\[/g, ".") // nested.deeper].key]
+			.replace(/\]/g, ""); // nested.deeper.key
+	}
+
+	return function selector(obj) {
+		if (obj == undefined) {
+			return undefined;
+		} else {
+			return getByDot(obj, key);
+		}
+	};
 }
 
-function makeHook(func) {
-	return (name, ...args) => func({
-		name,
-		Name: capitalizeFirst(name)
-	}, ...args);
+function makeHook(hookFunction) {
+	return function (name, opts = {}) {
+		// for dynamically generating attributes like 'setName'
+		const Name = React.useMemo(() => capitalizeFirst(name), [name]);
+
+		const selector = React.useMemo(() => selectorByKey(name), [name]);
+		const valueSelector = opts.valueSelector ?? selector;
+
+		opts.initialValue = React.useMemo(() => {
+			if (opts.source == undefined) {
+				return opts.defaultValue;
+			} else {
+				return valueSelector(opts.source) ?? opts.defaultValue;
+			}
+		}, [opts.source, opts.defaultValue, valueSelector]);
+
+		const hook = hookFunction({ name, Name }, opts);
+
+		return Object.assign(hook, {
+			name, Name,
+		});
+	};
 }
 
 module.exports = {