refactor custom emoji form fields

web/source/settings/admin/emoji/overview.js

@@ -18,14 +18,11 @@
 
 "use strict";
 
-const Promise = require("bluebird");
 const React = require("react");
 const {Link} = require("wouter");
 const defaultValue = require('default-value');
-const prettierBytes = require("prettier-bytes");
 
-const FakeToot = require("../../components/fake-toot");
-const MutateButton = require("../../components/mutation-button");
+const NewEmojiForm = require("./new-emoji");
 
 const query = require("../../lib/query");
 
@@ -48,7 +45,7 @@ module.exports = function EmojiOverview() {
 				? "Loading..."
 				: <>
 					<EmojiList emoji={emoji}/>
-					<NewEmoji emoji={emoji}/>
+					<NewEmojiForm emoji={emoji}/>
 				</>
 			}
 		</>
@@ -99,160 +96,4 @@ function EmojiCategory({category, entries}) {
 			</div>
 		</div>
 	);
-}
-
-function useFileInput({withPreview, maxSize}) {
-	const [file, setFile] = React.useState();
-	const [imageURL, setImageURL] = React.useState();
-	const [info, setInfo] = React.useState("no file selected");
-
-	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("no file selected");
-		}
-	}
-
-	function reset() {
-		setFile();
-		URL.revokeObjectURL(imageURL);
-		setInfo("no file selected");
-	}
-
-	return [
-		onChange,
-		reset,
-		{
-			file,
-			imageURL,
-			info: <span>{info}</span>,
-		}
-	];
-}
-
-// TODO: change form field code, maybe look into redux-final-form or similar
-// or evaluate if we even need to put most of this in the store
-function NewEmoji({emoji}) {
-	const emojiCodes = React.useMemo(() => {
-		return new Set(emoji.map((e) => e.shortcode));
-	}, [emoji]);
-	const [addEmoji, result] = query.useAddEmojiMutation();
-	const [onFileChange, resetFile, {file, imageURL, info}] = useFileInput({
-		withPreview: true,
-		maxSize: 50 * 1000
-	});
-
-	const [shortcode, setShortcode] = React.useState("");
-	const shortcodeRef = React.useRef(null);
-
-	function onShortChange(e) {
-		let input = e.target.value;
-		setShortcode(input);
-	}
-
-	React.useEffect(() => {
-		if (emojiCodes.has(shortcode)) {
-			shortcodeRef.current.setCustomValidity("Shortcode already in use");
-		} else {
-			shortcodeRef.current.setCustomValidity("");
-		}
-		shortcodeRef.current.reportValidity();
-	}, [shortcode, shortcodeRef, emojiCodes]);
-
-	React.useEffect(() => {
-		if (shortcode.length == 0) {
-			if (file != undefined) {
-				let [name, _ext] = file.name.split(".");
-				setShortcode(name);
-			}
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [file]);
-
-	function uploadEmoji(e) {
-		if (e) {
-			e.preventDefault();
-		}
-
-		Promise.try(() => {
-			return addEmoji({
-				image: file,
-				shortcode
-			});
-		}).then(() => {
-			resetFile();
-			setShortcode("");
-		});
-	}
-
-	let emojiOrShortcode = `:${shortcode}:`;
-
-	if (imageURL != undefined) {
-		emojiOrShortcode = <img
-			className="emoji"
-			src={imageURL}
-			title={`:${shortcode}:`}
-			alt={shortcode}
-		/>;
-	}
-
-	return (
-		<div>
-			<h2>Add new custom emoji</h2>
-
-			<FakeToot>
-				Look at this new custom emoji {emojiOrShortcode} isn&apos;t it cool?
-			</FakeToot>
-
-			<form onSubmit={uploadEmoji} className="form-flex">
-				<div className="form-field file">
-					<label className="file-input button" htmlFor="image">
-						Browse
-					</label>
-					{info}
-					<input
-						className="hidden"
-						type="file"
-						id="image"
-						name="Image"
-						accept="image/png,image/gif"
-						onChange={onFileChange}
-					/>
-				</div>
-
-				<div className="form-field text">
-					<label htmlFor="shortcode">
-						Shortcode, must be unique among the instance's local emoji
-					</label>
-					<input
-						type="text"
-						id="shortcode"
-						name="Shortcode"
-						ref={shortcodeRef}
-						onChange={onShortChange}
-						value={shortcode}
-					/>
-				</div>
-				
-				<MutateButton text="Upload emoji" result={result}/>
-			</form>
-		</div>
-	);
 }