[frogend] Settings refactor (#1318)

* yakshave new form field structure * fully refactor user profile settings form * use rtk query api for profile settings * refactor user post settings * refactor password change form * refactor admin settings * FormWithData structure for user forms * admin actions refactor * whitespace * fix user settings data prop * remove superfluous logging * cleanup old code * refactor federation/suspend (overview, detail) * mostly abstracted (emoji) checkbox list * refactor parse-from-toot * refactor custom-emoji, progress on federation bulk * loading icon styling to prevent big spinny * refactor federation import-export interface * cleanup old files * [chore] Update/add license headers for 2023 * redux fixes * text-field exports * appease the linter * refactor authentication with RTK Query * fix login/logout state transition weirdness * fixes/cleanup * small linter-related fixes * add eslint license header check, fix existing files * remove old code, clarify comment * clarify suspend on subdomains * collapse if/else * fa-fw width info comment
superseriousbusiness · Jan 18, 2023 · 9b139b6 · 9b139b6
1 parent 974ec80
commit 9b139b6
Show file tree

Hide file tree

Showing 69 changed files with 3,120 additions and 2,654 deletions.
diff --git a/web/source/.eslintrc.js b/web/source/.eslintrc.js
@@ -1,5 +1,27 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
+
+	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/>.
+*/
+
 "use strict";
 
 module.exports = {
-	"extends": ["@joepie91/eslint-config/react"]
+	"extends": ["@joepie91/eslint-config/react"],
+	"plugins": ["license-header"],
+	"rules": {
+		"license-header/header": ["error", ".license-header.js"]
+	}
 };
diff --git a/...urce/settings/redux/reducers/temporary.js → web/source/.license-header.js b/...urce/settings/redux/reducers/temporary.js → web/source/.license-header.js
@@ -15,18 +15,3 @@
 	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/>.
 */
-
-"use strict";
-
-const {createSlice} = require("@reduxjs/toolkit");
-
-module.exports = createSlice({
-	name: "temporary",
-	initialState: {
-	},
-	reducers: {
-		setStatus: function(state, {payload}) {
-			state.status = payload;
-		}
-	}
-});
diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css
@@ -47,7 +47,13 @@ $blue3: #89caff; /* hover/selected accent to $blue2, can be used with $gray1 (7.
 $error1: #860000; /* Error border/foreground text, can be used with $error2 (5.0), $white1 (10), $white2 (5.1) */
 $error2: #ff9796; /* Error background text, can be used with $error1 (5.0), $gray1 (6.6), $gray2 (5.3), $gray3 (4.8) */
 $error3: #dd2c2c; /* Error button background text, can be used with $white1 (4.51) */
-$error-link: #185F8C; /* Error link text, can be used with $error2 (5.54) */
+$error-link: #01318C; /* Error link text, can be used with $error2 (5.56) */
+
+$green1: #94E749; /* Green for positive/confirmation, similar contrast (luminance) as $blue2 */
+
+$info-fg: $gray1;
+$info-bg: #b3ddff;
+$info-link: $error-link;
 
 $fg: $white1;
 $bg: $gray1;
@@ -92,6 +98,7 @@ $avatar-border: $orange2;
 $input-bg: $gray4;
 $input-disabled-bg: $gray2;
 $input-border: $blue1;
+$input-error-border: $error3;
 $input-focus-border: $blue3;
 
 $settings-nav-bg: $bg-accent;
@@ -107,5 +114,6 @@ $settings-nav-bg-active: $gray2;
 $error-fg: $error1;
 $error-bg: $error2;
 
-$settings-entry-bg: $gray3;
+$settings-entry-bg: $gray2;
+$settings-entry-alternate-bg: $gray3;
 $settings-entry-hover-bg: $gray4;
diff --git a/web/source/css/base.css b/web/source/css/base.css
@@ -311,12 +311,16 @@ input, select, textarea, .input {
 	font-size: 1rem;
 	padding: 0.3rem;
 
-	&:focus {
+	&:focus, &:active {
 		border-color: $input-focus-border;
 	}
 
+	&:invalid {
+		border-color: $input-error-border;
+	}
+
 	&:disabled {
-		background: $input-disabled-bg;
+		background: transparent;
 	}
 }
 

diff --git a/web/source/index.js b/web/source/index.js
@@ -32,7 +32,7 @@ const prodCfg = {
 			global: true,
 			exts: ".js"
 		}],
-		["@browserify/envify", {global: true}]
+		["@browserify/envify", { global: true }]
 	]
 };
 
