[chore] Settings refactor fix4 (#1383)

* fix error handling behavior in emoji overview and FormWithData components

* css: long domain cutoff

* unused require

* eslint vscode task

6 files changed, 32 insertions, 15 deletions

diff --git a/web/source/.eslintrc.js b/web/source/.eslintrc.js
index 09160993f..81a2c39f9 100644
--- a/web/source/.eslintrc.js
+++ b/web/source/.eslintrc.js
@@ -22,6 +22,6 @@ module.exports = {
 	"extends": ["@joepie91/eslint-config/react"],
 	"plugins": ["license-header"],
 	"rules": {
-		"license-header/header": ["error", ".license-header.js"]
+		"license-header/header": ["error", __dirname + "/.license-header.js"]
 	}
 };
\ No newline at end of file
diff --git a/web/source/css/base.css b/web/source/css/base.css
index e0350577d..ef7eb2e36 100644
--- a/web/source/css/base.css
+++ b/web/source/css/base.css
@@ -407,4 +407,10 @@ label {
 	.fa-spin {
 		animation: none;
 	}
+}
+
+.text-cutoff {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
 }
\ No newline at end of file
diff --git a/web/source/settings/admin/emoji/local/overview.js b/web/source/settings/admin/emoji/local/overview.js
index 78546b2fa..f8f61cea1 100644
--- a/web/source/settings/admin/emoji/local/overview.js
+++ b/web/source/settings/admin/emoji/local/overview.js
@@ -26,27 +26,35 @@ const NewEmojiForm = require("./new-emoji");
 const query = require("../../../lib/query");
 const { useEmojiByCategory } = require("../category-select");
 const Loading = require("../../../components/loading");
+const { Error } = require("../../../components/error");
 
 module.exports = function EmojiOverview({ baseUrl }) {
 	const {
 		data: emoji = [],
 		isLoading,
+		isError,
 		error
 	} = query.useListEmojiQuery({ filter: "domain:local" });
 
+	let content = null;
+
+	if (isLoading) {
+		content = <Loading />;
+	} else if (isError) {
+		content = <Error error={error} />;
+	} else {
+		content = (
+			<>
+				<EmojiList emoji={emoji} baseUrl={baseUrl} />
+				<NewEmojiForm emoji={emoji} />
+			</>
+		);
+	}
+
 	return (
 		<>
 			<h1>Custom Emoji (local)</h1>
-			{error &&
-				<div className="error accent">{error}</div>
-			}
-			{isLoading
-				? <Loading />
-				: <>
-					<EmojiList emoji={emoji} baseUrl={baseUrl} />
-					<NewEmojiForm emoji={emoji} />
-				</>
-			}
+			{content}
 		</>
 	);
 };
diff --git a/web/source/settings/admin/federation/detail.js b/web/source/settings/admin/federation/detail.js
index 7324a42a5..ecace90cd 100644
--- a/web/source/settings/admin/federation/detail.js
+++ b/web/source/settings/admin/federation/detail.js
@@ -67,7 +67,7 @@ module.exports = function InstanceDetail({ baseUrl }) {
 
 	return (
 		<div>
-			<h1><BackButton to={baseUrl} /> Federation settings for: {domain}</h1>
+			<h1 className="text-cutoff"><BackButton to={baseUrl} /> Federation settings for: <span title={domain}>{domain}</span></h1>
 			{infoContent}
 			<DomainBlockForm defaultDomain={domain} block={existingBlock} />
 		</div>
diff --git a/web/source/settings/components/authorization/index.jsx b/web/source/settings/components/authorization/index.jsx
index 397413945..060e2f149 100644
--- a/web/source/settings/components/authorization/index.jsx
+++ b/web/source/settings/components/authorization/index.jsx
@@ -34,8 +34,6 @@ module.exports = function Authorization({ App }) {
 		skip: loginState == "none" || loginState == "logout" || expectingRedirect
 	});
 
-	console.log("skip verify:", loginState, expectingRedirect);
-
 	let showLogin = true;
 	let content = null;
 
diff --git a/web/source/settings/lib/form/form-with-data.jsx b/web/source/settings/lib/form/form-with-data.jsx
index a383af502..d23a238bf 100644
--- a/web/source/settings/lib/form/form-with-data.jsx
+++ b/web/source/settings/lib/form/form-with-data.jsx
@@ -19,13 +19,14 @@
 "use strict";
 
 const React = require("react");
+const { Error } = require("../../components/error");
 
 const Loading = require("../../components/loading");
 
 // Wrap Form component inside component that fires the RTK Query call,
 // so Form will only be rendered when data is available to generate form-fields for
 module.exports = function FormWithData({ dataQuery, DataForm, queryArg, ...formProps }) {
-	const { data, isLoading } = dataQuery(queryArg);
+	const { data, isLoading, isError, error } = dataQuery(queryArg);
 
 	if (isLoading) {
 		return (
@@ -33,6 +34,10 @@ module.exports = function FormWithData({ dataQuery, DataForm, queryArg, ...formP
 				<Loading />
 			</div>
 		);
+	} else if (isError) {
+		return (
+			<Error error={error} />
+		);
 	} else {
 		return <DataForm data={data} {...formProps} />;
 	}