[frontend] Custom Emoji Deletion (#994)

* re-add eslint

* fix oauth url getting too long

* actually attach single emoji get and delete routes

* basic emoji details + deletion using rtk query

* refactor emoji upload to rtk query

* clean up old redux api+reducers for custom emoji

* fix validation order

* refactor custom emoji form fields

* remove unused requires

* cleanup, fix most eslint errors

* more small eslint fixes

* fix max emoji size

* tiny bit of function documentation

web/source/settings/components/error.jsx

@@ -18,7 +18,6 @@
 
 "use strict";
 
-const Promise = require("bluebird");
 const React = require("react");
 
 module.exports = function ErrorFallback({error, resetErrorBoundary}) {

web/source/settings/components/form-fields.jsx

@@ -119,7 +119,7 @@ module.exports = {
 				field = (
 					<>
 						<label htmlFor={id} className="file-input button">Browse</label>
-						<span>
+						<span className="form-info">
 							{file ? file.name : "no file selected"} {size}
 						</span>
 						{/* <a onClick={removeFile("header")}>remove</a> */}

web/source/settings/components/form/file.jsx

@@ -0,0 +1,78 @@
+/*
+	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 prettierBytes = require("prettier-bytes");
+
+module.exports = function useFileInput({name, _Name}, {
+	withPreview,
+	maxSize,
+	initialInfo = "no file selected"
+}) {
+	const [file, setFile] = React.useState();
+	const [imageURL, setImageURL] = React.useState();
+	const [info, setInfo] = React.useState();
+
+	function onChange(e) {
+		let file = e.target.files[0];
+		setFile(file);
+
+		URL.revokeObjectURL(imageURL);
+
+		if (file != undefined) {
+			if (withPreview) {
+				setImageURL(URL.createObjectURL(file));
+			}
+	
+			let size = prettierBytes(file.size);
+			if (maxSize && file.size > maxSize) {
+				size = <span className="error-text">{size}</span>;
+			}
+
+			setInfo(<>
+				{file.name} ({size})
+			</>);
+		} else {
+			setInfo();
+		}
+	}
+
+	function reset() {
+		URL.revokeObjectURL(imageURL);
+		setImageURL();
+		setFile();
+		setInfo();
+	}
+
+	return [
+		onChange,
+		reset,
+		{
+			[name]: file,
+			[`${name}URL`]: imageURL,
+			[`${name}Info`]: <span className="form-info">
+				{info
+					? info
+					: initialInfo
+				}
+			</span>
+		}
+	];
+};

web/source/settings/components/form/index.js

@@ -0,0 +1,36 @@
+/*
+	 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";
+
+function capitalizeFirst(str) {
+	return str.slice(0,1).toUpperCase()+str.slice(1);
+}
+
+function makeHook(func) {
+	return (name, ...args) => func({
+		name,
+		Name: capitalizeFirst(name)
+	},
+	...args);
+}
+
+module.exports = {
+	useTextInput: makeHook(require("./text")),
+	useFileInput: makeHook(require("./file"))
+};

web/source/settings/components/form/text.jsx

@@ -0,0 +1,56 @@
+/*
+	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");
+
+module.exports = function useTextInput({name, Name}, {validator} = {}) {
+	const [text, setText] = React.useState("");
+	const textRef = React.useRef(null);
+
+	function onChange(e) {
+		let input = e.target.value;
+		setText(input);
+
+		if (validator) {
+			validator(input);
+		}
+	}
+
+	function reset() {
+		setText("");
+	}
+
+	React.useEffect(() => {
+		if (validator) {
+			textRef.current.setCustomValidity(validator(text));
+			textRef.current.reportValidity();
+		}
+	}, [text, textRef, validator]);
+
+	return [
+		onChange,
+		reset,
+		{
+			[name]: text,
+			[`${name}Ref`]: textRef,
+			[`set${Name}`]: setText
+		}
+	];
+};

web/source/settings/components/mutation-button.jsx

@@ -0,0 +1,42 @@
+/*
+	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");
+
+module.exports = function MutateButton({text, result}) {
+	let buttonText = text;
+
+	if (result.isLoading) {
+		buttonText = "Processing...";
+	}
+
+	return (<div>
+		{result.error && 
+			<section className="error">{result.error.status}: {result.error.data.error}</section>
+		}
+		<input
+			className="button"
+			type="submit"
+			disabled={result.isLoading}
+			value={buttonText}
+		/>
+	</div>
+	);
+};