[chore] Settings refactor fix4 (#1383)

* fix error handling behavior in emoji overview and FormWithData components

* css: long domain cutoff

* unused require

* eslint vscode task
This commit is contained in:
f0x52 2023-01-25 09:47:55 +01:00 committed by GitHub
parent 36f62d6e60
commit 27d4e364e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 36 additions and 16 deletions

View file

@ -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"
}

View file

@ -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"]
}
};

View file

@ -408,3 +408,9 @@ label {
animation: none;
}
}
.text-cutoff {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

View file

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

View file

@ -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>

View file

@ -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;

View file

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