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 { Prompt } from "inferno-router";
   6 import {
   7   CreatePrivateMessage,
   8   EditPrivateMessage,
   9   Person,
  10   PrivateMessageView,
  11 } from "lemmy-js-client";
  12 import { relTags } from "../../config";
  13 import { I18NextService } from "../../services";
  14 import { setupTippy } from "../../tippy";
  15 import { Icon } from "../common/icon";
  16 import { MarkdownTextArea } from "../common/markdown-textarea";
  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
  66   render() {
  67     return (
  68       <form className="private-message-form">
  69         <Prompt
  70           message={I18NextService.i18n.t("block_leaving")}
  71           when={
  72             !this.state.loading && !!this.state.content && !this.state.submitted
  73           }
  74         />
  75         {!this.props.privateMessageView && (
  76           <div className="mb-3 row align-items-baseline">
  77             <label className="col-sm-2 col-form-label">
  78               {capitalizeFirstLetter(I18NextService.i18n.t("to"))}
  79             </label>
  80
  81             <div className="col-sm-10">
  82               <PersonListing person={this.props.recipient} />
  83             </div>
  84           </div>
  85         )}
  86         <div className="alert alert-warning small">
  87           <Icon icon="alert-triangle" classes="icon-inline me-1" />
  88           <T parent="span" i18nKey="private_message_disclaimer">
  89             #
  90             <a
  91               className="alert-link"
  92               rel={relTags}
  93               href="https://element.io/get-started"
  94             >
  95               #
  96             </a>
  97           </T>
  98         </div>
  99         <div className="mb-3 row">
 100           <label className="col-sm-2 col-form-label">
 101             {I18NextService.i18n.t("message")}
 102           </label>
 103           <div className="col-sm-10">
 104             <MarkdownTextArea
 105               onSubmit={() => {
 106                 this.handlePrivateMessageSubmit(this, event);
 107               }}
 108               initialContent={this.state.content}
 109               onContentChange={this.handleContentChange}
 110               allLanguages={[]}
 111               siteLanguages={[]}
 112               hideNavigationWarnings
 113               onReplyCancel={() => this.handleCancel(this)}
 114               replyType={this.props.replyType}
 115               buttonTitle={
 116                 this.props.privateMessageView
 117                   ? capitalizeFirstLetter(I18NextService.i18n.t("save"))
 118                   : capitalizeFirstLetter(I18NextService.i18n.t("send_message"))
 119               }
 120             />
 121           </div>
 122         </div>
 123       </form>
 124     );
 125   }
 126
 127   handlePrivateMessageSubmit(i: PrivateMessageForm, event: any) {
 128     event.preventDefault();
 129     i.setState({ loading: true, submitted: true });
 130     const pm = i.props.privateMessageView;
 131     const auth = myAuthRequired();
 132     const content = i.state.content ?? "";
 133     if (pm) {
 134       i.props.onEdit?.({
 135         private_message_id: pm.private_message.id,
 136         content,
 137         auth,
 138       });
 139     } else {
 140       i.props.onCreate?.({
 141         content,
 142         recipient_id: i.props.recipient.id,
 143         auth,
 144       });
 145     }
 146   }
 147
 148   handleContentChange(val: string) {
 149     this.setState({ content: val });
 150   }
 151
 152   handleCancel(i: PrivateMessageForm) {
 153     i.props.onCancel?.();
 154   }
 155
 156   handlePreviewToggle(i: PrivateMessageForm, event: any) {
 157     event.preventDefault();
 158     i.setState({ previewMode: !i.state.previewMode });
 159   }
 160 }