[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/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>
 	);
-};
+}

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 };
+export { ErrorFallback, Error };

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>
 	);
-};
+}

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>
 	);
-};
+}

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;
-};
+}

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" />
 	);
-};
+}

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>
 		);
 	}
-};
+}