From 637f188ebec71fe4b0b80bbab4592d4c269d7d93 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Tue, 17 Oct 2023 12:46:06 +0200
Subject: [feature] Allow import/export/creation of domain allows via admin
 panel (#2264)

* it's happening!

* aaa

* fix silly whoopsie

* it's working pa! it's working ma!

* model report parameters

* shuffle some more stuff around

* getting there

* oo hoo

* finish tidying up for now

* aaa

* fix use form submit errors

* peepee poo poo

* aaaaa

* ffff

* they see me typin', they hatin'

* boop

* aaa

* oooo

* typing typing tappa tappa

* almost done typing

* weee

* alright

* push it push it real good doo doo doo doo doo doo

* thingy no worky

* almost done

* mutation modifers not quite right

* hmm

* it works

* view blocks + allows nicely

* it works!

* typia install

* the old linterino

* linter plz
---
 .../settings/components/authorization/index.tsx    |   7 +-
 .../settings/components/authorization/login.tsx    |  15 +-
 web/source/settings/components/check-list.jsx      |  89 ----------
 web/source/settings/components/check-list.tsx      | 113 ++++++++++++
 web/source/settings/components/form/inputs.jsx     | 140 ---------------
 web/source/settings/components/form/inputs.tsx     | 190 +++++++++++++++++++++
 .../settings/components/user-logout-card.jsx       |  14 +-
 7 files changed, 320 insertions(+), 248 deletions(-)
 delete mode 100644 web/source/settings/components/check-list.jsx
 create mode 100644 web/source/settings/components/check-list.tsx
 delete mode 100644 web/source/settings/components/form/inputs.jsx
 create mode 100644 web/source/settings/components/form/inputs.tsx

(limited to 'web/source/settings/components')

diff --git a/web/source/settings/components/authorization/index.tsx b/web/source/settings/components/authorization/index.tsx
index 321bb03eb..22a0d24b7 100644
--- a/web/source/settings/components/authorization/index.tsx
+++ b/web/source/settings/components/authorization/index.tsx
@@ -25,6 +25,7 @@ import React from "react";
 import Login from "./login";
 import Loading from "../loading";
 import { Error } from "../error";
+import { NoArg } from "../../lib/types/query";
 
 export function Authorization({ App }) {
 	const { loginState, expectingRedirect } = store.getState().oauth;
@@ -35,15 +36,15 @@ export function Authorization({ App }) {
 		isSuccess,
 		data: account,
 		error,
-	} = useVerifyCredentialsQuery(null, { skip: skip });
+	} = useVerifyCredentialsQuery(NoArg, { skip: skip });
 
 	let showLogin = true;
-	let content = null;
+	let content: React.JSX.Element | null = null;
 
 	if (isLoading) {
 		showLogin = false;
 
-		let loadingInfo;
+		let loadingInfo = "";
 		if (loginState == "callback") {
 			loadingInfo = "Processing OAUTH callback.";
 		} else if (loginState == "login") {
diff --git a/web/source/settings/components/authorization/login.tsx b/web/source/settings/components/authorization/login.tsx
index 76bfccf43..870e9c343 100644
--- a/web/source/settings/components/authorization/login.tsx
+++ b/web/source/settings/components/authorization/login.tsx
@@ -22,26 +22,21 @@ import React from "react";
 import { useAuthorizeFlowMutation } from "../../lib/query/oauth";
 import { useTextInput, useValue } from "../../lib/form";
 import useFormSubmit from "../../lib/form/submit";
-import { TextInput } from "../form/inputs";
 import MutationButton from "../form/mutation-button";
 import Loading from "../loading";
+import { TextInput } from "../form/inputs";
 
 export default function Login({ }) {
 	const form = {
 		instance: useTextInput("instance", {
 			defaultValue: window.location.origin
 		}),
-		scopes: useValue("scopes", "user admin")
+		scopes: useValue("scopes", "user admin"),
 	};
 
-	const [formSubmit, result] = useFormSubmit(
-		form,
-		useAuthorizeFlowMutation(),
-		{ 
-			changedOnly: false,
-			onFinish: undefined,
-		}
-	);
+	const [formSubmit, result] = useFormSubmit(form, useAuthorizeFlowMutation(), { 
+		changedOnly: false,
+	});
 
 	if (result.isLoading) {
 		return (
diff --git a/web/source/settings/components/check-list.jsx b/web/source/settings/components/check-list.jsx
deleted file mode 100644
index de42a56a5..000000000
--- a/web/source/settings/components/check-list.jsx
+++ /dev/null
@@ -1,89 +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/>.
-*/
-
-const React = require("react");
-
-module.exports = function CheckList({ field, header = "All", EntryComponent, getExtraProps }) {
-	return (
-		<div className="checkbox-list list">
-			<CheckListHeader toggleAll={field.toggleAll}>	{header}</CheckListHeader>
-			<CheckListEntries
-				entries={field.value}
-				updateValue={field.onChange}
-				EntryComponent={EntryComponent}
-				getExtraProps={getExtraProps}
-			/>
-		</div>
-	);
-};
-
-function CheckListHeader({ toggleAll, children }) {
-	return (
-		<label className="header entry">
-			<input
-				ref={toggleAll.ref}
-				type="checkbox"
-				onChange={toggleAll.onChange}
-			/> {children}
-		</label>
-	);
-}
-
-const CheckListEntries = React.memo(
-	function CheckListEntries({ entries, updateValue, EntryComponent, getExtraProps }) {
-		const deferredEntries = React.useDeferredValue(entries);
-
-		return Object.values(deferredEntries).map((entry) => (
-			<CheckListEntry
-				key={entry.key}
-				entry={entry}
-				updateValue={updateValue}
-				EntryComponent={EntryComponent}
-				getExtraProps={getExtraProps}
-			/>
-		));
-	}
-);
-
-/*
-	React.memo is a performance optimization that only re-renders a CheckListEntry
-	when it's props actually change, instead of every time anything
-	in the list (CheckListEntries) updates
-*/
-const CheckListEntry = React.memo(
-	function CheckListEntry({ entry, updateValue, getExtraProps, EntryComponent }) {
-		const onChange = React.useCallback(
-			(value) => updateValue(entry.key, value),
-			[updateValue, entry.key]
-		);
-
-		const extraProps = React.useMemo(() => getExtraProps?.(entry), [getExtraProps, entry]);
-
-		return (
-			<label className="entry">
-				<input
-					type="checkbox"
-					onChange={(e) => onChange({ checked: e.target.checked })}
-					checked={entry.checked}
-				/>
-				<EntryComponent entry={entry} onChange={onChange} extraProps={extraProps} />
-			</label>
-		);
-	}
-);
\ No newline at end of file
diff --git a/web/source/settings/components/check-list.tsx b/web/source/settings/components/check-list.tsx
new file mode 100644
index 000000000..aec57e758
--- /dev/null
+++ b/web/source/settings/components/check-list.tsx
@@ -0,0 +1,113 @@
+/*
+	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 { memo, useDeferredValue, useCallback, useMemo } from "react";
+import { Checkable, ChecklistInputHook } from "../lib/form/types";
+
+interface CheckListProps {
+	field: ChecklistInputHook;
+	header: string | React.JSX.Element;
+	EntryComponent: React.FunctionComponent;
+	getExtraProps;
+}
+
+export default function CheckList({ field, header = "All", EntryComponent, getExtraProps }: CheckListProps) {
+	return (
+		<div className="checkbox-list list">
+			<CheckListHeader toggleAll={field.toggleAll}>	{header}</CheckListHeader>
+			<CheckListEntries
+				entries={field.value ?? {}}
+				updateValue={field.onChange}
+				EntryComponent={EntryComponent}
+				getExtraProps={getExtraProps}
+			/>
+		</div>
+	);
+}
+
+function CheckListHeader({ toggleAll, children }) {
+	return (
+		<label className="header entry">
+			<input
+				ref={toggleAll.ref}
+				type="checkbox"
+				onChange={toggleAll.onChange}
+			/> {children}
+		</label>
+	);
+}
+
+interface CheckListEntriesProps {
+	entries: { [_: string]: Checkable },
+	updateValue,
+	EntryComponent,
+	getExtraProps,
+}
+
+const CheckListEntries = memo(
+	function CheckListEntries({ entries, updateValue, EntryComponent, getExtraProps }: CheckListEntriesProps) {
+		const deferredEntries = useDeferredValue(entries);
+
+		return Object.values(deferredEntries).map((entry) => (
+			<CheckListEntry
+				key={entry.key}
+				entry={entry}
+				updateValue={updateValue}
+				EntryComponent={EntryComponent}
+				getExtraProps={getExtraProps}
+			/>
+		));
+	}
+);
+
+interface CheckListEntryProps {
+	entry: Checkable,
+	updateValue,
+	getExtraProps,
+	EntryComponent,
+}
+
+/*
+	React.memo is a performance optimization that only re-renders a CheckListEntry
+	when it's props actually change, instead of every time anything
+	in the list (CheckListEntries) updates
+*/
+const CheckListEntry = memo(
+	function CheckListEntry({ entry, updateValue, getExtraProps, EntryComponent }: CheckListEntryProps) {
+		const onChange = useCallback(
+			(value) => updateValue(entry.key, value),
+			[updateValue, entry.key]
+		);
+
+		const extraProps = useMemo(() => getExtraProps?.(entry), [getExtraProps, entry]);
+
+		return (
+			<label className="entry">
+				<input
+					type="checkbox"
+					onChange={(e) => onChange({ checked: e.target.checked })}
+					checked={entry.checked}
+				/>
+				<EntryComponent entry={entry} onChange={onChange} extraProps={extraProps} />
+			</label>
+		);
+	}
+);
\ No newline at end of file
diff --git a/web/source/settings/components/form/inputs.jsx b/web/source/settings/components/form/inputs.jsx
deleted file mode 100644
index f7a6beeda..000000000
--- a/web/source/settings/components/form/inputs.jsx
+++ /dev/null
@@ -1,140 +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/>.
-*/
-
-const React = require("react");
-
-function TextInput({ label, field, ...inputProps }) {
-	const { onChange, value, ref } = field;
-
-	return (
-		<div className={`form-field text${field.valid ? "" : " invalid"}`}>
-			<label>
-				{label}
-				<input
-					type="text"
-					{...{ onChange, value, ref }}
-					{...inputProps}
-				/>
-			</label>
-		</div>
-	);
-}
-
-function TextArea({ label, field, ...inputProps }) {
-	const { onChange, value, ref } = field;
-
-	return (
-		<div className="form-field textarea">
-			<label>
-				{label}
-				<textarea
-					type="text"
-					{...{ onChange, value, ref }}
-					{...inputProps}
-				/>
-			</label>
-		</div>
-	);
-}
-
-function FileInput({ label, field, ...inputProps }) {
-	const { onChange, ref, infoComponent } = field;
-
-	return (
-		<div className="form-field file">
-			<label>
-				<div className="label">{label}</div>
-				<div className="file-input button">Browse</div>
-				{infoComponent}
-				{/* <a onClick={removeFile("header")}>remove</a> */}
-				<input
-					type="file"
-					className="hidden"
-					{...{ onChange, ref }}
-					{...inputProps}
-				/>
-			</label>
-		</div>
-	);
-}
-
-function Checkbox({ label, field, ...inputProps }) {
-	const { onChange, value } = field;
-
-	return (
-		<div className="form-field checkbox">
-			<label>
-				<input
-					type="checkbox"
-					checked={value}
-					onChange={onChange}
-					{...inputProps}
-				/> {label}
-			</label>
-		</div>
-	);
-}
-
-function Select({ label, field, options, children, ...inputProps }) {
-	const { onChange, value, ref } = field;
-
-	return (
-		<div className="form-field select">
-			<label>
-				{label} {children}
-				<select
-					{...{ onChange, value, ref }}
-					{...inputProps}
-				>
-					{options}
-				</select>
-			</label>
-		</div>
-	);
-}
-
-function RadioGroup({ field, label, ...inputProps }) {
-	return (
-		<div className="form-field radio">
-			{Object.entries(field.options).map(([value, radioLabel]) => (
-				<label key={value}>
-					<input
-						type="radio"
-						name={field.name}
-						value={value}
-						checked={field.value == value}
-						onChange={field.onChange}
-						{...inputProps}
-					/>
-					{radioLabel}
-				</label>
-			))}
-			{label}
-		</div>
-	);
-}
-
-module.exports = {
-	TextInput,
-	TextArea,
-	FileInput,
-	Checkbox,
-	Select,
-	RadioGroup
-};
\ No newline at end of file
diff --git a/web/source/settings/components/form/inputs.tsx b/web/source/settings/components/form/inputs.tsx
new file mode 100644
index 000000000..1e0d8eaab
--- /dev/null
+++ b/web/source/settings/components/form/inputs.tsx
@@ -0,0 +1,190 @@
+/*
+	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 type {
+	ReactNode,
+	RefObject,
+} from "react";
+
+import type {
+	FileFormInputHook,
+	RadioFormInputHook,
+	TextFormInputHook,
+} from "../../lib/form/types";
+
+export interface TextInputProps extends React.DetailedHTMLProps<
+	React.InputHTMLAttributes<HTMLInputElement>,
+	HTMLInputElement
+> {
+	label?: string;
+	field: TextFormInputHook;
+}
+
+export function TextInput({label, field, ...props}: TextInputProps) {
+	const { onChange, value, ref } = field;
+
+	return (
+		<div className={`form-field text${field.valid ? "" : " invalid"}`}>
+			<label>
+				{label}
+				<input
+					onChange={onChange}
+					value={value}
+					ref={ref as RefObject<HTMLInputElement>}
+					{...props}
+				/>
+			</label>
+		</div>
+	);
+}
+
+export interface TextAreaProps extends React.DetailedHTMLProps<
+	React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+	HTMLTextAreaElement
+> {
+	label?: string;
+	field: TextFormInputHook;
+}
+
+export function TextArea({label, field, ...props}: TextAreaProps) {
+	const { onChange, value, ref } = field;
+
+	return (
+		<div className="form-field textarea">
+			<label>
+				{label}
+				<textarea
+					onChange={onChange}
+					value={value}
+					ref={ref as RefObject<HTMLTextAreaElement>}
+					{...props}
+				/>
+			</label>
+		</div>
+	);
+}
+
+export interface FileInputProps extends React.DetailedHTMLProps<
+	React.InputHTMLAttributes<HTMLInputElement>,
+	HTMLInputElement
+> {
+	label?: string;
+	field: FileFormInputHook;
+}
+
+export function FileInput({ label, field, ...props }: FileInputProps) {
+	const { onChange, ref, infoComponent } = field;
+
+	return (
+		<div className="form-field file">
+			<label>
+				<div className="label">{label}</div>
+				<div className="file-input button">Browse</div>
+				{infoComponent}
+				{/* <a onClick={removeFile("header")}>remove</a> */}
+				<input
+					type="file"
+					className="hidden"
+					onChange={onChange}
+					ref={ref ? ref as RefObject<HTMLInputElement> : undefined}
+					{...props}
+				/>
+			</label>
+		</div>
+	);
+}
+
+export function Checkbox({ label, field, ...inputProps }) {
+	const { onChange, value } = field;
+
+	return (
+		<div className="form-field checkbox">
+			<label>
+				<input
+					type="checkbox"
+					checked={value}
+					onChange={onChange}
+					{...inputProps}
+				/> {label}
+			</label>
+		</div>
+	);
+}
+
+export interface SelectProps extends React.DetailedHTMLProps<
+	React.SelectHTMLAttributes<HTMLSelectElement>,
+	HTMLSelectElement
+> {
+	label?: string;
+	field: TextFormInputHook;
+	children?: ReactNode;
+	options: React.JSX.Element;
+}
+
+export function Select({ label, field, children, options, ...props }: SelectProps) {
+	const { onChange, value, ref } = field;
+
+	return (
+		<div className="form-field select">
+			<label>
+				{label}
+				{children}
+				<select
+					onChange={onChange}
+					value={value}
+					ref={ref as RefObject<HTMLSelectElement>}
+					{...props}
+				>
+					{options}
+				</select>
+			</label>
+		</div>
+	);
+}
+
+export interface RadioGroupProps extends React.DetailedHTMLProps<
+	React.InputHTMLAttributes<HTMLInputElement>,
+	HTMLInputElement
+> {
+	label?: string;
+	field: RadioFormInputHook;
+}
+
+export function RadioGroup({ label, field, ...props }: RadioGroupProps) {
+	return (
+		<div className="form-field radio">
+			{Object.entries(field.options).map(([value, radioLabel]) => (
+				<label key={value}>
+					<input
+						type="radio"
+						name={field.name}
+						value={value}
+						checked={field.value == value}
+						onChange={field.onChange}
+						{...props}
+					/>
+					{radioLabel}
+				</label>
+			))}
+			{label}
+		</div>
+	);
+}
diff --git a/web/source/settings/components/user-logout-card.jsx b/web/source/settings/components/user-logout-card.jsx
index de77f0485..9d88642a5 100644
--- a/web/source/settings/components/user-logout-card.jsx
+++ b/web/source/settings/components/user-logout-card.jsx
@@ -18,15 +18,17 @@
 */
 
 const React = require("react");
-
-const query = require("../lib/query");
-
 const Loading = require("./loading");
+const {
+	useVerifyCredentialsQuery,
+	useLogoutMutation,
+} = require("../lib/query/oauth");
+const { useInstanceV1Query } = require("../lib/query");
 
 module.exports = function UserLogoutCard() {
-	const { data: profile, isLoading } = query.useVerifyCredentialsQuery();
-	const { data: instance } = query.useInstanceQuery();
-	const [logoutQuery] = query.useLogoutMutation();
+	const { data: profile, isLoading } = useVerifyCredentialsQuery();
+	const { data: instance } = useInstanceV1Query();
+	const [logoutQuery] = useLogoutMutation();
 
 	if (isLoading) {
 		return <Loading />;
-- 
cgit v1.2.3