mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-11-02 19:52:25 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

[chore] Settings refactor 2: the re-refactoring-ing (#2866)

Browse source 
* [chore] Bit more refactoring of settings panel

* fix up some remaining things

* groovy baby yeah!

* remove unused Suspense
This commit is contained in:
tobi 2024-04-25 18:24:24 +02:00 • committed by GitHub
commit aecf74951c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
41 changed files with 1360 additions and 958 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/source/settings/views/admin/actions/keys/expireremote.tsx
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");

2
web/source/settings/views/admin/actions/media/cleanup.tsx
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" });

2
web/source/settings/views/admin/emoji/local/new-emoji.tsx
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();

2
web/source/settings/views/admin/emoji/local/overview.tsx
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;

60
web/source/settings/views/admin/settings/rules.tsx → web/source/settings/views/admin/instance/ruledetail.tsx
View file

@ -18,66 +18,18 @@
*/
import React from "react";
import { Link, Redirect, useParams } from "wouter";
import { useInstanceRulesQuery, useAddInstanceRuleMutation, useUpdateInstanceRuleMutation, useDeleteInstanceRuleMutation } from "../../../lib/query";
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 { 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";
import { useDeleteInstanceRuleMutation, useInstanceRulesQuery, useUpdateInstanceRuleMutation } from "../../../lib/query/admin";
import { Error } from "../../../components/error";
export function InstanceRules() {
return (
<>
<h1>Instance Rules</h1>
<FormWithData
dataQuery={useInstanceRulesQuery}
DataForm={InstanceRulesForm}
/>
</>
);
}
function InstanceRulesForm({ data: rules }: { data: MappedRules }) {
const baseUrl = useBaseUrl();
const newRule = useTextInput("text");
const [submitForm, result] = useFormSubmit({ newRule }, useAddInstanceRuleMutation(), {
changedOnly: true,
onFinish: () => newRule.reset()
});
return (
<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>
<h2>{rule.text} <i className="fa fa-pencil edit-icon" /></h2>
</li>
<span>{new Date(rule.created_at).toLocaleString()}</span>
</Link>
))}
</ol>
<TextArea
field={newRule}
label="New instance rule"
/>
<MutationButton
disabled={newRule.value === undefined || newRule.value.length === 0}
label="Add rule"
result={result}
/>
</form>
);
}
export function InstanceRuleDetail() {
export default function InstanceRuleDetail() {
const baseUrl = useBaseUrl();
const params: { ruleId: string } = useParams();
@ -94,7 +46,7 @@ export function InstanceRuleDetail() {
return (
<>
<BackButton to={`~${baseUrl}/instance-rules`} />
<BackButton to={`~${baseUrl}/rules`} />
<EditInstanceRuleForm rule={rules[params.ruleId]} />
</>
);
@ -113,7 +65,7 @@ function EditInstanceRuleForm({ rule }) {
if (result.isSuccess || deleteResult.isSuccess) {
return (
<Redirect to={`~${baseUrl}/instance-rules`} />
<Redirect to={`~${baseUrl}/rules`} />
);
}

75
web/source/settings/views/admin/instance/rules.tsx Normal file
View file

@ -0,0 +1,75 @@
/*
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 { Link } from "wouter";
import { useInstanceRulesQuery, useAddInstanceRuleMutation } from "../../../lib/query/admin";
import { useBaseUrl } from "../../../lib/navigation/util";
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 { InstanceRule, MappedRules } from "../../../lib/types/rules";
import FormWithData from "../../../lib/form/form-with-data";
export default function InstanceRules() {
return (
<>
<h1>Instance Rules</h1>
<FormWithData
dataQuery={useInstanceRulesQuery}
DataForm={InstanceRulesForm}
/>
</>
);
}
function InstanceRulesForm({ data: rules }: { data: MappedRules }) {
const baseUrl = useBaseUrl();
const newRule = useTextInput("text");
const [submitForm, result] = useFormSubmit({ newRule }, useAddInstanceRuleMutation(), {
changedOnly: true,
onFinish: () => newRule.reset()
});
return (
<form onSubmit={submitForm} className="new-rule">
<ol className="instance-rules">
{Object.values(rules).map((rule: InstanceRule) => (
<Link key={"link-"+rule.id} className="rule" to={`~${baseUrl}/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>
</Link>
))}
</ol>
<TextArea
field={newRule}
label="New instance rule"
/>
<MutationButton
disabled={newRule.value === undefined || newRule.value.length === 0}
label="Add rule"
result={result}
/>
</form>
);
}

10
web/source/settings/views/admin/settings/index.tsx → web/source/settings/views/admin/instance/settings.tsx
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 (

129
web/source/settings/views/admin/menu.tsx Normal file
View file

@ -0,0 +1,129 @@
/*
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 { MenuItem } from "../../lib/navigation/menu";
import React from "react";
import { useHasPermission } from "../../lib/navigation/util";
/*
EXPORTED COMPONENTS
*/
/**
* - /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 default function AdminMenu() {
const permissions = ["admin"];
const admin = useHasPermission(permissions);
if (!admin) {
return null;
}
return (
<MenuItem
name="Administration"
itemUrl="admin"
defaultChild="actions"
permissions={permissions}
>
<AdminInstanceMenu />
<AdminEmojisMenu />
<AdminActionsMenu />
</MenuItem>
);
}
/*
INTERNAL COMPONENTS
*/
function AdminInstanceMenu() {
return (
<MenuItem
name="Instance"
itemUrl="instance"
defaultChild="settings"
icon="fa-sitemap"
>
<MenuItem
name="Settings"
itemUrl="settings"
icon="fa-sliders"
/>
<MenuItem
name="Rules"
itemUrl="rules"
icon="fa-dot-circle-o"
/>
</MenuItem>
);
}
function AdminActionsMenu() {
return (
<MenuItem
name="Actions"
itemUrl="actions"
defaultChild="media"
icon="fa-bolt"
>
<MenuItem
name="Media"
itemUrl="media"
icon="fa-photo"
/>
<MenuItem
name="Keys"
itemUrl="keys"
icon="fa-key-modern"
/>
</MenuItem>
);
}
function AdminEmojisMenu() {
return (
<MenuItem
name="Custom Emoji"
itemUrl="emojis"
defaultChild="local"
icon="fa-smile-o"
>
<MenuItem
name="Local"
itemUrl="local"
icon="fa-home"
/>
<MenuItem
name="Remote"
itemUrl="remote"
icon="fa-cloud"
/>
</MenuItem>
);
}

151
web/source/settings/views/admin/router.tsx Normal file
View file

@ -0,0 +1,151 @@
/*
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 { BaseUrlContext, useBaseUrl, useHasPermission } from "../../lib/navigation/util";
import { Redirect, Route, Router, Switch } from "wouter";
import { ErrorBoundary } from "../../lib/navigation/error";
import InstanceSettings from "./instance/settings";
import InstanceRules from "./instance/rules";
import InstanceRuleDetail from "./instance/ruledetail";
import Media from "./actions/media";
import Keys from "./actions/keys";
import EmojiOverview from "./emoji/local/overview";
import EmojiDetail from "./emoji/local/detail";
import RemoteEmoji from "./emoji/remote";
/*
EXPORTED COMPONENTS
*/
/**
* - /settings/instance/settings
* - /settings/instance/rules
* - /settings/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 default function AdminRouter() {
const parentUrl = useBaseUrl();
const thisBase = "/admin";
const absBase = parentUrl + thisBase;
return (
<BaseUrlContext.Provider value={absBase}>
<Router base={thisBase}>
<AdminInstanceRouter />
<AdminEmojisRouter />
<AdminActionsRouter />
</Router>
</BaseUrlContext.Provider>
);
}
/*
INTERNAL COMPONENTS
*/
/**
* - /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 permissions = ["admin"];
const admin = useHasPermission(permissions);
if (!admin) {
return null;
}
return (
<BaseUrlContext.Provider value={absBase}>
<Router base={thisBase}>
<ErrorBoundary>
<Switch>
<Route path="/local" component={EmojiOverview} />
<Route path="/local/:emojiId" component={EmojiDetail} />
<Route path="/remote" component={RemoteEmoji} />
<Route><Redirect to="/local" /></Route>
</Switch>
</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;
return (
<BaseUrlContext.Provider value={absBase}>
<Router base={thisBase}>
<ErrorBoundary>
<Switch>
<Route path="/media" component={Media} />
<Route path="/keys" component={Keys} />
<Route><Redirect to="/media" /></Route>
</Switch>
</ErrorBoundary>
</Router>
</BaseUrlContext.Provider>
);
}
/**
* - /settings/instance/settings
* - /settings/instance/rules
* - /settings/instance/rules/:ruleId
*/
function AdminInstanceRouter() {
const parentUrl = useBaseUrl();
const thisBase = "/instance";
const absBase = parentUrl + thisBase;
return (
<BaseUrlContext.Provider value={absBase}>
<Router base={thisBase}>
<ErrorBoundary>
<Switch>
<Route path="/settings" component={InstanceSettings}/>
<Route path="/rules" component={InstanceRules} />
<Route path="/rules/:ruleId" component={InstanceRuleDetail} />
<Route><Redirect to="/settings" /></Route>
</Switch>
</ErrorBoundary>
</Router>
</BaseUrlContext.Provider>
);
}

177
web/source/settings/views/admin/routes.tsx
View file

@ -1,177 +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/>.
*/
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";
/*
EXPORTED COMPONENTS
*/
/**
* Admininistration menu. Admin actions,
* emoji import, instance settings.
*/
export function AdminMenu() {
return (
<MenuItem
name="Administration"
itemUrl="admin"
defaultChild="actions"
permissions={["admin"]}
>
<MenuItem
name="Instance Settings"
itemUrl="instance-settings"
icon="fa-sliders"
/>
<MenuItem
name="Instance Rules"
itemUrl="instance-rules"
icon="fa-dot-circle-o"
/>
<AdminEmojisMenu />
<AdminActionsMenu />
</MenuItem>
);
}
/**
* Admininistration router. Admin actions,
* emoji import, instance settings.
*/
export function AdminRouter() {
const parentUrl = useBaseUrl();
const thisBase = "/admin";
const absBase = parentUrl + thisBase;
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} />
<AdminEmojisRouter />
<AdminActionsRouter />
</Router>
</BaseUrlContext.Provider>
);
}
/*
INTERNAL COMPONENTS
*/
/*
MENUS
*/
function AdminActionsMenu() {
return (
<MenuItem
name="Actions"
itemUrl="actions"
defaultChild="media"
icon="fa-bolt"
>
<MenuItem
name="Media"
itemUrl="media"
icon="fa-photo"
/>
<MenuItem
name="Keys"
itemUrl="keys"
icon="fa-key-modern"
/>
</MenuItem>
);
}
function AdminEmojisMenu() {
return (
<MenuItem
name="Custom Emoji"
itemUrl="emojis"
defaultChild="local"
icon="fa-smile-o"
>
<MenuItem
name="Local"
itemUrl="local"
icon="fa-home"
/>
<MenuItem
name="Remote"
itemUrl="remote"
icon="fa-cloud"
/>
</MenuItem>
);
}
/*
ROUTERS
*/
function AdminEmojisRouter() {
const parentUrl = useBaseUrl();
const thisBase = "/emojis";
const absBase = parentUrl + thisBase;
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>
</Router>
</BaseUrlContext.Provider>
);
}
function AdminActionsRouter() {
const parentUrl = useBaseUrl();
const thisBase = "/actions";
const absBase = parentUrl + thisBase;
return (
<BaseUrlContext.Provider value={absBase}>
<Router base={thisBase}>
<Switch>
<Route path="/media" component={Media} />
<Route path="/keys" component={Keys} />
<Route component={Media}/>
</Switch>
</Router>
</BaseUrlContext.Provider>
);
}