gtsocial-umbx

commit 27d4e364e04c65a11c2855eaa9a1ffc55eb23239
parent 36f62d6e6013db9d7c0f191254173a1f32f7bdf8
Author: f0x52 <f0x@cthu.lu>
Date:   Wed, 25 Jan 2023 09:47:55 +0100

[chore] Settings refactor fix4 (#1383)

* fix error handling behavior in emoji overview and FormWithData components

* css: long domain cutoff

* unused require

* eslint vscode task
Diffstat:
M
.vscode/settings.json
 | 
5
++++-
M
web/source/.eslintrc.js
 | 
2
+-
M
web/source/css/base.css
 | 
6
++++++
M
web/source/settings/admin/emoji/local/overview.js
 | 
28
++++++++++++++++++----------
M
web/source/settings/admin/federation/detail.js
 | 
2
+-
M
web/source/settings/components/authorization/index.jsx
 | 
2
--
M
web/source/settings/lib/form/form-with-data.jsx
 | 
7
++++++-

7 files changed, 36 insertions(+), 16 deletions(-)
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,5 +2,8 @@
 	"go.lintTool":"golangci-lint",
 	"go.lintFlags": [
 	  "--fast"
-	]
+	],
+	"eslint.workingDirectories": ["web/source"],
+	"eslint.lintTask.enable": true,
+	"eslint.lintTask.options": "${workspaceFolder}/web/source"
 }
 \ No newline at end of file
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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} />;
 	}