src/shared/components/home/emojis-form.tsx

   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";
  13
  14 interface EmojiFormState {
  15     siteRes: GetSiteResponse;
  16     customEmojis: CustomEmojiViewForm[];
  17     loading: boolean;
  18     page: number;
  19 }
  20
  21 interface CustomEmojiViewForm {
  22     id: number;
  23     category: string;
  24     shortcode: string;
  25     image_url: string;
  26     alt_text: string;
  27     keywords: string;
  28     changed: boolean;
  29     page: number;
  30 }
  31
  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 = {
  37         loading: false,
  38         siteRes: this.isoData.site_res,
  39         customEmojis: this.isoData.site_res.custom_emojis.map((x, index) =>
  40         ({
  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(" "),
  47             changed: false,
  48             page: 1 + (Math.floor(index / this.itemsPerPage))
  49         })),
  50         page: 1
  51     };
  52     state: EmojiFormState;
  53     private scrollRef: any = {};
  54     constructor(props: any, context: any) {
  55         super(props, context);
  56         this.state = this.emptyState;
  57
  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);
  62     }
  63     get documentTitle(): string {
  64         return i18n.t("custom_emojis");
  65     }
  66
  67     componentWillUnmount() {
  68         if (isBrowser()) {
  69             this.subscription?.unsubscribe();
  70         }
  71     }
  72
  73     render() {
  74         return (
  75             <div className="col-12">
  76                 <HtmlTags
  77                     title={this.documentTitle}
  78                     path={this.context.router.route.match.url}
  79                 />
  80                 <h5 className="col-12">{i18n.t("custom_emojis")}</h5>
  81                 {customEmojisLookup.size > 0 && <div>
  82                     <EmojiMart onEmojiClick={this.handleEmojiClick} pickerOptions={this.configurePicker()}></EmojiMart>
  83                 </div>}
  84                 <div className="table-responsive">
  85                     <table
  86                         id="emojis_table"
  87                         className="table table-sm table-hover"
  88                     >
  89                         <thead className="pointer">
  90                             <tr>
  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 d-lg-table-cell d-none">{i18n.t("column_imageurl")}</th>
  95                                 <th className="text-right">{i18n.t("column_alttext")}</th>
  96                                 <th className="text-right d-lg-table-cell">{i18n.t("column_keywords")}</th>
  97                                 <th style="width:121px"></th>
  98                             </tr>
  99                         </thead>
 100                         <tbody>
 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;">
 105                                             <label
 106                                                 htmlFor={index.toString()}
 107                                                 className="pointer text-muted small font-weight-bold"
 108                                             >
 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>}
 111                                             </label>
 112                                             <input
 113                                                 name={index.toString()}
 114                                                 id={index.toString()}
 115                                                 type="file"
 116                                                 accept="image/*"
 117                                                 className="d-none"
 118                                                 onChange={linkEvent({form: this, index: index},this.handleImageUpload)}
 119                                             />
 120                                         </td>
 121                                         <td className="text-right">
 122                                             <input
 123                                                 type="text"
 124                                                 placeholder="ShortCode"
 125                                                 className="form-control"
 126                                                 disabled={cv.id > 0}
 127                                                 value={cv.shortcode}
 128                                                 onInput={linkEvent({form: this, index: index},this.handleEmojiShortCodeChange)}
 129                                             />
 130                                         </td>
 131                                         <td className="text-right">
 132                                             <input
 133                                                 type="text"
 134                                                 placeholder="Category"
 135                                                 className="form-control"
 136                                                 value={cv.category}
 137                                                 onInput={linkEvent({form: this, index: index},this.handleEmojiCategoryChange)}
 138                                             />
 139                                         </td>
 140                                         <td className="text-right d-lg-table-cell d-none">
 141                                             <input
 142                                                 type="text"
 143                                                 placeholder="Url"
 144                                                 className="form-control"
 145                                                 value={cv.image_url}
 146                                                 onInput={linkEvent({form: this, index: index, overrideValue: null},this.handleEmojiImageUrlChange)}
 147                                             />
 148                                         </td>
 149                                         <td className="text-right">
 150                                             <input
 151                                                 type="text"
 152                                                 placeholder="Alt Text"
 153                                                 className="form-control"
 154                                                 value={cv.alt_text}
 155                                                 onInput={linkEvent({form: this, index: index},this.handleEmojiAltTextChange)}
 156                                             />
 157                                         </td>
 158                                         <td className="text-right d-lg-table-cell">
 159                                             <input
 160                                                 type="text"
 161                                                 placeholder="Keywords"
 162                                                 className="form-control"
 163                                                 value={cv.keywords}
 164                                                 onInput={linkEvent({form: this, index: index},this.handleEmojiKeywordChange)}
 165                                             />
 166                                         </td>
 167                                         <td>
 168                                             <div>
 169                                                 <span
 170                                                     title={this.getEditTooltip(cv)}>
 171                                                     <button
 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}
 177                                                     >
 178                                                         {/* <Icon
 179                                                             icon="edit"
 180                                                             classes={`icon-inline`}
 181                                                         /> */}
 182                                                         Save
 183                                                     </button>
 184                                                 </span>
 185                                                 <button
 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")}
 192                                                 >
 193                                                     <Icon
 194                                                         icon="trash"
 195                                                         classes={`icon-inline text-danger`}
 196                                                     />
 197                                                 </button>
 198                                             </div>
 199                                         </td>
 200                                     </tr>
 201                                 ))}
 202                         </tbody>
 203                     </table>
 204                     <br />
 205                     <button
 206                         className="btn btn-sm btn-secondary mr-2"
 207                         onClick={linkEvent(this,this.handleAddEmojiClick)}
 208                     >
 209                         {i18n.t("add_custom_emoji")}
 210                     </button>
 211
 212                     <Paginator
 213                         page={this.state.page}
 214                         onChange={this.handlePageChange}
 215                     />
 216                 </div>
 217             </div>
 218         );
 219     }
 220
 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;
 225     }
 226
 227     getEditTooltip(cv: CustomEmojiViewForm) {
 228         if (this.canEdit(cv))
 229             return i18n.t("save");
 230         else
 231             return i18n.t("custom_emoji_save_validation");
 232     }
 233
 234     handlePageChange(page: number) {
 235         this.setState({ page: page });
 236     }
 237
 238     handleEmojiClick(e: any) {
 239         const view = customEmojisLookup.get(e.id);
 240         if (view) {
 241             const page = this.state.customEmojis.find(x => x.id == view.custom_emoji.id)?.page;
 242             if (page) {
 243                 this.setState({ page: page });
 244                 this.scrollRef[view.custom_emoji.shortcode].scrollIntoView()
 245             }
 246         }
 247     }
 248
 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;
 252         let item = {
 253             ... props.form.state.customEmojis[pagedIndex],
 254             category: event.target.value,
 255             changed: true,
 256         }
 257         custom_emojis[pagedIndex] = item;
 258         props.form.setState({ customEmojis: custom_emojis });
 259     }
 260
 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;
 264         let item = {
 265             ... props.form.state.customEmojis[pagedIndex],
 266             shortcode: event.target.value,
 267             changed: true,
 268         }
 269         custom_emojis[pagedIndex] = item;
 270         props.form.setState({ customEmojis: custom_emojis });
 271     }
 272
 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;
 276         let item = {
 277             ... props.form.state.customEmojis[pagedIndex],
 278             image_url: props.overrideValue ?? event.target.value,
 279             changed: true,
 280         }
 281         custom_emojis[pagedIndex] = item;
 282         props.form.setState({ customEmojis: custom_emojis });
 283     }
 284
 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;
 288         let item = {
 289             ... props.form.state.customEmojis[pagedIndex],
 290             alt_text: event.target.value,
 291             changed: true,
 292         }
 293         custom_emojis[pagedIndex] = item;
 294         props.form.setState({ customEmojis: custom_emojis });
 295     }
 296
 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;
 300         let item = {
 301             ... props.form.state.customEmojis[pagedIndex],
 302             keywords: event.target.value,
 303             changed: true,
 304         }
 305         custom_emojis[pagedIndex] = item;
 306         props.form.setState({ customEmojis: custom_emojis });
 307     }
 308
 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 = {
 313                 id: props.cv.id,
 314                 auth: myAuth() ?? ""
 315             };
 316             WebSocketService.Instance.send(wsClient.deleteCustomEmoji(deleteForm));
 317         }
 318         else {
 319             let custom_emojis = [...props.form.state.customEmojis];
 320             custom_emojis.splice(pagedIndex, 1);
 321             props.form.setState({ customEmojis: custom_emojis });
 322         }
 323     }
 324
 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 = {
 330                 id: props.cv.id,
 331                 category: props.cv.category,
 332                 image_url: props.cv.image_url,
 333                 alt_text: props.cv.alt_text,
 334                 keywords: uniqueKeywords,
 335                 auth: myAuth() ?? ""
 336             };
 337             WebSocketService.Instance.send(wsClient.editCustomEmoji(editForm));
 338         }
 339         else {
 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,
 346                 auth: myAuth() ?? ""
 347             };
 348             WebSocketService.Instance.send(wsClient.createCustomEmoji(createForm));
 349         }
 350     }
 351
 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 = {
 357             id: 0,
 358             shortcode: "",
 359             alt_text: "",
 360             category: "",
 361             image_url: "",
 362             keywords: "",
 363             changed: true,
 364             page: page
 365         }
 366         custom_emojis.push(item);
 367         form.setState({ customEmojis: custom_emojis, page: page });
 368     }
 369
 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);
 375
 376         props.form.setState({ loading: true });
 377         let res: any = await fetch(pictrsUri, {
 378             method: "POST",
 379             body: formData,
 380         });
 381         let data = await res.json();
 382         props.form.setState({ loading: false });
 383         if (data.msg != "ok") {
 384             toast(JSON.stringify(data), "danger");
 385         }
 386         else {
 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)
 390         }
 391     }
 392
 393     configurePicker(): any {
 394         return {
 395             data: { categories: [], emojis: [], aliases: [] },
 396             maxFrequentRows: 0,
 397             dynamicWidth: true,
 398         };
 399     }
 400
 401     parseMessage(msg: any) {
 402         let op = wsUserOp(msg);
 403         console.log(msg);
 404         if (msg.error) {
 405             toast(i18n.t(msg.error), "danger");
 406             this.context.router.history.push("/");
 407             this.setState({ loading: false });
 408             return;
 409         }
 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 });
 421         }
 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 });
 432         }
 433         else if (op == UserOperation.DeleteCustomEmoji) {
 434             let data = wsJsonToRes<DeleteCustomEmojiResponse>(msg);
 435             if (data.success) {
 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"));
 440             }
 441             this.setState({ loading: false });
 442         }
 443     }
 444 }
 445