/* GoToSocial Copyright (C) 2021-2023 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 { CategorySelect } = require("../category-select"); const { useComboBoxInput, useFileInput } = require("../../../components/form"); const query = require("../../../lib/query"); const FakeToot = require("../../../components/fake-toot"); const Loading = require("../../../components/loading"); const base = "/settings/custom-emoji/local"; module.exports = function EmojiDetailRoute() { let [_match, params] = useRoute(`${base}/:emojiId`); if (params?.emojiId == undefined) { return ; } else { return (
< go back
); } }; function EmojiDetailData({emojiId}) { const {currentData: emoji, isLoading, error} = query.useGetEmojiQuery(emojiId); if (error) { return (
{error.status}: {error.data.error}
); } else if (isLoading) { return (
); } else { return ; } } function EmojiDetail({emoji}) { const [modifyEmoji, modifyResult] = query.useEditEmojiMutation(); const [isNewCategory, setIsNewCategory] = React.useState(false); const [categoryState, _resetCategory, { category }] = useComboBoxInput("category", {defaultValue: emoji.category}); const [onFileChange, _resetFile, { image, imageURL, imageInfo }] = useFileInput("image", { withPreview: true, maxSize: 50 * 1024 }); function modifyCategory() { modifyEmoji({id: emoji.id, category: category.trim()}); } function modifyImage() { modifyEmoji({id: emoji.id, image: image}); } React.useEffect(() => { if (category != emoji.category && !categoryState.open && !isNewCategory && category.trim().length > 0) { console.log("updating to", category); modifyEmoji({id: emoji.id, category: category.trim()}); } }, [isNewCategory, category, categoryState.open, emoji.category, emoji.id, modifyEmoji]); return ( <>
{emoji.shortcode}

{emoji.shortcode}

Modify this emoji {modifyResult.isLoading && "(processing..)"}

{modifyResult.error &&
{modifyResult.error.status}: {modifyResult.error.data.error}
}
Image
{imageInfo}
Look at this new custom emoji {emoji.shortcode} isn't it cool?
); } function DeleteButton({id}) { // TODO: confirmation dialog? const [deleteEmoji, deleteResult] = query.useDeleteEmojiMutation(); let text = "Delete"; if (deleteResult.isLoading) { text = "Deleting..."; } if (deleteResult.isSuccess) { return ; } return ( ); }