From fac0e28afbbd27adfe3f88a6144c52046d71e9e6 Mon Sep 17 00:00:00 2001
From: f0x <f0x@cthu.lu>
Date: Tue, 13 Sep 2022 22:47:23 +0200
Subject: [PATCH] refactor/cleanup forms

---
 .../settings-panel/components/form-fields.jsx | 12 ++++-
 web/source/settings-panel/lib/form-fields.js  | 50 -------------------
 web/source/settings-panel/user/profile.js     |  2 -
 web/source/settings-panel/user/security.js    | 26 ----------
 web/source/settings-panel/user/settings.js    | 50 +++++++++----------
 5 files changed, 35 insertions(+), 105 deletions(-)
 delete mode 100644 web/source/settings-panel/lib/form-fields.js
 delete mode 100644 web/source/settings-panel/user/security.js

diff --git a/web/source/settings-panel/components/form-fields.jsx b/web/source/settings-panel/components/form-fields.jsx
index a3b19bc17..30f209f13 100644
--- a/web/source/settings-panel/components/form-fields.jsx
+++ b/web/source/settings-panel/components/form-fields.jsx
@@ -71,7 +71,7 @@ function get(state, id) {
 
 module.exports = {
 	formFields: function formFields(setter, selector) {
-		function FormField({type, id, name, className="", placeHolder="", fileType="", children=null}) {
+		function FormField({type, id, name, className="", placeHolder="", fileType="", children=null, options={}}) {
 			const dispatch = Redux.useDispatch();
 			let state = Redux.useSelector(selector);
 			let {
@@ -88,6 +88,12 @@ module.exports = {
 				field = <textarea type="text" id={id} value={get(state, id)} placeholder={placeHolder} className={className} onChange={onTextChange(id)}/>;
 			} else if (type == "checkbox") {
 				field = <input type="checkbox" id={id} checked={get(state, id)} className={className} onChange={onCheckChange(id)}/>;
+			} else if (type == "select") {
+				field = (
+					<select id={id} checked={get(state, id)} className={className} onChange={onTextChange(id)}>
+						{options}
+					</select>
+				);
 			} else if (type == "file") {
 				defaultLabel = false;
 				let file = get(state, `${id}File`);
@@ -128,6 +134,10 @@ module.exports = {
 				return <FormField type="checkbox" {...props} />;
 			},
 	
+			Select: function(props) {
+				return <FormField type="select" {...props} />;
+			},
+	
 			File: function(props) {
 				return <FormField type="file" {...props} />;
 			},
diff --git a/web/source/settings-panel/lib/form-fields.js b/web/source/settings-panel/lib/form-fields.js
deleted file mode 100644
index dfdd93086..000000000
--- a/web/source/settings-panel/lib/form-fields.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) 2021-2022 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";
-
-const d = require("dotty");
-
-module.exports = function(dispatch, setter, obj) {
-	return {
-		onTextChange: function (key) {
-			return function (e) {
-				dispatch(setter([key, e.target.value]));
-			};
-		},
-	
-		onCheckChange: function (key) {
-			return function (e) {
-				dispatch(setter([key, e.target.checked]));
-			};
-		},
-	
-		onFileChange: function (key) {
-			return function (e) {
-				let old = d.get(obj, key);
-				if (old != undefined) {
-					URL.revokeObjectURL(old); // no error revoking a non-Object URL as provided by instance
-				}
-				let file = e.target.files[0];
-				let objectURL = URL.createObjectURL(file);
-				dispatch(setter([key, objectURL]));
-				dispatch(setter([`${key}File`, file]));
-			};
-		}
-	};
-};
diff --git a/web/source/settings-panel/user/profile.js b/web/source/settings-panel/user/profile.js
index 05a1249c5..e06d3cde1 100644
--- a/web/source/settings-panel/user/profile.js
+++ b/web/source/settings-panel/user/profile.js
@@ -43,8 +43,6 @@ module.exports = function UserProfile() {
 
 	const allowCustomCSS = instance.configuration.accounts.allow_custom_css;
 
-	const { onTextChange, onCheckChange, onFileChange } = formFields(dispatch, user.setProfileVal, account);
-
 	const [errorMsg, setError] = React.useState("");
 	const [statusMsg, setStatus] = React.useState("");
 
diff --git a/web/source/settings-panel/user/security.js b/web/source/settings-panel/user/security.js
deleted file mode 100644
index 0d9fe63c3..000000000
--- a/web/source/settings-panel/user/security.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) 2021-2022 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";
-
-const React = require("react");
-const Promise = require("bluebird");
-const Redux = require("react-redux");
-
-const Submit = require("../../lib/submit");
-const api = require("../../lib");
diff --git a/web/source/settings-panel/user/settings.js b/web/source/settings-panel/user/settings.js
index ac023254e..48a8ff241 100644
--- a/web/source/settings-panel/user/settings.js
+++ b/web/source/settings-panel/user/settings.js
@@ -23,17 +23,18 @@ const React = require("react");
 const Redux = require("react-redux");
 
 const api = require("../lib/api");
-const formFields = require("../lib/form-fields");
 const user = require("../redux/reducers/user").actions;
 
 const Languages = require("../components/languages");
 const Submit = require("../components/submit");
 
+const {
+	Checkbox,
+	Select,
+} = require("../components/form-fields").formFields(user.setProfileVal, (state) => state.user.profile);
+
 module.exports = function UserSettings() {
 	const dispatch = Redux.useDispatch();
-	const account = Redux.useSelector(state => state.user.settings);
-
-	const { onTextChange, onCheckChange } = formFields(dispatch, user.setSettingsVal, account);
 
 	const [errorMsg, setError] = React.useState("");
 	const [statusMsg, setStatus] = React.useState("");
@@ -54,42 +55,39 @@ module.exports = function UserSettings() {
 	return (
 		<div className="user-settings">
 			<h1>Post settings</h1>
-			<div className="labelselect">
-				<label htmlFor="language">Default post language</label>
-				<select id="language" autoComplete="language" value={account.source.language.toUpperCase()} onChange={onTextChange("source.language")}>
-					<Languages />
-				</select>
-			</div>
-			<div className="labelselect">
-				<label htmlFor="privacy">Default post privacy</label>
-				<select id="privacy" value={account.source.privacy} onChange={onTextChange("source.privacy")}>
+			<Select id="language" name="Default post language">
+				<Languages/>
+			</Select>
+			<Select id="privacy" name="Default post privacy" options={
+				<>
 					<option value="private">Private / followers-only)</option>
 					<option value="unlisted">Unlisted</option>
 					<option value="public">Public</option>
-				</select>
+				</>
+			}>
 				<a href="https://docs.gotosocial.org/en/latest/user_guide/posts/#privacy-settings" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about post privacy settings (opens in a new tab)</a>
-			</div>
-			<div className="labelselect">
-				<label htmlFor="format">Default post format</label>
-				<select id="format" value={account.source.format} onChange={onTextChange("source.format")}>
+			</Select>
+			<Select id="format" name="Default post format" options={
+				<>
 					<option value="plain">Plain (default)</option>
 					<option value="markdown">Markdown</option>
-				</select>
+				</>
+			}>
 				<a href="https://docs.gotosocial.org/en/latest/user_guide/posts/#input-types" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about post format settings (opens in a new tab)</a>
-			</div>				
-			<div className="labelcheckbox">
-				<label htmlFor="sensitive">Mark my posts as sensitive by default</label>
-				<input id="sensitive" type="checkbox" checked={account.source.sensitive} onChange={onCheckChange("source.sensitive")}/>
-			</div>
-			<Submit onClick={submit} label="Save post settings" errorMsg={errorMsg} statusMsg={statusMsg}/>
+			</Select>
+			<Checkbox
+				id="sensitive"
+				name="Mark my posts as sensitive by default"
+			/>
 
+			<Submit onClick={submit} label="Save post settings" errorMsg={errorMsg} statusMsg={statusMsg}/>
 			<hr/>
 			<PasswordChange/>
 		</div>
 	);
 };
 
-function PasswordChange({oauth}) {
+function PasswordChange() {
 	const dispatch = Redux.useDispatch();
 
 	const [errorMsg, setError] = React.useState("");