From eb25739c340b2c541e37422c2df1ef7b5c4de0f5 Mon Sep 17 00:00:00 2001 From: f0x52 Date: Tue, 8 Nov 2022 17:51:44 +0100 Subject: [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/admin/emoji/detail.js | 86 +++++++++++++++++ web/source/settings/admin/emoji/index.js | 40 ++++++++ web/source/settings/admin/emoji/new-emoji.js | 133 +++++++++++++++++++++++++++ web/source/settings/admin/emoji/overview.js | 99 ++++++++++++++++++++ 4 files changed, 358 insertions(+) create mode 100644 web/source/settings/admin/emoji/detail.js create mode 100644 web/source/settings/admin/emoji/index.js create mode 100644 web/source/settings/admin/emoji/new-emoji.js create mode 100644 web/source/settings/admin/emoji/overview.js (limited to 'web/source/settings/admin/emoji') diff --git a/web/source/settings/admin/emoji/detail.js b/web/source/settings/admin/emoji/detail.js new file mode 100644 index 000000000..cc0f8e73c --- /dev/null +++ b/web/source/settings/admin/emoji/detail.js @@ -0,0 +1,86 @@ +/* + 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 React = require("react"); + +const { useRoute, Link, Redirect } = require("wouter"); + +const BackButton = require("../../components/back-button"); + +const query = require("../../lib/query"); + +const base = "/settings/admin/custom-emoji"; + +/* We wrap the component to generate formFields with a setter depending on the domain + if formFields() is used inside the same component that is re-rendered with their state, + inputs get re-created on every change, causing them to lose focus, and bad performance +*/ +module.exports = function EmojiDetailWrapped() { + let [_match, {emojiId}] = useRoute(`${base}/:emojiId`); + const {currentData: emoji, isLoading, error} = query.useGetEmojiQuery(emojiId); + + return (<> + {error &&
{error.status}: {error.data.error}
} + {isLoading + ? "Loading..." + : + } + ); +}; + +function EmojiDetail({emoji}) { + if (emoji == undefined) { + return (<> + + go back + + ); + } + + return ( +
+

Custom Emoji: {emoji.shortcode}

+ +

+ Editing custom emoji isn't implemented yet.
+ View implementation progress. +

+ {emoji.shortcode} +
+ ); +} + +function DeleteButton({id}) { + // TODO: confirmation dialog? + const [deleteEmoji, deleteResult] = query.useDeleteEmojiMutation(); + + let text = "Delete this emoji"; + if (deleteResult.isLoading) { + text = "processing..."; + } + + if (deleteResult.isSuccess) { + return ; + } + + return ( + + ); +} \ No newline at end of file diff --git a/web/source/settings/admin/emoji/index.js b/web/source/settings/admin/emoji/index.js new file mode 100644 index 000000000..0fcda8264 --- /dev/null +++ b/web/source/settings/admin/emoji/index.js @@ -0,0 +1,40 @@ +/* + 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 React = require("react"); +const {Switch, Route} = require("wouter"); + +const EmojiOverview = require("./overview"); +const EmojiDetail = require("./detail"); + +const base = "/settings/admin/custom-emoji"; + +module.exports = function CustomEmoji() { + return ( + <> + + + + + + + + ); +}; diff --git a/web/source/settings/admin/emoji/new-emoji.js b/web/source/settings/admin/emoji/new-emoji.js new file mode 100644 index 000000000..e5bc8893d --- /dev/null +++ b/web/source/settings/admin/emoji/new-emoji.js @@ -0,0 +1,133 @@ +/* + 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 +} = require("../../components/form"); + +const query = require("../../lib/query"); + +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" + : ""; + } + }); + + React.useEffect(() => { + if (shortcode.length == 0) { + if (image != undefined) { + let [name, _ext] = image.name.split("."); + setShortcode(name); + } + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [image]); + + function uploadEmoji(e) { + if (e) { + e.preventDefault(); + } + + Promise.try(() => { + return addEmoji({ + image, + shortcode + }); + }).then(() => { + resetFile(); + resetShortcode(); + }); + } + + 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} + +
+ +
+ + +
+ + + +
+ ); +}; \ No newline at end of file diff --git a/web/source/settings/admin/emoji/overview.js b/web/source/settings/admin/emoji/overview.js new file mode 100644 index 000000000..028276da2 --- /dev/null +++ b/web/source/settings/admin/emoji/overview.js @@ -0,0 +1,99 @@ +/* + 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 React = require("react"); +const {Link} = require("wouter"); +const defaultValue = require('default-value'); + +const NewEmojiForm = require("./new-emoji"); + +const query = require("../../lib/query"); + +const base = "/settings/admin/custom-emoji"; + +module.exports = function EmojiOverview() { + const { + data: emoji, + isLoading, + error + } = query.useGetAllEmojiQuery({filter: "domain:local"}); + + return ( + <> +

Custom Emoji

+ {error && +
{error}
+ } + {isLoading + ? "Loading..." + : <> + + + + } + + ); +}; + +function EmojiList({emoji}) { + const byCategory = React.useMemo(() => { + const categories = {}; + + emoji.forEach((emoji) => { + let cat = defaultValue(emoji.category, "Unsorted"); + categories[cat] = defaultValue(categories[cat], []); + categories[cat].push(emoji); + }); + + return categories; + }, [emoji]); + + return ( +
+

Overview

+
+ {emoji.length == 0 && "No local emoji yet"} + {Object.entries(byCategory).map(([category, entries]) => { + return ; + })} +
+
+ ); +} + +function EmojiCategory({category, entries}) { + return ( +
+ {category} +
+ {entries.map((e) => { + return ( + + {/* */} + + {e.shortcode} + + + ); + })} +
+
+ ); +} \ No newline at end of file -- cgit v1.3