[chore] Bit more refactoring of settings panel

This commit is contained in:
tobi 2024-04-24 14:01:48 +02:00
parent 7a1e639483
commit 8ca2e60932
33 changed files with 941 additions and 681 deletions

View File

@ -96,4 +96,4 @@ skulk({
}]]
}
}
});
});

View File

@ -35,10 +35,10 @@
"wouter": "^3.1.0"
},
"devDependencies": {
"@babel/core": "^7.23.0",
"@babel/preset-env": "^7.22.20",
"@babel/preset-react": "^7.22.15",
"@babel/preset-typescript": "^7.23.0",
"@babel/core": "^7.24.4",
"@babel/preset-env": "^7.24.4",
"@babel/preset-react": "^7.24.1",
"@babel/preset-typescript": "^7.24.1",
"@browserify/envify": "^6.0.0",
"@browserify/uglifyify": "^6.0.0",
"@joepie91/eslint-config": "^1.1.1",

View File

@ -17,15 +17,11 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
const React = require("react");
import React from "react";
const {
Combobox,
ComboboxItem,
ComboboxPopover,
} = require("ariakit/combobox");
import { Combobox, ComboboxItem, ComboboxPopover } from "ariakit/combobox";
module.exports = function ComboBox({ field, items, label, children, ...inputProps }) {
export default function ComboBox({ field, items, label, children, ...inputProps }) {
return (
<div className="form-field combobox-wrapper">
<label>
@ -48,4 +44,4 @@ module.exports = function ComboBox({ field, items, label, children, ...inputProp
</ComboboxPopover>
</div>
);
};
}

View File

@ -17,7 +17,7 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
const React = require("react");
import React from "react";
function ErrorFallback({ error, resetErrorBoundary }) {
return (
@ -81,4 +81,4 @@ function Error({ error }) {
);
}
module.exports = { ErrorFallback, Error };
export { ErrorFallback, Error };

View File

@ -17,9 +17,9 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
const React = require("react");
import React from "react";
module.exports = function FakeProfile({ avatar, header, display_name, username, role }) {
export default function FakeProfile({ avatar, header, display_name, username, role }) {
return ( // Keep in sync with web/template/profile.tmpl
<div className="profile">
<div className="profile-header">
@ -49,4 +49,4 @@ module.exports = function FakeProfile({ avatar, header, display_name, username,
</div>
</div>
);
};
}

View File

@ -17,16 +17,15 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
const React = require("react");
import React from "react";
import { useVerifyCredentialsQuery } from "../lib/query/oauth";
const query = require("../lib/query");
module.exports = function FakeToot({ children }) {
export default function FakeToot({ children }) {
const { data: account = {
avatar: "/assets/default_avatars/GoToSocial_icon1.png",
display_name: "",
username: ""
} } = query.useVerifyCredentialsQuery();
} } = useVerifyCredentialsQuery();
return (
<article className="status expanded">
@ -54,4 +53,4 @@ module.exports = function FakeToot({ children }) {
</section>
</article>
);
};
}

View File

@ -17,10 +17,10 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
const React = require("react");
const langs = require("langs");
import React from "react";
import { all } from "langs";
const asElements = langs.all().map((l) => {
const asElements = all().map((l) => {
let code = l["1"].toUpperCase();
let name = l.name;
if (l.name != l.local) {
@ -29,6 +29,6 @@ const asElements = langs.all().map((l) => {
return <option key={code} value={code}>{name}</option>;
});
module.exports = function Languages() {
export default function Languages() {
return asElements;
};
}

View File

@ -17,10 +17,10 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
const React = require("react");
import React from "react";
module.exports = function Loading() {
export default function Loading() {
return (
<i className="fa fa-spin fa-refresh loading-icon" aria-label="Loading" title="Loading" />
);
};
}

View File

@ -17,15 +17,12 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
const React = require("react");
const Loading = require("./loading");
const {
useVerifyCredentialsQuery,
useLogoutMutation,
} = require("../lib/query/oauth");
const { useInstanceV1Query } = require("../lib/query");
import React from "react";
import Loading from "./loading";
import { useVerifyCredentialsQuery, useLogoutMutation } from "../lib/query/oauth";
import { useInstanceV1Query } from "../lib/query/gts-api";
module.exports = function UserLogoutCard() {
export default function UserLogoutCard() {
const { data: profile, isLoading } = useVerifyCredentialsQuery();
const { data: instance } = useInstanceV1Query();
const [logoutQuery] = useLogoutMutation();
@ -44,4 +41,4 @@ module.exports = function UserLogoutCard() {
</div>
);
}
};
}

View File

@ -1,25 +0,0 @@
/*
GoToSocial
Copyright (C) GoToSocial Authors admin@gotosocial.org
SPDX-License-Identifier: AGPL-3.0-or-later
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
module.exports = {
...require("./gts-api"),
...require("./oauth"),
...require("./user"),
...require("./admin")
};

View File

@ -18,10 +18,10 @@
*/
import React from "react";
import { useInstanceKeysExpireMutation } from "../../../../lib/query";
import { TextInput } from "../../../../components/form/inputs";
import MutationButton from "../../../../components/form/mutation-button";
import { useTextInput } from "../../../../lib/form";
import { useInstanceKeysExpireMutation } from "../../../../lib/query/admin";
export default function ExpireRemote({}) {
const domainField = useTextInput("domain");

View File

@ -19,10 +19,10 @@
import React from "react";
import { useMediaCleanupMutation } from "../../../../lib/query";
import { useTextInput } from "../../../../lib/form";
import { TextInput } from "../../../../components/form/inputs";
import MutationButton from "../../../../components/form/mutation-button";
import { useMediaCleanupMutation } from "../../../../lib/query/admin";
export default function Cleanup({}) {
const daysField = useTextInput("days", { defaultValue: "30" });

View File

@ -26,7 +26,7 @@ import { CategorySelect } from '../category-select';
import FakeToot from "../../../../components/fake-toot";
import MutationButton from "../../../../components/form/mutation-button";
import { useAddEmojiMutation } from "../../../../lib/query/admin/custom-emoji";
import { useInstanceV1Query } from "../../../../lib/query";
import { useInstanceV1Query } from "../../../../lib/query/gts-api";
export default function NewEmojiForm() {
const shortcode = useShortcode();

View File

@ -29,7 +29,7 @@ import { TextInput } from "../../../../components/form/inputs";
import { useListEmojiQuery } from "../../../../lib/query/admin/custom-emoji";
import { CustomEmoji } from "../../../../lib/types/custom-emoji";
export function EmojiOverview() {
export default function EmojiOverview() {
const { data: emoji = [], isLoading, isError, error } = useListEmojiQuery({ filter: "domain:local" });
let content: React.JSX.Element;

View File

@ -18,26 +18,35 @@
*/
import { MenuItem } from "../../lib/navigation/menu";
import React from "react";
import { BaseUrlContext, useBaseUrl } from "../../lib/navigation/util";
import { Route, Router, Switch } from "wouter";
import EmojiDetail from "./emoji/local/detail";
import { EmojiOverview } from "./emoji/local/overview";
import RemoteEmoji from "./emoji/remote";
import InstanceSettings from "./settings";
import { InstanceRuleDetail, InstanceRules } from "./settings/rules";
import Media from "./actions/media";
import Keys from "./actions/keys";
import React, { Suspense, lazy } from "react";
import { BaseUrlContext, useBaseUrl, useHasPermission } from "../../lib/navigation/util";
import { Redirect, Route, Router, Switch } from "wouter";
import Loading from "../../components/loading";
import { ErrorBoundary } from "../../lib/navigation/error";
/*
EXPORTED COMPONENTS
*/
/**
* Admininistration menu. Admin actions,
* emoji import, instance settings.
* - /settings/admin/instance-settings
* - /settings/admin/instance-rules
* - /settings/admin/instance-rules/:ruleId
* - /settings/admin/emojis
* - /settings/admin/emojis/local
* - /settings/admin/emojis/local/:emojiId
* - /settings/admin/emojis/remote
* - /settings/admin/actions
* - /settings/admin/actions/media
* - /settings/admin/actions/keys
*/
export function AdminMenu() {
// Don't route if logged-in user
// doesn't have permissions to access.
if (!useHasPermission(["admin"])) {
return null;
}
return (
<MenuItem
name="Administration"
@ -62,20 +71,39 @@ export function AdminMenu() {
}
/**
* Admininistration router. Admin actions,
* emoji import, instance settings.
* - /settings/admin/instance-settings
* - /settings/admin/instance-rules
* - /settings/admin/instance-rules/:ruleId
* - /settings/admin/emojis
* - /settings/admin/emojis/local
* - /settings/admin/emojis/local/:emojiId
* - /settings/admin/emojis/remote
* - /settings/admin/actions
* - /settings/admin/actions/media
* - /settings/admin/actions/keys
*/
export function AdminRouter() {
const parentUrl = useBaseUrl();
const thisBase = "/admin";
const absBase = parentUrl + thisBase;
const InstanceSettings = lazy(() => import('./settings/settings'));
const InstanceRules = lazy(() => import("./settings/rules"));
const InstanceRuleDetail = lazy(() => import('./settings/ruledetail'));
return (
<BaseUrlContext.Provider value={absBase}>
<Router base={thisBase}>
<Route path="/instance-settings" component={InstanceSettings}/>
<Route path="/instance-rules" component={InstanceRules} />
<Route path="/instance-rules/:ruleId" component={InstanceRuleDetail} />
<ErrorBoundary>
<Suspense fallback={<Loading/>}>
<Switch>
<Route path="/instance-settings" component={InstanceSettings}/>
<Route path="/instance-rules" component={InstanceRules} />
<Route path="/instance-rules/:ruleId" component={InstanceRuleDetail} />
<Route><Redirect to="/instance-settings" /></Route>
</Switch>
</Suspense>
</ErrorBoundary>
<AdminEmojisRouter />
<AdminActionsRouter />
</Router>
@ -139,38 +167,64 @@ function AdminEmojisMenu() {
ROUTERS
*/
/**
* - /settings/admin/emojis
* - /settings/admin/emojis/local
* - /settings/admin/emojis/local/:emojiId
* - /settings/admin/emojis/remote
*/
function AdminEmojisRouter() {
const parentUrl = useBaseUrl();
const thisBase = "/emojis";
const absBase = parentUrl + thisBase;
const EmojiOverview = lazy(() => import('./emoji/local/overview'));
const EmojiDetail = lazy(() => import('./emoji/local/detail'));
const RemoteEmoji = lazy(() => import('./emoji/remote'));
return (
<BaseUrlContext.Provider value={absBase}>
<Router base={thisBase}>
<Switch>
<Route path="/local/:emojiId" component={EmojiDetail} />
<Route path="/local" component={EmojiOverview} />
<Route path="/remote" component={RemoteEmoji} />
<Route component={EmojiOverview}/>
</Switch>
<ErrorBoundary>
<Suspense fallback={<Loading/>}>
<Switch>
<Route path="/local" component={EmojiOverview} />
<Route path="/local/:emojiId" component={EmojiDetail} />
<Route path="/remote" component={RemoteEmoji} />
<Route><Redirect to="/local" /></Route>
</Switch>
</Suspense>
</ErrorBoundary>
</Router>
</BaseUrlContext.Provider>
);
}
/**
* - /settings/admin/actions
* - /settings/admin/actions/media
* - /settings/admin/actions/keys
*/
function AdminActionsRouter() {
const parentUrl = useBaseUrl();
const thisBase = "/actions";
const absBase = parentUrl + thisBase;
const Media = lazy(() => import('./actions/media'));
const Keys = lazy(() => import('./actions/keys'));
return (
<BaseUrlContext.Provider value={absBase}>
<Router base={thisBase}>
<Switch>
<Route path="/media" component={Media} />
<Route path="/keys" component={Keys} />
<Route component={Media}/>
</Switch>
<ErrorBoundary>
<Suspense fallback={<Loading/>}>
<Switch>
<Route path="/media" component={Media} />
<Route path="/keys" component={Keys} />
<Route><Redirect to="/media" /></Route>
</Switch>
</Suspense>
</ErrorBoundary>
</Router>
</BaseUrlContext.Provider>
);

View File

@ -0,0 +1,103 @@
/*
GoToSocial
Copyright (C) GoToSocial Authors admin@gotosocial.org
SPDX-License-Identifier: AGPL-3.0-or-later
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React from "react";
import { Redirect, useParams } from "wouter";
import { useBaseUrl } from "../../../lib/navigation/util";
import { useValue, useTextInput } from "../../../lib/form";
import useFormSubmit from "../../../lib/form/submit";
import { TextArea } from "../../../components/form/inputs";
import MutationButton from "../../../components/form/mutation-button";
import BackButton from "../../../components/back-button";
import Loading from "../../../components/loading";
import { useDeleteInstanceRuleMutation, useInstanceRulesQuery, useUpdateInstanceRuleMutation } from "../../../lib/query/admin";
import { Error } from "../../../components/error";
export default function InstanceRuleDetail() {
const baseUrl = useBaseUrl();
const params: { ruleId: string } = useParams();
const { data: rules, isLoading, isError, error } = useInstanceRulesQuery();
if (isLoading) {
return <Loading />;
} else if (isError) {
return <Error error={error} />;
}
if (rules === undefined) {
throw "undefined rules";
}
return (
<>
<BackButton to={`~${baseUrl}/instance-rules`} />
<EditInstanceRuleForm rule={rules[params.ruleId]} />
</>
);
}
function EditInstanceRuleForm({ rule }) {
const baseUrl = useBaseUrl();
const form = {
id: useValue("id", rule.id),
rule: useTextInput("text", { defaultValue: rule.text })
};
const [submitForm, result] = useFormSubmit(form, useUpdateInstanceRuleMutation());
const [deleteRule, deleteResult] = useDeleteInstanceRuleMutation({ fixedCacheKey: rule.id });
if (result.isSuccess || deleteResult.isSuccess) {
return (
<Redirect to={`~${baseUrl}/instance-rules`} />
);
}
return (
<div className="rule-detail">
<form onSubmit={submitForm}>
<TextArea
field={form.rule}
/>
<div className="action-buttons row">
<MutationButton
label="Save"
showError={false}
result={result}
disabled={!form.rule.hasChanged()}
/>
<MutationButton
disabled={false}
type="button"
onClick={() => deleteRule(rule.id)}
label="Delete"
className="button danger"
showError={false}
result={deleteResult}
/>
</div>
{result.error && <Error error={result.error} />}
{deleteResult.error && <Error error={deleteResult.error} />}
</form>
</div>
);
}

View File

@ -18,20 +18,17 @@
*/
import React from "react";
import { Link, Redirect, useParams } from "wouter";
import { useInstanceRulesQuery, useAddInstanceRuleMutation, useUpdateInstanceRuleMutation, useDeleteInstanceRuleMutation } from "../../../lib/query";
import { Link } from "wouter";
import { useInstanceRulesQuery, useAddInstanceRuleMutation } from "../../../lib/query/admin";
import { useBaseUrl } from "../../../lib/navigation/util";
import { useValue, useTextInput } from "../../../lib/form";
import { useTextInput } from "../../../lib/form";
import useFormSubmit from "../../../lib/form/submit";
import { TextArea } from "../../../components/form/inputs";
import MutationButton from "../../../components/form/mutation-button";
import { Error } from "../../../components/error";
import BackButton from "../../../components/back-button";
import { InstanceRule, MappedRules } from "../../../lib/types/rules";
import Loading from "../../../components/loading";
import FormWithData from "../../../lib/form/form-with-data";
export function InstanceRules() {
export default function InstanceRules() {
return (
<>
<h1>Instance Rules</h1>
@ -56,8 +53,8 @@ function InstanceRulesForm({ data: rules }: { data: MappedRules }) {
<form onSubmit={submitForm} className="new-rule">
<ol className="instance-rules">
{Object.values(rules).map((rule: InstanceRule) => (
<Link className="rule" to={`~${baseUrl}/instance-rules/${rule.id}`}>
<li>
<Link key={"link-"+rule.id} className="rule" to={`~${baseUrl}/instance-rules/${rule.id}`}>
<li key={rule.id}>
<h2>{rule.text} <i className="fa fa-pencil edit-icon" /></h2>
</li>
<span>{new Date(rule.created_at).toLocaleString()}</span>
@ -76,76 +73,3 @@ function InstanceRulesForm({ data: rules }: { data: MappedRules }) {
</form>
);
}
export function InstanceRuleDetail() {
const baseUrl = useBaseUrl();
const params: { ruleId: string } = useParams();
const { data: rules, isLoading, isError, error } = useInstanceRulesQuery();
if (isLoading) {
return <Loading />;
} else if (isError) {
return <Error error={error} />;
}
if (rules === undefined) {
throw "undefined rules";
}
return (
<>
<BackButton to={`~${baseUrl}/instance-rules`} />
<EditInstanceRuleForm rule={rules[params.ruleId]} />
</>
);
}
function EditInstanceRuleForm({ rule }) {
const baseUrl = useBaseUrl();
const form = {
id: useValue("id", rule.id),
rule: useTextInput("text", { defaultValue: rule.text })
};
const [submitForm, result] = useFormSubmit(form, useUpdateInstanceRuleMutation());
const [deleteRule, deleteResult] = useDeleteInstanceRuleMutation({ fixedCacheKey: rule.id });
if (result.isSuccess || deleteResult.isSuccess) {
return (
<Redirect to={`~${baseUrl}/instance-rules`} />
);
}
return (
<div className="rule-detail">
<form onSubmit={submitForm}>
<TextArea
field={form.rule}
/>
<div className="action-buttons row">
<MutationButton
label="Save"
showError={false}
result={result}
disabled={!form.rule.hasChanged()}
/>
<MutationButton
disabled={false}
type="button"
onClick={() => deleteRule(rule.id)}
label="Delete"
className="button danger"
showError={false}
result={deleteResult}
/>
</div>
{result.error && <Error error={result.error} />}
{deleteResult.error && <Error error={deleteResult.error} />}
</form>
</div>
);
}

View File

@ -20,17 +20,13 @@
import React from "react";
import { useTextInput, useFileInput } from "../../../lib/form";
const useFormSubmit = require("../../../lib/form/submit").default;
import { TextInput, TextArea, FileInput } from "../../../components/form/inputs";
const FormWithData = require("../../../lib/form/form-with-data").default;
import MutationButton from "../../../components/form/mutation-button";
import { useInstanceV1Query } from "../../../lib/query";
import { useInstanceV1Query } from "../../../lib/query/gts-api";
import { useUpdateInstanceMutation } from "../../../lib/query/admin";
import { InstanceV1 } from "../../../lib/types/instance";
import FormWithData from "../../../lib/form/form-with-data";
import useFormSubmit from "../../../lib/form/submit";
export default function InstanceSettings() {
return (

View File

@ -19,17 +19,14 @@
import React from "react";
import { useActionAccountMutation } from "../../../../lib/query";
import { useActionAccountMutation } from "../../../../lib/query/admin";
import MutationButton from "../../../../components/form/mutation-button";
import useFormSubmit from "../../../../lib/form/submit";
import {
useValue,
useTextInput,
useBoolInput,
} from "../../../../lib/form";
import { Checkbox, TextInput } from "../../../../components/form/inputs";
import { AdminAccount } from "../../../../lib/types/account";

View File

@ -19,18 +19,14 @@
import React from "react";
import { useLocation } from "wouter";
import { useHandleSignupMutation } from "../../../../lib/query";
import { useHandleSignupMutation } from "../../../../lib/query/admin";
import MutationButton from "../../../../components/form/mutation-button";
import useFormSubmit from "../../../../lib/form/submit";
import {
useValue,
useTextInput,
useBoolInput,
} from "../../../../lib/form";
import { Checkbox, Select, TextInput } from "../../../../components/form/inputs";
import { AdminAccount } from "../../../../lib/types/account";

View File

@ -19,12 +19,9 @@
import React from "react";
import { useGetAccountQuery } from "../../../../lib/query";
import { useGetAccountQuery } from "../../../../lib/query/admin";
import FormWithData from "../../../../lib/form/form-with-data";
import FakeProfile from "../../../../components/fake-profile";
import { AdminAccount } from "../../../../lib/types/account";
import { HandleSignup } from "./handlesignup";
import { AccountActions } from "./actions";

View File

@ -18,7 +18,7 @@
*/
import React from "react";
import { useSearchAccountsQuery } from "../../../../lib/query";
import { useSearchAccountsQuery } from "../../../../lib/query/admin";
import { AccountList } from "../../../../components/account-list";
export default function AccountsPending() {

View File

@ -19,9 +19,8 @@
import React from "react";
import { useLazySearchAccountsQuery } from "../../../../lib/query";
import { useLazySearchAccountsQuery } from "../../../../lib/query/admin";
import { useTextInput } from "../../../../lib/form";
import { AccountList } from "../../../../components/account-list";
import { SearchAccountParams } from "../../../../lib/types/account";
import { Select, TextInput } from "../../../../components/form/inputs";

View File

@ -20,18 +20,14 @@
import React from "react";
import { useEffect } from "react";
import { useExportDomainListMutation } from "../../../lib/query/admin/domain-permissions/export";
import useFormSubmit from "../../../lib/form/submit";
import {
RadioGroup,
TextArea,
Select,
} from "../../../components/form/inputs";
import MutationButton from "../../../components/form/mutation-button";
import { Error } from "../../../components/error";
import ExportFormatTable from "./export-format-table";

View File

@ -22,11 +22,8 @@ import React from "react";
import { useMemo } from "react";
import { Link, useLocation, useParams } from "wouter";
import { matchSorter } from "match-sorter";
import { useTextInput } from "../../../lib/form";
import { TextInput } from "../../../components/form/inputs";
import Loading from "../../../components/loading";
import { useDomainAllowsQuery, useDomainBlocksQuery } from "../../../lib/query/admin/domain-permissions/get";
import type { MappedDomainPerms, PermType } from "../../../lib/types/domain-permission";

View File

@ -18,9 +18,7 @@
*/
import React from "react";
import { memo, useMemo, useCallback, useEffect } from "react";
import { isValidDomainPermission, hasBetterScope } from "../../../lib/util/domain-permission";
import {

View File

@ -19,9 +19,7 @@
import React from "react";
import { Link } from "wouter";
import FormWithData from "../../../lib/form/form-with-data";
import Username from "./username";
import { useListReportsQuery } from "../../../lib/query/admin/reports";

View File

@ -18,17 +18,13 @@
*/
import { MenuItem } from "../../lib/navigation/menu";
import React from "react";
import { BaseUrlContext, useBaseUrl } from "../../lib/navigation/util";
import React, { lazy, Suspense } from "react";
import { BaseUrlContext, useBaseUrl, useHasPermission } from "../../lib/navigation/util";
import { Redirect, Route, Router, Switch } from "wouter";
import AccountsOverview from "./accounts";
import AccountsPending from "./accounts/pending";
import AccountDetail from "./accounts/detail";
import { ReportOverview } from "./reports/overview";
import DomainPermissionsOverview from "./domain-permissions/overview";
import DomainPermDetail from "./domain-permissions/detail";
import ImportExport from "./domain-permissions/import-export";
import ReportDetail from "./reports/detail";
import { ErrorBoundary } from "../../lib/navigation/error";
import Loading from "../../components/loading";
/*
EXPORTED COMPONENTS
@ -61,7 +57,13 @@ export function ModerationRouter() {
const parentUrl = useBaseUrl();
const thisBase = "/moderation";
const absBase = parentUrl + thisBase;
// Don't route if logged-in user
// doesn't have permissions to access.
if (!useHasPermission(["moderator"])) {
return null;
}
return (
<BaseUrlContext.Provider value={absBase}>
<Router base={thisBase}>
@ -161,40 +163,65 @@ function ModerationReportsRouter() {
);
}
/**
* - /settings/moderation/accounts/overview
* - /settings/moderation/accounts/pending
* - /settings/moderation/accounts/:accountID
*/
function ModerationAccountsRouter() {
const parentUrl = useBaseUrl();
const thisBase = "/accounts";
const absBase = parentUrl + thisBase;
const AccountsOverview = lazy(() => import('./accounts'));
const AccountsPending = lazy(() => import('./accounts/pending'));
const AccountDetail = lazy(() => import('./accounts/detail'));
return (
<BaseUrlContext.Provider value={absBase}>
<Router base={thisBase}>
<Switch>
<Route path="/overview" component={AccountsOverview}/>
<Route path="/pending" component={AccountsPending}/>
<Route path="/:accountID" component={AccountDetail}/>
<Route><Redirect to="/overview"/></Route>
</Switch>
<ErrorBoundary>
<Switch>
<Route path="/overview" component={AccountsOverview}/>
<Route path="/pending" component={AccountsPending}/>
<Route path="/:accountID" component={AccountDetail}/>
<Route><Redirect to="/overview"/></Route>
</Switch>
</ErrorBoundary>
</Router>
</BaseUrlContext.Provider>
);
}
/**
* - /settings/moderation/domain-permissions/:permType
* - /settings/moderation/domain-permissions/:permType/:domain
* - /settings/moderation/domain-permissions/import-export
* - /settings/moderation/domain-permissions/process
*/
function ModerationDomainPermsRouter() {
const parentUrl = useBaseUrl();
const thisBase = "/domain-permissions";
const absBase = parentUrl + thisBase;
const DomainPermissionsOverview = lazy(() => import('./domain-permissions/overview'));
const DomainPermDetail = lazy(() => import('./domain-permissions/detail'));
const ImportExport = lazy(() => import('./domain-permissions/import-export'));
return (
<BaseUrlContext.Provider value={absBase}>
<Router base={thisBase}>
<Switch>
<Route path="/import-export" component={ImportExport} />
<Route path="/process" component={ImportExport} />
<Route path="/:permType/:domain" component={DomainPermDetail} />
<Route path="/:permType" component={DomainPermissionsOverview} />
<Route><Redirect to="/blocks"/></Route>
</Switch>
<ErrorBoundary>
<Suspense fallback={<Loading/>}>
<Switch>
<Route path="/:permType" component={DomainPermissionsOverview} />
<Route path="/:permType/:domain" component={DomainPermDetail} />
<Route path="/import-export" component={ImportExport} />
<Route path="/process" component={ImportExport} />
<Route><Redirect to="/blocks"/></Route>
</Switch>
</Suspense>
</ErrorBoundary>
</Router>
</BaseUrlContext.Provider>
);

View File

@ -42,9 +42,10 @@ import FormWithData from "../../lib/form/form-with-data";
import FakeProfile from "../../components/fake-profile";
import MutationButton from "../../components/form/mutation-button";
import { useAccountThemesQuery, useInstanceV1Query } from "../../lib/query";
import { useAccountThemesQuery } from "../../lib/query/user";
import { useUpdateCredentialsMutation } from "../../lib/query/user";
import { useVerifyCredentialsQuery } from "../../lib/query/oauth";
import { useInstanceV1Query } from "../../lib/query/gts-api";
export default function UserProfile() {
return (

View File

@ -18,18 +18,19 @@
*/
import React from "react";
import query from "../../lib/query";
import { useTextInput, useBoolInput } from "../../lib/form";
import useFormSubmit from "../../lib/form/submit";
import { Select, TextInput, Checkbox } from "../../components/form/inputs";
import FormWithData from "../../lib/form/form-with-data";
import Languages from "../../components/languages";
import MutationButton from "../../components/form/mutation-button";
import { useVerifyCredentialsQuery } from "../../lib/query/oauth";
import { usePasswordChangeMutation, useUpdateCredentialsMutation } from "../../lib/query/user";
export default function UserSettings() {
return (
<FormWithData
dataQuery={query.useVerifyCredentialsQuery}
dataQuery={useVerifyCredentialsQuery}
DataForm={UserSettingsForm}
/>
);
@ -50,7 +51,7 @@ function UserSettingsForm({ data }) {
statusContentType: useTextInput("source[status_content_type]", { source: data, defaultValue: "text/plain" }),
};
const [submitForm, result] = useFormSubmit(form, query.useUpdateCredentialsMutation());
const [submitForm, result] = useFormSubmit(form, useUpdateCredentialsMutation());
return (
<>
@ -123,7 +124,7 @@ function PasswordChange() {
}
});
const [submitForm, result] = useFormSubmit(form, query.usePasswordChangeMutation());
const [submitForm, result] = useFormSubmit(form, usePasswordChangeMutation());
return (
<form className="change-password" onSubmit={submitForm}>

View File

@ -25,9 +25,9 @@
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
/* Modules */
"module": "commonjs", /* Specify what module code is generated. */
"module": "preserve", /* Specify what module code is generated. */
// "rootDir": "./", /* Specify the root folder within your source files. */
// "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
"moduleResolution": "bundler", /* Specify how TypeScript looks up a file from a given module specifier. */
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
@ -44,7 +44,7 @@
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
/* JavaScript Support */
"allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */

File diff suppressed because it is too large Load Diff