1 import { Component, linkEvent } from "inferno";
2 import { GetSiteResponse, UserOperation, wsJsonToRes, wsUserOp } from "lemmy-js-client";
3 import { CreateCustomEmoji, CustomEmojiResponse, DeleteCustomEmoji, DeleteCustomEmojiResponse, EditCustomEmoji } from "lemmy-js-client/dist/interfaces/api/custom_emoji";
4 import { WebSocketService } from "../../services";
5 import { i18n } from "../../i18next";
6 import { customEmojisLookup, isBrowser, myAuth, removeFromEmojiDataModel, setIsoData, toast, updateEmojiDataModel, wsClient, wsSubscribe } from "../../utils";
7 import { EmojiMart } from "../common/emoji-mart";
8 import { HtmlTags } from "../common/html-tags";
9 import { Icon } from "../common/icon";
10 import { Subscription } from "rxjs";
11 import { pictrsUri } from "../../env";
12 import { Paginator } from "../common/paginator";
14 interface EmojiFormState {
15 siteRes: GetSiteResponse;
16 customEmojis: CustomEmojiViewForm[];
21 interface CustomEmojiViewForm {
32 export class EmojiForm extends Component<any, EmojiFormState> {
33 private isoData = setIsoData(this.context);
34 private subscription: Subscription | undefined;
35 private itemsPerPage = 15;
36 private emptyState: EmojiFormState = {
38 siteRes: this.isoData.site_res,
39 customEmojis: this.isoData.site_res.custom_emojis.map((x, index) =>
41 id: x.custom_emoji.id,
42 category: x.custom_emoji.category,
43 shortcode: x.custom_emoji.shortcode,
44 image_url: x.custom_emoji.image_url,
45 alt_text: x.custom_emoji.alt_text,
46 keywords: x.keywords.map(x => x.keyword).join(" "),
48 page: 1 + (Math.floor(index / this.itemsPerPage))
52 state: EmojiFormState;
53 private scrollRef: any = {};
54 constructor(props: any, context: any) {
55 super(props, context);
56 this.state = this.emptyState;
58 this.handlePageChange = this.handlePageChange.bind(this);
59 this.parseMessage = this.parseMessage.bind(this);
60 this.handleEmojiClick = this.handleEmojiClick.bind(this);
61 this.subscription = wsSubscribe(this.parseMessage);
63 get documentTitle(): string {
64 return i18n.t("custom_emojis");
67 componentWillUnmount() {
69 this.subscription?.unsubscribe();
75 <div className="col-12">
77 title={this.documentTitle}
78 path={this.context.router.route.match.url}
80 <h5 className="col-12">{i18n.t("custom_emojis")}</h5>
81 {customEmojisLookup.size > 0 && <div>
82 <EmojiMart onEmojiClick={this.handleEmojiClick} pickerOptions={this.configurePicker()}></EmojiMart>
84 <div className="table-responsive">
87 className="table table-sm table-hover"
89 <thead className="pointer">
91 <th>{i18n.t("column_emoji")}</th>
92 <th className="text-right">{i18n.t("column_shortcode")}</th>
93 <th className="text-right">{i18n.t("column_category")}</th>
94 <th className="text-right">{i18n.t("column_imageurl")}</th>
95 <th className="text-right">{i18n.t("column_alttext")}</th>
96 <th className="text-right d-none d-lg-table-cell">{i18n.t("column_keywords")}</th>
97 <th style="width:121px"></th>
101 {this.state.customEmojis.slice((this.state.page - 1) * this.itemsPerPage, ((this.state.page - 1) * this.itemsPerPage) + this.itemsPerPage)
102 .map((cv, index) => (
103 <tr key={index} ref={e => this.scrollRef[cv.shortcode] = e}>
104 <td style="text-align:center;">
106 htmlFor={index.toString()}
107 className="pointer text-muted small font-weight-bold"
109 {cv.image_url.length > 0 && <img className="icon-emoji-admin" src={cv.image_url} />}
110 {cv.image_url.length == 0 && <span className="btn btn-sm btn-secondary">Upload</span>}
113 name={index.toString()}
114 id={index.toString()}
118 onChange={linkEvent({form: this, index: index},this.handleImageUpload)}
121 <td className="text-right">
124 placeholder="ShortCode"
125 className="form-control"
128 onInput={linkEvent({form: this, index: index},this.handleEmojiShortCodeChange)}
131 <td className="text-right">
134 placeholder="Category"
135 className="form-control"
137 onInput={linkEvent({form: this, index: index},this.handleEmojiCategoryChange)}
140 <td className="text-right">
144 className="form-control"
146 onInput={linkEvent({form: this, index: index, overrideValue: null},this.handleEmojiImageUrlChange)}
149 <td className="text-right">
152 placeholder="Alt Text"
153 className="form-control"
155 onInput={linkEvent({form: this, index: index},this.handleEmojiAltTextChange)}
158 <td className="text-right d-none d-lg-table-cell">
161 placeholder="Keywords"
162 className="form-control"
164 onInput={linkEvent({form: this, index: index},this.handleEmojiKeywordChange)}
170 title={this.getEditTooltip(cv)}>
172 className={(cv.changed ? "text-success " : "text-muted ") + "btn btn-link btn-animate"}
173 onClick={linkEvent({form: this, cv: cv},this.handleEditEmojiClick)}
174 data-tippy-content={i18n.t("save")}
175 aria-label={i18n.t("save")}
176 disabled={this.state.loading || !this.canEdit(cv) || !cv.changed}
180 classes={`icon-inline`}
186 className="btn btn-link btn-animate text-muted"
187 onClick={linkEvent({form: this, index: index, cv:cv},this.handleDeleteEmojiClick)}
188 data-tippy-content={i18n.t("delete")}
189 aria-label={i18n.t("delete")}
190 disabled={this.state.loading}
191 title={i18n.t("delete")}
195 classes={`icon-inline text-danger`}
206 className="btn btn-sm btn-secondary mr-2"
207 onClick={linkEvent(this,this.handleAddEmojiClick)}
209 {i18n.t("add_custom_emoji")}
213 page={this.state.page}
214 onChange={this.handlePageChange}
221 canEdit(cv: CustomEmojiViewForm) {
222 const noEmptyFields = (cv.alt_text.length > 0 && cv.category.length > 0 && cv.image_url.length > 0 && cv.shortcode.length > 0);
223 const noDuplicateShortCodes = this.state.customEmojis.filter(x => x.shortcode == cv.shortcode && x.id != cv.id).length == 0;
224 return noEmptyFields && noDuplicateShortCodes;
227 getEditTooltip(cv: CustomEmojiViewForm) {
228 if (this.canEdit(cv))
229 return i18n.t("save");
231 return i18n.t("custom_emoji_save_validation");
234 handlePageChange(page: number) {
235 this.setState({ page: page });
238 handleEmojiClick(e: any) {
239 const view = customEmojisLookup.get(e.id);
241 const page = this.state.customEmojis.find(x => x.id == view.custom_emoji.id)?.page;
243 this.setState({ page: page });
244 this.scrollRef[view.custom_emoji.shortcode].scrollIntoView()
249 handleEmojiCategoryChange(props: { form: EmojiForm, index: number }, event: any) {
250 let custom_emojis = [...props.form.state.customEmojis];
251 let pagedIndex = ((props.form.state.page - 1) * props.form.itemsPerPage) + props.index;
253 ... props.form.state.customEmojis[pagedIndex],
254 category: event.target.value,
257 custom_emojis[pagedIndex] = item;
258 props.form.setState({ customEmojis: custom_emojis });
261 handleEmojiShortCodeChange(props: { form: EmojiForm, index: number }, event: any) {
262 let custom_emojis = [...props.form.state.customEmojis];
263 let pagedIndex = ((props.form.state.page - 1) * props.form.itemsPerPage) + props.index;
265 ... props.form.state.customEmojis[pagedIndex],
266 shortcode: event.target.value,
269 custom_emojis[pagedIndex] = item;
270 props.form.setState({ customEmojis: custom_emojis });
273 handleEmojiImageUrlChange(props: { form: EmojiForm, index: number, overrideValue: string | null }, event: any) {
274 let custom_emojis = [...props.form.state.customEmojis];
275 let pagedIndex = ((props.form.state.page - 1) * props.form.itemsPerPage) + props.index;
277 ... props.form.state.customEmojis[pagedIndex],
278 image_url: props.overrideValue ?? event.target.value,
281 custom_emojis[pagedIndex] = item;
282 props.form.setState({ customEmojis: custom_emojis });
285 handleEmojiAltTextChange(props: { form: EmojiForm, index: number }, event: any) {
286 let custom_emojis = [...props.form.state.customEmojis];
287 let pagedIndex = ((props.form.state.page - 1) * props.form.itemsPerPage) + props.index;
289 ... props.form.state.customEmojis[pagedIndex],
290 alt_text: event.target.value,
293 custom_emojis[pagedIndex] = item;
294 props.form.setState({ customEmojis: custom_emojis });
297 handleEmojiKeywordChange(props: { form: EmojiForm, index: number }, event: any) {
298 let custom_emojis = [...props.form.state.customEmojis];
299 let pagedIndex = ((props.form.state.page - 1) * props.form.itemsPerPage) + props.index;
301 ... props.form.state.customEmojis[pagedIndex],
302 keywords: event.target.value,
305 custom_emojis[pagedIndex] = item;
306 props.form.setState({ customEmojis: custom_emojis });
309 handleDeleteEmojiClick(props: { form: EmojiForm, index: number, cv: CustomEmojiViewForm }) {
310 let pagedIndex = ((props.form.state.page - 1) * props.form.itemsPerPage) + props.index;
311 if (props.cv.id != 0) {
312 const deleteForm: DeleteCustomEmoji = {
316 WebSocketService.Instance.send(wsClient.deleteCustomEmoji(deleteForm));
319 let custom_emojis = [...props.form.state.customEmojis];
320 custom_emojis.splice(pagedIndex, 1);
321 props.form.setState({ customEmojis: custom_emojis });
325 handleEditEmojiClick(props: { form: EmojiForm, cv: CustomEmojiViewForm }) {
326 const keywords = props.cv.keywords.split(" ").filter(x => x.length > 0) as string[];
327 const uniqueKeywords = Array.from(new Set(keywords));
328 if (props.cv.id != 0) {
329 const editForm: EditCustomEmoji = {
331 category: props.cv.category,
332 image_url: props.cv.image_url,
333 alt_text: props.cv.alt_text,
334 keywords: uniqueKeywords,
337 WebSocketService.Instance.send(wsClient.editCustomEmoji(editForm));
340 const createForm: CreateCustomEmoji = {
341 category: props.cv.category,
342 shortcode: props.cv.shortcode,
343 image_url: props.cv.image_url,
344 alt_text: props.cv.alt_text,
345 keywords: uniqueKeywords,
348 WebSocketService.Instance.send(wsClient.createCustomEmoji(createForm));
352 handleAddEmojiClick(form: EmojiForm, event: any) {
353 event.preventDefault();
354 let custom_emojis = [...form.state.customEmojis];
355 const page = 1 + (Math.floor((form.state.customEmojis.length) / form.itemsPerPage))
356 let item: CustomEmojiViewForm = {
366 custom_emojis.push(item);
367 form.setState({ customEmojis: custom_emojis, page: page });
370 async handleImageUpload(props: { form: EmojiForm, index: number }, event: any) {
371 event.preventDefault();
372 let file = event.target.files[0];
373 const formData = new FormData();
374 formData.append("images[]", file);
376 props.form.setState({ loading: true });
377 let res: any = await fetch(pictrsUri, {
381 let data = await res.json();
382 props.form.setState({ loading: false });
383 if (data.msg != "ok") {
384 toast(JSON.stringify(data), "danger");
387 let hash = data.files[0].file;
388 let url = `${pictrsUri}/${hash}`;
389 props.form.handleEmojiImageUrlChange({form: props.form, index: props.index, overrideValue: url}, event)
393 configurePicker(): any {
395 data: { categories: [], emojis: [], aliases: [] },
401 parseMessage(msg: any) {
402 let op = wsUserOp(msg);
405 toast(i18n.t(msg.error), "danger");
406 this.context.router.history.push("/");
407 this.setState({ loading: false });
410 else if (op == UserOperation.CreateCustomEmoji) {
411 let data = wsJsonToRes<CustomEmojiResponse>(msg);
412 const custom_emoji_view = data.custom_emoji;
413 updateEmojiDataModel(custom_emoji_view)
414 let currentEmojis = this.state.customEmojis;
415 let newEmojiIndex = currentEmojis.findIndex(x => x.shortcode == custom_emoji_view.custom_emoji.shortcode)
416 currentEmojis[newEmojiIndex].id = custom_emoji_view.custom_emoji.id;
417 currentEmojis[newEmojiIndex].changed = false;
418 this.setState({ customEmojis: currentEmojis });
419 toast(i18n.t("saved_emoji"));
420 this.setState({ loading: false });
422 else if (op == UserOperation.EditCustomEmoji) {
423 let data = wsJsonToRes<CustomEmojiResponse>(msg);
424 const custom_emoji_view = data.custom_emoji;
425 updateEmojiDataModel(data.custom_emoji)
426 let currentEmojis = this.state.customEmojis;
427 let newEmojiIndex = currentEmojis.findIndex(x => x.shortcode == custom_emoji_view.custom_emoji.shortcode)
428 currentEmojis[newEmojiIndex].changed = false;
429 this.setState({ customEmojis: currentEmojis });
430 toast(i18n.t("saved_emoji"));
431 this.setState({ loading: false });
433 else if (op == UserOperation.DeleteCustomEmoji) {
434 let data = wsJsonToRes<DeleteCustomEmojiResponse>(msg);
436 removeFromEmojiDataModel(data.id);
437 let custom_emojis = [...this.state.customEmojis.filter(x => x.id != data.id)];
438 this.setState({ customEmojis: custom_emojis });
439 toast(i18n.t("deleted_emoji"));
441 this.setState({ loading: false });