src/shared/components/private_message/private-message-form.tsx

   1 import { myAuthRequired } from "@utils/app";
   2 import { capitalizeFirstLetter } from "@utils/helpers";
   3 import { Component, InfernoNode } from "inferno";
   4 import { T } from "inferno-i18next-dess";
   5 import {
   6   CreatePrivateMessage,
   7   EditPrivateMessage,
   8   Person,
   9   PrivateMessageView,
  10 } from "lemmy-js-client";
  11 import { relTags } from "../../config";
  12 import { I18NextService } from "../../services";
  13 import { setupTippy } from "../../tippy";
  14 import { Icon } from "../common/icon";
  15 import { MarkdownTextArea } from "../common/markdown-textarea";
  16 import NavigationPrompt from "../common/navigation-prompt";
  17 import { PersonListing } from "../person/person-listing";
  18
  19 interface PrivateMessageFormProps {
  20   recipient: Person;
  21   privateMessageView?: PrivateMessageView; // If a pm is given, that means this is an edit
  22   replyType?: boolean;
  23   onCancel?(): any;
  24   onCreate?(form: CreatePrivateMessage): void;
  25   onEdit?(form: EditPrivateMessage): void;
  26 }
  27
  28 interface PrivateMessageFormState {
  29   content?: string;
  30   loading: boolean;
  31   previewMode: boolean;
  32   submitted: boolean;
  33 }
  34
  35 export class PrivateMessageForm extends Component<
  36   PrivateMessageFormProps,
  37   PrivateMessageFormState
  38 > {
  39   state: PrivateMessageFormState = {
  40     loading: false,
  41     previewMode: false,
  42     content: this.props.privateMessageView
  43       ? this.props.privateMessageView.private_message.content
  44       : undefined,
  45     submitted: false,
  46   };
  47
  48   constructor(props: any, context: any) {
  49     super(props, context);
  50
  51     this.handleContentChange = this.handleContentChange.bind(this);
  52   }
  53
  54   componentDidMount() {
  55     setupTippy();
  56   }
  57
  58   componentWillReceiveProps(
  59     nextProps: Readonly<{ children?: InfernoNode } & PrivateMessageFormProps>
  60   ): void {
  61     if (this.props != nextProps) {
  62       this.setState({ loading: false, content: undefined, previewMode: false });
  63     }
  64   }
  65   // TODO
  66   // <Prompt
  67   //   when={!this.state.loading && this.state.content}
  68   //   message={I18NextService.i18n.t("block_leaving")}
  69   // />
  70
  71   render() {
  72     return (
  73       <form className="private-message-form">
  74         <NavigationPrompt
  75           when={
  76             !this.state.loading && !!this.state.content && !this.state.submitted
  77           }
  78         />
  79         {!this.props.privateMessageView && (
  80           <div className="mb-3 row align-items-baseline">
  81             <label className="col-sm-2 col-form-label">
  82               {capitalizeFirstLetter(I18NextService.i18n.t("to"))}
  83             </label>
  84
  85             <div className="col-sm-10">
  86               <PersonListing person={this.props.recipient} />
  87             </div>
  88           </div>
  89         )}
  90         <div className="alert alert-warning small">
  91           <Icon icon="alert-triangle" classes="icon-inline me-1" />
  92           <T parent="span" i18nKey="private_message_disclaimer">
  93             #
  94             <a
  95               className="alert-link"
  96               rel={relTags}
  97               href="https://element.io/get-started"
  98             >
  99               #
 100             </a>
 101           </T>
 102         </div>
 103         <div className="mb-3 row">
 104           <label className="col-sm-2 col-form-label">
 105             {I18NextService.i18n.t("message")}
 106           </label>
 107           <div className="col-sm-10">
 108             <MarkdownTextArea
 109               onSubmit={() => {
 110                 this.handlePrivateMessageSubmit(this, event);
 111               }}
 112               initialContent={this.state.content}
 113               onContentChange={this.handleContentChange}
 114               allLanguages={[]}
 115               siteLanguages={[]}
 116               hideNavigationWarnings
 117               onReplyCancel={() => this.handleCancel(this)}
 118               replyType={this.props.replyType}
 119               buttonTitle={
 120                 this.props.privateMessageView
 121                   ? capitalizeFirstLetter(I18NextService.i18n.t("save"))
 122                   : capitalizeFirstLetter(I18NextService.i18n.t("send_message"))
 123               }
 124             />
 125           </div>
 126         </div>
 127       </form>
 128     );
 129   }
 130
 131   handlePrivateMessageSubmit(i: PrivateMessageForm, event: any) {
 132     event.preventDefault();
 133     i.setState({ loading: true, submitted: true });
 134     const pm = i.props.privateMessageView;
 135     const auth = myAuthRequired();
 136     const content = i.state.content ?? "";
 137     if (pm) {
 138       i.props.onEdit?.({
 139         private_message_id: pm.private_message.id,
 140         content,
 141         auth,
 142       });
 143     } else {
 144       i.props.onCreate?.({
 145         content,
 146         recipient_id: i.props.recipient.id,
 147         auth,
 148       });
 149     }
 150   }
 151
 152   handleContentChange(val: string) {
 153     this.setState({ content: val });
 154   }
 155
 156   handleCancel(i: PrivateMessageForm) {
 157     i.props.onCancel?.();
 158   }
 159
 160   handlePreviewToggle(i: PrivateMessageForm, event: any) {
 161     event.preventDefault();
 162     i.setState({ previewMode: !i.state.previewMode });
 163   }
 164 }