@@ -66,6 +66,7 @@ skulk({
 			],
 		},
 		settings: {
+			debug: false,
 			entryFile: "settings",
 			outputFile: "settings.js",
 			prodCfg: prodCfg,

diff --git a/web/source/package.json b/web/source/package.json
@@ -6,15 +6,14 @@
   "author": "f0x",
   "license": "AGPL-3.0",
   "scripts": {
-    "lint": "eslint .",
+    "lint": "eslint . --ext .js,.jsx",
     "build": "node index.js",
     "dev": "NODE_ENV=development node index.js"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.6",
     "ariakit": "^2.0.0-next.41",
     "bluebird": "^3.7.2",
-    "dotty": "^0.1.2",
     "is-valid-domain": "^0.1.6",
     "js-file-download": "^0.4.12",
     "langs": "^2.0.0",
@@ -44,6 +43,7 @@
     "babelify": "^10.0.0",
     "css-extract": "^2.0.0",
     "eslint": "^8.26.0",
+    "eslint-plugin-license-header": "^0.6.0",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
     "factor-bundle": "^2.5.0",

diff --git a/web/source/settings/admin/actions.js b/web/source/settings/admin/actions.js
@@ -19,42 +19,43 @@
 "use strict";
 
 const React = require("react");
-const Redux = require("react-redux");
 
-const Submit = require("../components/submit");
+const query = require("../lib/query");
 
-const api = require("../lib/api");
-const submit = require("../lib/submit");
+const { useTextInput } = require("../lib/form");
+const { TextInput } = require("../components/form/inputs");
 
-module.exports = function AdminActionPanel() {
-	const dispatch = Redux.useDispatch();
+const MutationButton = require("../components/form/mutation-button");
 
-	const [days, setDays] = React.useState(30);
+module.exports = function AdminActionPanel() {
+	const daysField = useTextInput("days", { defaultValue: 30 });
 
-	const [errorMsg, setError] = React.useState("");
-	const [statusMsg, setStatus] = React.useState("");
+	const [mediaCleanup, mediaCleanupResult] = query.useMediaCleanupMutation();
 
-	const removeMedia = submit(
-		() => dispatch(api.admin.mediaCleanup(days)),
-		{setStatus, setError}
-	);
+	function submitMediaCleanup(e) {
+		e.preventDefault();
+		mediaCleanup(daysField.value);
+	}
 
 	return (
 		<>
 			<h1>Admin Actions</h1>
-			<div>
+			<form onSubmit={submitMediaCleanup}>
 				<h2>Media cleanup</h2>
 				<p>
 					Clean up remote media older than the specified number of days.
 					If the remote instance is still online they will be refetched when needed.
 					Also cleans up unused headers and avatars from the media cache.
 				</p>
-				<div>
-					<label htmlFor="days">Days: </label>
-					<input id="days" type="number" value={days} onChange={(e) => setDays(e.target.value)}/>
-				</div>
-				<Submit onClick={removeMedia} label="Remove media" errorMsg={errorMsg} statusMsg={statusMsg} />
-			</div>
+				<TextInput
+					field={daysField}
+					label="Days"
+					type="number"
+					min="0"
+					placeholder="30"
+				/>
+				<MutationButton label="Remove old media" result={mediaCleanupResult} />
+			</form>
 		</>
 	);
 };
diff --git a/web/source/settings/admin/emoji/category-select.jsx b/web/source/settings/admin/emoji/category-select.jsx
@@ -1,19 +1,19 @@
 /*
-	 GoToSocial
-	 Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
+	GoToSocial
+	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
 
-	 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 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.
+	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/>.
+	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/>.
 */
 
 "use strict";
@@ -36,13 +36,15 @@ function useEmojiByCategory(emoji) {
 	), [emoji]);
 }
 
-function CategorySelect({value, categoryState, setIsNew=() => {}, children}) {
+function CategorySelect({ field, children }) {
+	const { value, setIsNew } = field;
+
 	const {
 		data: emoji = [],
 		isLoading,
 		isSuccess,
 		error
-	} = query.useGetAllEmojiQuery({filter: "domain:local"});
+	} = query.useGetAllEmojiQuery({ filter: "domain:local" });
 
 	const emojiByCategory = useEmojiByCategory(emoji);
 
@@ -52,7 +54,7 @@ function CategorySelect({value, categoryState, setIsNew=() => {}, children}) {
 	const categoryItems = React.useMemo(() => {
 		return syncpipe(emojiByCategory, [
 			(_) => Object.keys(_),            // just emoji category names
-			(_) => matchSorter(_, value, {threshold: matchSorter.rankings.NO_MATCH}),  // sorted by complex algorithm
+			(_) => matchSorter(_, value, { threshold: matchSorter.rankings.NO_MATCH }),  // sorted by complex algorithm
 			(_) => _.map((categoryName) => [  // map to input value, and selectable element with icon
 				categoryName,
 				<>
@@ -67,24 +69,24 @@ function CategorySelect({value, categoryState, setIsNew=() => {}, children}) {
 		if (value != undefined && isSuccess && value.trim().length > 0) {
 			setIsNew(!categories.has(value.trim()));
 		}
-	}, [categories, value, setIsNew, isSuccess]);
+	}, [categories, value, isSuccess, setIsNew]);
 
 	if (error) { // fall back to plain text input, but this would almost certainly have caused a bigger error message elsewhere
 		return (
 			<>
-				<input type="text" placeholder="e.g., reactions" onChange={(e) => {categoryState.value = e.target.value;}}/>;
+				<input type="text" placeholder="e.g., reactions" onChange={(e) => { field.value = e.target.value; }} />;
 			</>
 		);
 	} else if (isLoading) {
-		return <input type="text" value="Loading categories..." disabled={true}/>;
+		return <input type="text" value="Loading categories..." disabled={true} />;
 	}
 
 	return (
 		<ComboBox
-			state={categoryState}
+			field={field}
 			items={categoryItems}
 			label="Category"
-			placeHolder="e.g., reactions"
+			placeholder="e.g., reactions"
 			children={children}
 		/>
 	);