[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

4 files changed, 74 insertions, 48 deletions

diff --git a/web/source/settings/views/user/menu.tsx b/web/source/settings/views/user/menu.tsx
new file mode 100644
index 000000000..578bd8ae0
--- /dev/null
+++ b/web/source/settings/views/user/menu.tsx
@@ -0,0 +1,52 @@
+/*
+	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";
+
+/**
+ * - /settings/user/profile
+ * - /settings/user/settings
+ * - /settings/user/migration
+ */
+export default function UserMenu() {	
+	return (
+		<MenuItem
+			name="User"
+			itemUrl="user"
+			defaultChild="profile"
+		>
+			<MenuItem
+				name="Profile"
+				itemUrl="profile"
+				icon="fa-user"
+			/>
+			<MenuItem
+				name="Settings"
+				itemUrl="settings"
+				icon="fa-cogs"
+			/>
+			<MenuItem
+				name="Migration"
+				itemUrl="migration"
+				icon="fa-exchange"
+			/>
+		</MenuItem>
+	);
+}
diff --git a/web/source/settings/views/user/profile.tsx b/web/source/settings/views/user/profile.tsx
index 08cd74bda..c1735259e 100644
--- a/web/source/settings/views/user/profile.tsx
+++ b/web/source/settings/views/user/profile.tsx
@@ -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 (
diff --git a/web/source/settings/views/user/routes.tsx b/web/source/settings/views/user/router.tsx
index 76ac50bc2..e763c0c2b 100644
--- a/web/source/settings/views/user/routes.tsx
+++ b/web/source/settings/views/user/router.tsx
@@ -17,49 +17,20 @@
 	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 { Redirect, Route, Router, Switch } from "wouter";
+import { ErrorBoundary } from "../../lib/navigation/error";
 import UserProfile from "./profile";
-import UserSettings from "./settings";
 import UserMigration from "./migration";
-import { Redirect, Route, Router, Switch } from "wouter";
+import UserSettings from "./settings";
 
 /**
- * 
- * Basic user menu. Profile + accounts 
- * settings, post settings, migration.
+ * - /settings/user/profile
+ * - /settings/user/settings
+ * - /settings/user/migration
  */
-export function UserMenu() {	
-	return (
-		<MenuItem
-			name="User"
-			itemUrl="user"
-			defaultChild="profile"
-		>
-			{/* Profile */}
-			<MenuItem
-				name="Profile"
-				itemUrl="profile"
-				icon="fa-user"
-			/>
-			{/* Settings */}
-			<MenuItem
-				name="Settings"
-				itemUrl="settings"
-				icon="fa-cogs"
-			/>
-			{/* Migration */}
-			<MenuItem
-				name="Migration"
-				itemUrl="migration"
-				icon="fa-exchange"
-			/>
-		</MenuItem>
-	);
-}
-
-export function UserRouter() {
+export default function UserRouter() {
 	const baseUrl = useBaseUrl();
 	const thisBase = "/user";
 	const absBase = baseUrl + thisBase;
@@ -67,13 +38,14 @@ export function UserRouter() {
 	return (
 		<BaseUrlContext.Provider value={absBase}>
 			<Router base={thisBase}>
-				<Switch>
-					<Route path="/profile" component={UserProfile} />
-					<Route path="/settings" component={UserSettings} />
-					<Route path="/migration" component={UserMigration} />
-					{/* Fallback component */}
-					<Route><Redirect to="/profile" /></Route>
-				</Switch>
+				<ErrorBoundary>
+					<Switch>
+						<Route path="/profile" component={UserProfile} />
+						<Route path="/settings" component={UserSettings} />
+						<Route path="/migration" component={UserMigration} />
+						<Route><Redirect to="/profile" /></Route>
+					</Switch>
+				</ErrorBoundary>
 			</Router>
 		</BaseUrlContext.Provider>
 	);
diff --git a/web/source/settings/views/user/settings.tsx b/web/source/settings/views/user/settings.tsx
index 2827cc53f..cbd973706 100644
--- a/web/source/settings/views/user/settings.tsx
+++ b/web/source/settings/views/user/settings.tsx
@@ -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}>