[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

8 files changed, 28 insertions, 36 deletions

diff --git a/web/source/settings/components/back-button.jsx b/web/source/settings/components/back-button.tsx
index bf9038b2b..bf9038b2b 100644
--- a/web/source/settings/components/back-button.jsx
+++ b/web/source/settings/components/back-button.tsx
diff --git a/web/source/settings/components/combo-box.jsx b/web/source/settings/components/combo-box.tsx
index fc0133583..113e6179d 100644
--- a/web/source/settings/components/combo-box.jsx
+++ b/web/source/settings/components/combo-box.tsx
@@ -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>
 	);
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/web/source/settings/components/error.jsx b/web/source/settings/components/error.tsx
index 3205cd5e3..15c3bccd4 100644
--- a/web/source/settings/components/error.jsx
+++ b/web/source/settings/components/error.tsx
@@ -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 };
\ No newline at end of file
+export { ErrorFallback, Error };
diff --git a/web/source/settings/components/fake-profile.jsx b/web/source/settings/components/fake-profile.tsx
index 6cb8d0187..4a5157378 100644
--- a/web/source/settings/components/fake-profile.jsx
+++ b/web/source/settings/components/fake-profile.tsx
@@ -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>
 	);
-};
\ No newline at end of file
+}
diff --git a/web/source/settings/components/fake-toot.jsx b/web/source/settings/components/fake-toot.tsx
index 08f806008..ad0c387a4 100644
--- a/web/source/settings/components/fake-toot.jsx
+++ b/web/source/settings/components/fake-toot.tsx
@@ -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>
 	);
-};
\ No newline at end of file
+}
diff --git a/web/source/settings/components/languages.jsx b/web/source/settings/components/languages.tsx
index 61c76e03a..7c2986438 100644
--- a/web/source/settings/components/languages.jsx
+++ b/web/source/settings/components/languages.tsx
@@ -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;
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/web/source/settings/components/loading.jsx b/web/source/settings/components/loading.tsx
index c62c72a0a..f7635534f 100644
--- a/web/source/settings/components/loading.jsx
+++ b/web/source/settings/components/loading.tsx
@@ -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" />
 	);
-};
\ No newline at end of file
+}
diff --git a/web/source/settings/components/user-logout-card.jsx b/web/source/settings/components/user-logout-card.tsx
index 9d88642a5..f8eeaf63c 100644
--- a/web/source/settings/components/user-logout-card.jsx
+++ b/web/source/settings/components/user-logout-card.tsx
@@ -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>
 		);
 	}
-};
\ No newline at end of file
+}
\ No newline at end of file