/* 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 . */ "use strict"; const Promise = require('bluebird'); const React = require("react"); const FakeToot = require("../../components/fake-toot"); const MutateButton = require("../../components/mutation-button"); const { useTextInput, useFileInput, useComboBoxInput } = require("../../components/form"); const query = require("../../lib/query"); const { CategorySelect } = require('./category-select'); module.exports = function NewEmojiForm({ emoji }) { const emojiCodes = React.useMemo(() => { return new Set(emoji.map((e) => e.shortcode)); }, [emoji]); const [addEmoji, result] = query.useAddEmojiMutation(); const [onFileChange, resetFile, { image, imageURL, imageInfo }] = useFileInput("image", { withPreview: true, maxSize: 50 * 1024 }); const [onShortcodeChange, resetShortcode, { shortcode, setShortcode, shortcodeRef }] = useTextInput("shortcode", { validator: function validateShortcode(code) { return emojiCodes.has(code) ? "Shortcode already in use" : ""; } }); const [categoryState, resetCategory, { category }] = useComboBoxInput("category"); React.useEffect(() => { if (shortcode.length == 0) { if (image != undefined) { let [name, _ext] = image.name.split("."); setShortcode(name); } } // we explicitly don't want to add 'shortcode' as a dependency here // because we only want this to update to the filename if the field is empty // at the moment the file is selected, not some time after when the field is emptied // eslint-disable-next-line react-hooks/exhaustive-deps }, [image]); function uploadEmoji(e) { if (e) { e.preventDefault(); } Promise.try(() => { return addEmoji({ image, shortcode, category }); }).then(() => { resetFile(); resetShortcode(); resetCategory(); }); } let emojiOrShortcode = `:${shortcode}:`; if (imageURL != undefined) { emojiOrShortcode = {shortcode}; } return (

Add new custom emoji

Look at this new custom emoji {emojiOrShortcode} isn't it cool?
{imageInfo}
); };