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