[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

6 files changed, 36 insertions, 26 deletions

diff --git a/web/source/settings/admin/emoji/local/detail.js b/web/source/settings/admin/emoji/local/detail.js
index cecd36869..8fcb5510c 100644
--- a/web/source/settings/admin/emoji/local/detail.js
+++ b/web/source/settings/admin/emoji/local/detail.js
@@ -54,7 +54,7 @@ module.exports = function EmojiDetailRoute() {
 function EmojiDetailForm({ data: emoji }) {
 	const form = {
 		id: useValue("id", emoji.id),
-		category: useComboBoxInput("category", { defaultValue: emoji.category }),
+		category: useComboBoxInput("category", { source: emoji }),
 		image: useFileInput("image", {
 			withPreview: true,
 			maxSize: 50 * 1024 // TODO: get from instance api
diff --git a/web/source/settings/admin/federation/detail.js b/web/source/settings/admin/federation/detail.js
index ecace90cd..ea9109720 100644
--- a/web/source/settings/admin/federation/detail.js
+++ b/web/source/settings/admin/federation/detail.js
@@ -19,7 +19,7 @@
 "use strict";
 
 const React = require("react");
-const { useRoute, Redirect } = require("wouter");
+const { useRoute, Redirect, useLocation } = require("wouter");
 
 const query = require("../../lib/query");
 
@@ -69,12 +69,12 @@ module.exports = function InstanceDetail({ baseUrl }) {
 		<div>
 			<h1 className="text-cutoff"><BackButton to={baseUrl} /> Federation settings for: <span title={domain}>{domain}</span></h1>
 			{infoContent}
-			<DomainBlockForm defaultDomain={domain} block={existingBlock} />
+			<DomainBlockForm defaultDomain={domain} block={existingBlock} baseUrl={baseUrl} />
 		</div>
 	);
 };
 
-function DomainBlockForm({ defaultDomain, block = {} }) {
+function DomainBlockForm({ defaultDomain, block = {}, baseUrl }) {
 	const isExistingBlock = block.domain != undefined;
 
 	const disabledForm = isExistingBlock
@@ -85,18 +85,31 @@ function DomainBlockForm({ defaultDomain, block = {} }) {
 		: {};
 
 	const form = {
-		domain: useTextInput("domain", { defaultValue: block.domain ?? defaultDomain }),
-		obfuscate: useBoolInput("obfuscate", { defaultValue: block.obfuscate }),
-		commentPrivate: useTextInput("private_comment", { defaultValue: block.private_comment }),
-		commentPublic: useTextInput("public_comment", { defaultValue: block.public_comment })
+		domain: useTextInput("domain", { source: block, defaultValue: defaultDomain }),
+		obfuscate: useBoolInput("obfuscate", { source: block }),
+		commentPrivate: useTextInput("private_comment", { source: block }),
+		commentPublic: useTextInput("public_comment", { source: block })
 	};
 
 	const [submitForm, addResult] = useFormSubmit(form, query.useAddInstanceBlockMutation(), { changedOnly: false });
 
 	const [removeBlock, removeResult] = query.useRemoveInstanceBlockMutation({ fixedCacheKey: block.id });
 
+	const [location, setLocation] = useLocation();
+
+	function verifyUrlThenSubmit(e) {
+		// Adding a new block happens on /settings/admin/federation/domain.com
+		// but if domain input changes, that doesn't match anymore and causes issues later on
+		// so, before submitting the form, silently change url, then submit
+		let correctUrl = `${baseUrl}/${form.domain.value}`;
+		if (location != correctUrl) {
+			setLocation(correctUrl);
+		}
+		return submitForm(e);
+	}
+
 	return (
-		<form onSubmit={submitForm}>
+		<form onSubmit={verifyUrlThenSubmit}>
 			<TextInput
 				field={form.domain}
 				label="Domain"
diff --git a/web/source/settings/admin/federation/import-export/form.jsx b/web/source/settings/admin/federation/import-export/form.jsx
index afd2d775d..7b6ad9206 100644
--- a/web/source/settings/admin/federation/import-export/form.jsx
+++ b/web/source/settings/admin/federation/import-export/form.jsx
@@ -36,13 +36,11 @@ const ExportFormatTable = require("./export-format-table");
 module.exports = function ImportExportForm({ form, submitParse, parseResult }) {
 	const [submitExport, exportResult] = useFormSubmit(form, query.useExportDomainListMutation());
 
-	const [updateFromFile, setUpdateFromFile] = React.useState(false);
-
 	function fileChanged(e) {
 		const reader = new FileReader();
 		reader.onload = function (read) {
-			form.domains.setter(read.target.result);
-			setUpdateFromFile(true);
+			form.domains.value = read.target.result;
+			submitParse();
 		};
 		reader.readAsText(e.target.files[0]);
 	}
@@ -54,10 +52,6 @@ module.exports = function ImportExportForm({ form, submitParse, parseResult }) {
 		/* eslint-disable-next-line react-hooks/exhaustive-deps */
 	}, [exportResult]);
 
-	if (updateFromFile) {
-		setUpdateFromFile(false);
-		submitParse();
-	}
 	return (
 		<>
 			<h1>Import / Export suspended domains</h1>
diff --git a/web/source/settings/admin/federation/import-export/index.jsx b/web/source/settings/admin/federation/import-export/index.jsx
index 3039b98f3..ca55296f8 100644
--- a/web/source/settings/admin/federation/import-export/index.jsx
+++ b/web/source/settings/admin/federation/import-export/index.jsx
@@ -40,7 +40,7 @@ module.exports = function ImportExport() {
 		exportType: useTextInput("exportType", { defaultValue: "plain", dontReset: true })
 	};
 
-	const [submitParse, parseResult] = useFormSubmit(form, query.useProcessDomainListMutation());
+	const [submitParse, parseResult] = useFormSubmit(form, query.useProcessDomainListMutation(), { changedOnly: false });
 
 	const [_location, setLocation] = useLocation();
 
diff --git a/web/source/settings/admin/federation/import-export/process.jsx b/web/source/settings/admin/federation/import-export/process.jsx
index 0b2d10099..6b9d98f01 100644
--- a/web/source/settings/admin/federation/import-export/process.jsx
+++ b/web/source/settings/admin/federation/import-export/process.jsx
@@ -234,7 +234,7 @@ const UpdateableEntry = React.memo(
 		return (
 			<>
 				<span className="text-cutoff">{entry.domain}</span>
-				<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
+				<i className="fa fa-long-arrow-right" aria-hidden="true"></i>
 				<span>{entry.suggest}</span>
 				<a role="button" onClick={() =>
 					updateEntry(entry.key, { domain: entry.suggest, suggest: null })
diff --git a/web/source/settings/admin/settings.js b/web/source/settings/admin/settings.js
index c0a9eabbe..fa0085946 100644
--- a/web/source/settings/admin/settings.js
+++ b/web/source/settings/admin/settings.js
@@ -49,14 +49,17 @@ module.exports = function AdminSettings() {
 
 function AdminSettingsForm({ data: instance }) {
 	const form = {
-		title: useTextInput("title", { defaultValue: instance.title }),
+		title: useTextInput("title", {
+			source: instance,
+			validator: (val) => val.length <= 40 ? "" : "Instance title must be 40 characters or less"
+		}),
 		thumbnail: useFileInput("thumbnail", { withPreview: true }),
-		thumbnailDesc: useTextInput("thumbnail_description", { defaultValue: instance.thumbnail_description }),
-		shortDesc: useTextInput("short_description", { defaultValue: instance.short_description }),
-		description: useTextInput("description", { defaultValue: instance.description }),
-		contactUser: useTextInput("contact_username", { defaultValue: instance.contact_account?.username }),
-		contactEmail: useTextInput("contact_email", { defaultValue: instance.email }),
-		terms: useTextInput("terms", { defaultValue: instance.terms })
+		thumbnailDesc: useTextInput("thumbnail_description", { source: instance }),
+		shortDesc: useTextInput("short_description", { source: instance }),
+		description: useTextInput("description", { source: instance }),
+		contactUser: useTextInput("contact_username", { source: instance, valueSelector: (s) => s.contact_account?.username }),
+		contactEmail: useTextInput("contact_email", { source: instance, valueSelector: (s) => s.email }),
+		terms: useTextInput("terms", { source: instance })
 	};
 
 	const [submitForm, result] = useFormSubmit(form, query.useUpdateInstanceMutation());