gtsocial-umbx

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

detail.js (4362B)

      1 /*
      2 	GoToSocial
      3 	Copyright (C) GoToSocial Authors admin@gotosocial.org
      4 	SPDX-License-Identifier: AGPL-3.0-or-later
      5 
      6 	This program is free software: you can redistribute it and/or modify
      7 	it under the terms of the GNU Affero General Public License as published by
      8 	the Free Software Foundation, either version 3 of the License, or
      9 	(at your option) any later version.
     10 
     11 	This program is distributed in the hope that it will be useful,
     12 	but WITHOUT ANY WARRANTY; without even the implied warranty of
     13 	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     14 	GNU Affero General Public License for more details.
     15 
     16 	You should have received a copy of the GNU Affero General Public License
     17 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
     18 */
     19 
     20 "use strict";
     21 
     22 const React = require("react");
     23 const { useRoute, Link, Redirect } = require("wouter");
     24 
     25 const query = require("../../../lib/query");
     26 
     27 const { useComboBoxInput, useFileInput, useValue } = require("../../../lib/form");
     28 const { CategorySelect } = require("../category-select");
     29 
     30 const useFormSubmit = require("../../../lib/form/submit");
     31 const { useBaseUrl } = require("../../../lib/navigation/util");
     32 
     33 const FakeToot = require("../../../components/fake-toot");
     34 const FormWithData = require("../../../lib/form/form-with-data");
     35 const Loading = require("../../../components/loading");
     36 const { FileInput } = require("../../../components/form/inputs");
     37 const MutationButton = require("../../../components/form/mutation-button");
     38 const { Error } = require("../../../components/error");
     39 
     40 module.exports = function EmojiDetailRoute({ }) {
     41 	const baseUrl = useBaseUrl();
     42 	let [_match, params] = useRoute(`${baseUrl}/:emojiId`);
     43 	if (params?.emojiId == undefined) {
     44 		return <Redirect to={baseUrl} />;
     45 	} else {
     46 		return (
     47 			<div className="emoji-detail">
     48 				<Link to={baseUrl}><a>&lt; go back</a></Link>
     49 				<FormWithData dataQuery={query.useGetEmojiQuery} queryArg={params.emojiId} DataForm={EmojiDetailForm} />
     50 			</div>
     51 		);
     52 	}
     53 };
     54 
     55 function EmojiDetailForm({ data: emoji }) {
     56 	const baseUrl = useBaseUrl();
     57 	const form = {
     58 		id: useValue("id", emoji.id),
     59 		category: useComboBoxInput("category", { source: emoji }),
     60 		image: useFileInput("image", {
     61 			withPreview: true,
     62 			maxSize: 50 * 1024 // TODO: get from instance api
     63 		})
     64 	};
     65 
     66 	const [modifyEmoji, result] = useFormSubmit(form, query.useEditEmojiMutation());
     67 
     68 	// Automatic submitting of category change
     69 	React.useEffect(() => {
     70 		if (
     71 			form.category.hasChanged() &&
     72 			!form.category.state.open &&
     73 			!form.category.isNew) {
     74 			modifyEmoji();
     75 		}
     76 		/* eslint-disable-next-line react-hooks/exhaustive-deps */
     77 	}, [form.category.hasChanged(), form.category.isNew, form.category.state.open]);
     78 
     79 	const [deleteEmoji, deleteResult] = query.useDeleteEmojiMutation();
     80 
     81 	if (deleteResult.isSuccess) {
     82 		return <Redirect to={baseUrl} />;
     83 	}
     84 
     85 	return (
     86 		<>
     87 			<div className="emoji-header">
     88 				<img src={emoji.url} alt={emoji.shortcode} title={emoji.shortcode} />
     89 				<div>
     90 					<h2>{emoji.shortcode}</h2>
     91 					<MutationButton
     92 						label="Delete"
     93 						type="button"
     94 						onClick={() => deleteEmoji(emoji.id)}
     95 						className="danger"
     96 						showError={false}
     97 						result={deleteResult}
     98 					/>
     99 				</div>
    100 			</div>
    101 
    102 			<form onSubmit={modifyEmoji} className="left-border">
    103 				<h2>Modify this emoji {result.isLoading && <Loading />}</h2>
    104 
    105 				<div className="update-category">
    106 					<CategorySelect
    107 						field={form.category}
    108 					>
    109 						<MutationButton
    110 							name="create-category"
    111 							label="Create"
    112 							result={result}
    113 							showError={false}
    114 							style={{ visibility: (form.category.isNew ? "initial" : "hidden") }}
    115 						/>
    116 					</CategorySelect>
    117 				</div>
    118 
    119 				<div className="update-image">
    120 					<FileInput
    121 						field={form.image}
    122 						label="Image"
    123 						accept="image/png,image/gif"
    124 					/>
    125 
    126 					<MutationButton
    127 						name="image"
    128 						label="Replace image"
    129 						showError={false}
    130 						result={result}
    131 					/>
    132 
    133 					<FakeToot>
    134 						Look at this new custom emoji <img
    135 							className="emoji"
    136 							src={form.image.previewURL ?? emoji.url}
    137 							title={`:${emoji.shortcode}:`}
    138 							alt={emoji.shortcode}
    139 						/> isn&apos;t it cool?
    140 					</FakeToot>
    141 
    142 					{result.error && <Error error={result.error} />}
    143 					{deleteResult.error && <Error error={deleteResult.error} />}
    144 				</div>
    145 			</form>
    146 		</>
    147 	);
    148 }