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

   1 import { myAuthRequired } from "@utils/app";
   2 import { capitalizeFirstLetter } from "@utils/helpers";
   3 import { Component, InfernoMouseEvent, linkEvent } from "inferno";
   4 import { EditSite, Tagline } from "lemmy-js-client";
   5 import { I18NextService } from "../../services";
   6 import { Icon, Spinner } from "../common/icon";
   7 import { MarkdownTextArea } from "../common/markdown-textarea";
   8
   9 interface TaglineFormProps {
  10   taglines: Array<Tagline>;
  11   onSaveSite(form: EditSite): void;
  12   loading: boolean;
  13 }
  14
  15 interface TaglineFormState {
  16   taglines: Array<string>;
  17   editingRow?: number;
  18 }
  19
  20 export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
  21   state: TaglineFormState = {
  22     editingRow: undefined,
  23     taglines: this.props.taglines.map(x => x.content),
  24   };
  25   constructor(props: any, context: any) {
  26     super(props, context);
  27   }
  28
  29   render() {
  30     return (
  31       <div className="tagline-form col-12">
  32         <h1 className="h4 mb-4">{I18NextService.i18n.t("taglines")}</h1>
  33         <div className="table-responsive col-12">
  34           <table id="taglines_table" className="table table-sm table-hover">
  35             <thead className="pointer">
  36               <th></th>
  37               <th style="width:121px"></th>
  38             </thead>
  39             <tbody>
  40               {this.state.taglines.map((cv, index) => (
  41                 <tr key={index}>
  42                   <td>
  43                     {this.state.editingRow === index && (
  44                       <MarkdownTextArea
  45                         initialContent={cv}
  46                         onContentChange={s =>
  47                           this.handleTaglineChange(this, index, s)
  48                         }
  49                         hideNavigationWarnings
  50                         allLanguages={[]}
  51                         siteLanguages={[]}
  52                       />
  53                     )}
  54                     {this.state.editingRow !== index && <div>{cv}</div>}
  55                   </td>
  56                   <td className="text-right">
  57                     <button
  58                       className="btn btn-link btn-animate text-muted"
  59                       onClick={linkEvent(
  60                         { i: this, index: index },
  61                         this.handleEditTaglineClick,
  62                       )}
  63                       data-tippy-content={I18NextService.i18n.t("edit")}
  64                       aria-label={I18NextService.i18n.t("edit")}
  65                     >
  66                       <Icon icon="edit" classes="icon-inline" />
  67                     </button>
  68
  69                     <button
  70                       className="btn btn-link btn-animate text-muted"
  71                       onClick={linkEvent(
  72                         { i: this, index: index },
  73                         this.handleDeleteTaglineClick,
  74                       )}
  75                       data-tippy-content={I18NextService.i18n.t("delete")}
  76                       aria-label={I18NextService.i18n.t("delete")}
  77                     >
  78                       <Icon icon="trash" classes="icon-inline text-danger" />
  79                     </button>
  80                   </td>
  81                 </tr>
  82               ))}
  83             </tbody>
  84           </table>
  85           <div className="mb-3 row">
  86             <div className="col-12">
  87               <button
  88                 className="btn btn-sm btn-secondary me-2"
  89                 onClick={linkEvent(this, this.handleAddTaglineClick)}
  90               >
  91                 {I18NextService.i18n.t("add_tagline")}
  92               </button>
  93             </div>
  94           </div>
  95
  96           <div className="mb-3 row">
  97             <div className="col-12">
  98               <button
  99                 onClick={linkEvent(this, this.handleSaveClick)}
 100                 className="btn btn-secondary me-2"
 101                 disabled={this.props.loading}
 102               >
 103                 {this.props.loading ? (
 104                   <Spinner />
 105                 ) : (
 106                   capitalizeFirstLetter(I18NextService.i18n.t("save"))
 107                 )}
 108               </button>
 109             </div>
 110           </div>
 111         </div>
 112       </div>
 113     );
 114   }
 115
 116   handleTaglineChange(i: TaglineForm, index: number, val: string) {
 117     if (i.state.taglines) {
 118       i.setState(prev => ({
 119         ...prev,
 120         taglines: prev.taglines.map((tl, i) => (i === index ? val : tl)),
 121       }));
 122     }
 123   }
 124
 125   handleDeleteTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
 126     event.preventDefault();
 127     d.i.setState(prev => ({
 128       ...prev,
 129       taglines: prev.taglines.filter((_, i) => i !== d.index),
 130       editingRow: undefined,
 131     }));
 132   }
 133
 134   handleEditTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
 135     event.preventDefault();
 136     if (d.i.state.editingRow === d.index) {
 137       d.i.setState({ editingRow: undefined });
 138     } else {
 139       d.i.setState({ editingRow: d.index });
 140     }
 141   }
 142
 143   async handleSaveClick(i: TaglineForm) {
 144     i.props.onSaveSite({
 145       taglines: i.state.taglines,
 146       auth: myAuthRequired(),
 147     });
 148   }
 149
 150   handleAddTaglineClick(
 151     i: TaglineForm,
 152     event: InfernoMouseEvent<HTMLButtonElement>,
 153   ) {
 154     event.preventDefault();
 155     const newTaglines = [...i.state.taglines];
 156     newTaglines.push("");
 157
 158     i.setState({
 159       taglines: newTaglines,
 160       editingRow: newTaglines.length - 1,
 161     });
 162   }
 163 }