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

* [chore] Bit more refactoring of settings panel

* fix up some remaining things

* groovy baby yeah!

* remove unused Suspense

web/source/settings/views/moderation/accounts/detail/actions.tsx

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

web/source/settings/views/moderation/accounts/detail/handlesignup.tsx

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

web/source/settings/views/moderation/accounts/detail/index.tsx

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

web/source/settings/views/moderation/accounts/pending/index.tsx

@@ -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() {

web/source/settings/views/moderation/accounts/search/index.tsx

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

web/source/settings/views/moderation/domain-permissions/form.tsx

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

web/source/settings/views/moderation/domain-permissions/overview.tsx

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

web/source/settings/views/moderation/domain-permissions/process.tsx

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

web/source/settings/views/moderation/menu.tsx

@@ -0,0 +1,121 @@
+/*
+	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/moderation/reports/overview
+ * - /settings/moderation/reports/:reportId
+ * - /settings/moderation/accounts/overview
+ * - /settings/moderation/accounts/pending
+ * - /settings/moderation/accounts/:accountID
+ * - /settings/moderation/domain-permissions/:permType
+ * - /settings/moderation/domain-permissions/:permType/:domain
+ * - /settings/moderation/domain-permissions/import-export
+ * - /settings/moderation/domain-permissions/process
+ */
+export default function ModerationMenu() {
+	const permissions = ["moderator"];
+	const moderator = useHasPermission(permissions);
+	if (!moderator) {
+		return null;
+	}
+	
+	return (
+		<MenuItem
+			name="Moderation"
+			itemUrl="moderation"
+			defaultChild="reports"
+			permissions={permissions}
+		>
+			<ModerationReportsMenu />
+			<ModerationAccountsMenu />
+			<ModerationDomainPermsMenu />
+		</MenuItem>
+	);
+}
+
+/*
+	INTERNAL COMPONENTS
+*/
+
+function ModerationReportsMenu() {
+	return (
+		<MenuItem
+			name="Reports"
+			itemUrl="reports"
+			icon="fa-flag"
+		/>
+	);
+}
+
+function ModerationAccountsMenu() {
+	return (
+		<MenuItem
+			name="Accounts"
+			itemUrl="accounts"
+			defaultChild="overview"
+			icon="fa-users"
+		>
+			<MenuItem
+				name="Overview"
+				itemUrl="overview"
+				icon="fa-list"
+			/>
+			<MenuItem
+				name="Pending"
+				itemUrl="pending"
+				icon="fa-question"
+			/>
+		</MenuItem>
+	);
+}
+
+function ModerationDomainPermsMenu() {
+	return (
+		<MenuItem
+			name="Domain Permissions"
+			itemUrl="domain-permissions"
+			defaultChild="blocks"
+			icon="fa-hubzilla"
+		>
+			<MenuItem
+				name="Blocks"
+				itemUrl="blocks"
+				icon="fa-close"
+			/>
+			<MenuItem
+				name="Allows"
+				itemUrl="allows"
+				icon="fa-check"
+			/>
+			<MenuItem
+				name="Import/Export"
+				itemUrl="import-export"
+				icon="fa-floppy-o"
+			/>
+		</MenuItem>
+	);
+}

web/source/settings/views/moderation/reports/detail.tsx

@@ -52,7 +52,15 @@ function ReportDetailForm({ data: report }) {
 	return (
 		<div className="report detail">
 			<div className="usernames">
-				<Username user={from} /> reported <Username user={target} />
+				<Username
+					user={from}
+					link={`~/settings/moderation/accounts/${from.id}`}
+				/>
+				<> reported </>
+				<Username
+					user={target}
+					link={`~/settings/moderation/accounts/${target.id}`}
+				/>
 			</div>
 
 			{report.action_taken &&

web/source/settings/views/moderation/reports/overview.tsx

@@ -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";
 
@@ -77,7 +75,7 @@ function ReportEntry({ report }) {
 			<div className={`report entry${report.action_taken ? " resolved" : ""}`}>
 				<div className="byline">
 					<div className="usernames">
-						<Username user={from} link={false} /> reported <Username user={target} link={false} />
+						<Username user={from} /> reported <Username user={target} />
 					</div>
 					<h3 className="report-status">
 						{report.action_taken ? "Resolved" : "Open"}

web/source/settings/views/moderation/reports/username.tsx

@@ -19,8 +19,14 @@
 
 import React from "react";
 import { Link } from "wouter";
+import { AdminAccount } from "../../../lib/types/account";
 
-export default function Username({ user, link = true }) {
+interface UsernameProps {
+	user: AdminAccount;
+	link?: string;
+}
+
+export default function Username({ user, link }: UsernameProps) {
 	let className = "user";
 	let isLocal = user.domain == null;
 
@@ -36,19 +42,25 @@ export default function Username({ user, link = true }) {
 		? { fa: "fa-home", info: "Local user" }
 		: { fa: "fa-external-link-square", info: "Remote user" };
 
-	let Element: any = "div";
-	let href: any = null;
-
-	if (link) {
-		Element = Link;
-		href = `/settings/admin/accounts/${user.id}`;
-	}
-
-	return (
-		<Element className={className} to={href}>
+	const content = (
+		<>
 			<span className="acct">@{user.account.acct}</span>
 			<i className={`fa fa-fw ${icon.fa}`} aria-hidden="true" title={icon.info} />
 			<span className="sr-only">{icon.info}</span>
-		</Element>
+		</>
 	);
+
+	if (link) {
+		return (
+			<Link className={className} to={link}>
+				{content}
+			</Link>
+		);
+	} else {
+		return (
+			<div className={className}>
+				{content}
+			</div>
+		);
+	}
 }

web/source/settings/views/moderation/router.tsx

@@ -17,51 +17,45 @@
 	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 { BaseUrlContext, useBaseUrl, useHasPermission } from "../../lib/navigation/util";
 import { Redirect, Route, Router, Switch } from "wouter";
+import { ReportOverview } from "./reports/overview";
+import ReportDetail from "./reports/detail";
+import { ErrorBoundary } from "../../lib/navigation/error";
+import ImportExport from "./domain-permissions/import-export";
+import DomainPermissionsOverview from "./domain-permissions/overview";
+import DomainPermDetail from "./domain-permissions/detail";
 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";
 
 /*
 	EXPORTED COMPONENTS
 */
 
 /**
- * Moderation menu. Reports, accounts,
- * domain permissions import + export.
+ * - /settings/moderation/reports/overview
+ * - /settings/moderation/reports/:reportId
+ * - /settings/moderation/accounts/overview
+ * - /settings/moderation/accounts/pending
+ * - /settings/moderation/accounts/:accountID
+ * - /settings/moderation/domain-permissions/:permType
+ * - /settings/moderation/domain-permissions/:permType/:domain
+ * - /settings/moderation/domain-permissions/import-export
+ * - /settings/moderation/domain-permissions/process
  */
-export function ModerationMenu() {
-	return (
-		<MenuItem
-			name="Moderation"
-			itemUrl="moderation"
-			defaultChild="reports"
-			permissions={["moderator"]}
-		>
-			<ModerationReportsMenu />
-			<ModerationAccountsMenu />
-			<ModerationDomainPermsMenu />
-		</MenuItem>
-	);
-}
-
-/**
- * Moderation router. Reports, accounts,
- * domain permissions import + export.
- */
-export function ModerationRouter() {
+export default function ModerationRouter() {	
 	const parentUrl = useBaseUrl();
 	const thisBase = "/moderation";
 	const absBase = parentUrl + thisBase;
-	
+
+	const permissions = ["moderator"];
+	const moderator = useHasPermission(permissions);
+	if (!moderator) {
+		return null;
+	}
+
 	return (
 		<BaseUrlContext.Provider value={absBase}>
 			<Router base={thisBase}>
@@ -77,73 +71,10 @@ export function ModerationRouter() {
 	INTERNAL COMPONENTS
 */
 
-/*
-	MENUS
-*/
-
-function ModerationReportsMenu() {
-	return (
-		<MenuItem
-			name="Reports"
-			itemUrl="reports"
-			icon="fa-flag"
-		/>
-	);
-}
-
-function ModerationAccountsMenu() {
-	return (
-		<MenuItem
-			name="Accounts"
-			itemUrl="accounts"
-			defaultChild="overview"
-			icon="fa-users"
-		>
-			<MenuItem
-				name="Overview"
-				itemUrl="overview"
-				icon="fa-list"
-			/>
-			<MenuItem
-				name="Pending"
-				itemUrl="pending"
-				icon="fa-question"
-			/>
-		</MenuItem>
-	);
-}
-
-function ModerationDomainPermsMenu() {
-	return (
-		<MenuItem
-			name="Domain Permissions"
-			itemUrl="domain-permissions"
-			defaultChild="blocks"
-			icon="fa-hubzilla"
-		>
-			<MenuItem
-				name="Blocks"
-				itemUrl="blocks"
-				icon="fa-close"
-			/>
-			<MenuItem
-				name="Allows"
-				itemUrl="allows"
-				icon="fa-check"
-			/>
-			<MenuItem
-				name="Import/Export"
-				itemUrl="import-export"
-				icon="fa-floppy-o"
-			/>
-		</MenuItem>
-	);
-}
-
-/*
-	ROUTERS
-*/
-
+/**
+ * - /settings/moderation/reports/overview
+ * - /settings/moderation/reports/:reportId
+ */
 function ModerationReportsRouter() {
 	const parentUrl = useBaseUrl();
 	const thisBase = "/reports";
@@ -152,49 +83,66 @@ function ModerationReportsRouter() {
 	return (
 		<BaseUrlContext.Provider value={absBase}>
 			<Router base={thisBase}>
-				<Switch>
-					<Route path={"/:reportId"} component={ReportDetail} />
-					<Route component={ReportOverview}/>
-				</Switch>
+				<ErrorBoundary>
+					<Switch>
+						<Route path={"/:reportId"} component={ReportDetail} />
+						<Route component={ReportOverview}/>
+					</Switch>
+				</ErrorBoundary>
 			</Router>
 		</BaseUrlContext.Provider>
 	);
 }
 
+/**
+ * - /settings/moderation/accounts/overview
+ * - /settings/moderation/accounts/pending
+ * - /settings/moderation/accounts/:accountID
+ */
 function ModerationAccountsRouter() {
 	const parentUrl = useBaseUrl();
 	const thisBase = "/accounts";
 	const absBase = parentUrl + thisBase;
-	
+
 	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;
-	
+
 	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>
+					<Switch>
+						<Route path="/import-export" component={ImportExport} />
+						<Route path="/process" component={ImportExport} />
+						<Route path="/:permType" component={DomainPermissionsOverview} />
+						<Route path="/:permType/:domain" component={DomainPermDetail} />
+						<Route><Redirect to="/blocks"/></Route>
+					</Switch>
+				</ErrorBoundary>
 			</Router>
 		</BaseUrlContext.Provider>
 	);