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

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