routes.api: fix get_captcha endpoint (#1135)

[lemmy.git] / ui / src / components / private-message-form.tsx

diff --git a/ui/src/components/private-message-form.tsx b/ui/src/components/private-message-form.tsx
index 1078236150f78eac6d935e7fa4f6ece0f5c6d737..6d7825cd0c08c6455c9edbbd56d4e280222edb40 100644 (file)
--- a/ui/src/components/private-message-form.tsx
+++ b/ui/src/components/private-message-form.tsx
@@ -1,6 +1,5 @@
 import { Component, linkEvent } from 'inferno';
 import { Prompt } from 'inferno-router';
-import { Link } from 'inferno-router';
 import { Subscription } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
 import {
@@ -15,21 +14,16 @@ import {
   GetUserDetailsForm,
   SortType,
   WebSocketJsonResponse,
-} from '../interfaces';
+} from 'lemmy-js-client';
 import { WebSocketService } from '../services';
 import {
   capitalizeFirstLetter,
-  markdownHelpUrl,
-  mdToHtml,
   wsJsonToRes,
   toast,
-  randomStr,
-  setupTribute,
   setupTippy,
 } from '../utils';
 import { UserListing } from './user-listing';
-import Tribute from 'tributejs/src/Tribute.js';
-import autosize from 'autosize';
+import { MarkdownTextArea } from './markdown-textarea';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
 
@@ -53,8 +47,6 @@ export class PrivateMessageForm extends Component<
   PrivateMessageFormProps,
   PrivateMessageFormState
 > {
-  private id = `message-form-${randomStr()}`;
-  private tribute: Tribute;
   private subscription: Subscription;
   private emptyState: PrivateMessageFormState = {
     privateMessageForm: {
@@ -70,9 +62,10 @@ export class PrivateMessageForm extends Component<
   constructor(props: any, context: any) {
     super(props, context);
 
-    this.tribute = setupTribute();
     this.state = this.emptyState;
 
+    this.handleContentChange = this.handleContentChange.bind(this);
+
     if (this.props.privateMessage) {
       this.state.privateMessageForm = {
         content: this.props.privateMessage.content,
@@ -84,7 +77,7 @@ export class PrivateMessageForm extends Component<
       this.state.privateMessageForm.recipient_id = this.props.params.recipient_id;
       let form: GetUserDetailsForm = {
         user_id: this.state.privateMessageForm.recipient_id,
-        sort: SortType[SortType.New],
+        sort: SortType.New,
         saved_only: false,
       };
       WebSocketService.Instance.getUserDetails(form);
@@ -100,19 +93,20 @@ export class PrivateMessageForm extends Component<
   }
 
   componentDidMount() {
-    var textarea: any = document.getElementById(this.id);
-    autosize(textarea);
-    this.tribute.attach(textarea);
-    textarea.addEventListener('tribute-replaced', () => {
-      this.state.privateMessageForm.content = textarea.value;
-      this.setState(this.state);
-      autosize.update(textarea);
-    });
     setupTippy();
   }
 
+  componentDidUpdate() {
+    if (!this.state.loading && this.state.privateMessageForm.content) {
+      window.onbeforeunload = () => true;
+    } else {
+      window.onbeforeunload = undefined;
+    }
+  }
+
   componentWillUnmount() {
     this.subscription.unsubscribe();
+    window.onbeforeunload = null;
   }
 
   render() {
@@ -134,6 +128,8 @@ export class PrivateMessageForm extends Component<
                   <UserListing
                     user={{
                       name: this.state.recipient.name,
+                      preferred_username: this.state.recipient
+                        .preferred_username,
                       avatar: this.state.recipient.avatar,
                       id: this.state.recipient.id,
                       local: this.state.recipient.local,
@@ -145,24 +141,23 @@ export class PrivateMessageForm extends Component<
             </div>
           )}
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">{i18n.t('message')}</label>
+            <label class="col-sm-2 col-form-label">
+              {i18n.t('message')}
+              <span
+                onClick={linkEvent(this, this.handleShowDisclaimer)}
+                class="ml-2 pointer text-danger"
+                data-tippy-content={i18n.t('disclaimer')}
+              >
+                <svg class={`icon icon-inline`}>
+                  <use xlinkHref="#icon-alert-triangle"></use>
+                </svg>
+              </span>
+            </label>
             <div class="col-sm-10">
-              <textarea
-                id={this.id}
-                value={this.state.privateMessageForm.content}
-                onInput={linkEvent(this, this.handleContentChange)}
-                className={`form-control ${this.state.previewMode && 'd-none'}`}
-                rows={4}
-                maxLength={10000}
+              <MarkdownTextArea
+                initialContent={this.state.privateMessageForm.content}
+                onContentChange={this.handleContentChange}
               />
-              {this.state.previewMode && (
-                <div
-                  className="card card-body md-div"
-                  dangerouslySetInnerHTML={mdToHtml(
-                    this.state.privateMessageForm.content
-                  )}
-                />
-              )}
             </div>
           </div>
 
@@ -176,7 +171,7 @@ export class PrivateMessageForm extends Component<
                       class="alert-link"
                       target="_blank"
                       rel="noopener"
-                      href="https://about.riot.im/"
+                      href="https://element.io/get-started"
                     >
                       #
                     </a>
@@ -202,16 +197,6 @@ export class PrivateMessageForm extends Component<
                   capitalizeFirstLetter(i18n.t('send_message'))
                 )}
               </button>
-              {this.state.privateMessageForm.content && (
-                <button
-                  className={`btn btn-secondary mr-2 ${
-                    this.state.previewMode && 'active'
-                  }`}
-                  onClick={linkEvent(this, this.handlePreviewToggle)}
-                >
-                  {i18n.t('preview')}
-                </button>
-              )}
               {this.props.privateMessage && (
                 <button
                   type="button"
@@ -222,30 +207,7 @@ export class PrivateMessageForm extends Component<
                 </button>
               )}
               <ul class="d-inline-block float-right list-inline mb-1 text-muted font-weight-bold">
-                <li class="list-inline-item">
-                  <span
-                    onClick={linkEvent(this, this.handleShowDisclaimer)}
-                    class="pointer"
-                    data-tippy-content={i18n.t('disclaimer')}
-                  >
-                    <svg class={`icon icon-inline`}>
-                      <use xlinkHref="#icon-alert-triangle"></use>
-                    </svg>
-                  </span>
-                </li>
-                <li class="list-inline-item">
-                  <a
-                    href={markdownHelpUrl}
-                    target="_blank"
-                    rel="noopener"
-                    class="text-muted"
-                    title={i18n.t('formatting_help')}
-                  >
-                    <svg class="icon icon-inline">
-                      <use xlinkHref="#icon-help-circle"></use>
-                    </svg>
-                  </a>
-                </li>
+                <li class="list-inline-item"></li>
               </ul>
             </div>
           </div>
@@ -276,9 +238,9 @@ export class PrivateMessageForm extends Component<
     i.setState(i.state);
   }
 
-  handleContentChange(i: PrivateMessageForm, event: any) {
-    i.state.privateMessageForm.content = event.target.value;
-    i.setState(i.state);
+  handleContentChange(val: string) {
+    this.state.privateMessageForm.content = val;
+    this.setState(this.state);
   }
 
   handleCancel(i: PrivateMessageForm) {
@@ -303,7 +265,11 @@ export class PrivateMessageForm extends Component<
       this.state.loading = false;
       this.setState(this.state);
       return;
-    } else if (res.op == UserOperation.EditPrivateMessage) {
+    } else if (
+      res.op == UserOperation.EditPrivateMessage ||
+      res.op == UserOperation.DeletePrivateMessage ||
+      res.op == UserOperation.MarkPrivateMessageAsRead
+    ) {
       let data = res.data as PrivateMessageResponse;
       this.state.loading = false;
       this.props.onEdit(data.message);