[chore] Settings refactor fix4 (#1383)

* fix error handling behavior in emoji overview and FormWithData components

* css: long domain cutoff

* unused require

* eslint vscode task

1 files changed, 18 insertions, 10 deletions

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}
 		</>
 	);
 };