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

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