[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.lintTool":"golangci-lint",
"go.lintFlags": [ "go.lintFlags": [
"--fast" "--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"], "extends": ["@joepie91/eslint-config/react"],
"plugins": ["license-header"], "plugins": ["license-header"],
"rules": { "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; 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 query = require("../../../lib/query");
const { useEmojiByCategory } = require("../category-select"); const { useEmojiByCategory } = require("../category-select");
const Loading = require("../../../components/loading"); const Loading = require("../../../components/loading");
const { Error } = require("../../../components/error");
module.exports = function EmojiOverview({ baseUrl }) { module.exports = function EmojiOverview({ baseUrl }) {
const { const {
data: emoji = [], data: emoji = [],
isLoading, isLoading,
isError,
error error
} = query.useListEmojiQuery({ filter: "domain:local" }); } = 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 ( return (
<> <>
<h1>Custom Emoji (local)</h1> <h1>Custom Emoji (local)</h1>
{error && {content}
<div className="error accent">{error}</div>
}
{isLoading
? <Loading />
: <>
<EmojiList emoji={emoji} baseUrl={baseUrl} />
<NewEmojiForm emoji={emoji} />
</>
}
</> </>
); );
}; };

View file

@ -67,7 +67,7 @@ module.exports = function InstanceDetail({ baseUrl }) {
return ( return (
<div> <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} {infoContent}
<DomainBlockForm defaultDomain={domain} block={existingBlock} /> <DomainBlockForm defaultDomain={domain} block={existingBlock} />
</div> </div>

View file

@ -34,8 +34,6 @@ module.exports = function Authorization({ App }) {
skip: loginState == "none" || loginState == "logout" || expectingRedirect skip: loginState == "none" || loginState == "logout" || expectingRedirect
}); });
console.log("skip verify:", loginState, expectingRedirect);
let showLogin = true; let showLogin = true;
let content = null; let content = null;

View file

@ -19,13 +19,14 @@
"use strict"; "use strict";
const React = require("react"); const React = require("react");
const { Error } = require("../../components/error");
const Loading = require("../../components/loading"); const Loading = require("../../components/loading");
// Wrap Form component inside component that fires the RTK Query call, // 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 // so Form will only be rendered when data is available to generate form-fields for
module.exports = function FormWithData({ dataQuery, DataForm, queryArg, ...formProps }) { module.exports = function FormWithData({ dataQuery, DataForm, queryArg, ...formProps }) {
const { data, isLoading } = dataQuery(queryArg); const { data, isLoading, isError, error } = dataQuery(queryArg);
if (isLoading) { if (isLoading) {
return ( return (
@ -33,6 +34,10 @@ module.exports = function FormWithData({ dataQuery, DataForm, queryArg, ...formP
<Loading /> <Loading />
</div> </div>
); );
} else if (isError) {
return (
<Error error={error} />
);
} else { } else {
return <DataForm data={data} {...formProps} />; return <DataForm data={data} {...formProps} />;
} }