routes.api: fix get_captcha endpoint (#1135)

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

diff --git a/ui/src/components/private-message.tsx b/ui/src/components/private-message.tsx
index ef128dd4a813329047d4580a217a1042c59412ff..243d12e579eac09c1ff2691010af7aad17ee2fa7 100644 (file)
--- a/ui/src/components/private-message.tsx
+++ b/ui/src/components/private-message.tsx
@@ -2,17 +2,14 @@ import { Component, linkEvent } from 'inferno';
 import { Link } from 'inferno-router';
 import {
   PrivateMessage as PrivateMessageI,
-  EditPrivateMessageForm,
-} from '../interfaces';
+  DeletePrivateMessageForm,
+  MarkPrivateMessageAsReadForm,
+} from 'lemmy-js-client';
 import { WebSocketService, UserService } from '../services';
-import {
-  mdToHtml,
-  pictshareAvatarThumbnail,
-  showAvatars,
-  toast,
-} from '../utils';
+import { mdToHtml, pictrsAvatarThumbnail, showAvatars, toast } from '../utils';
 import { MomentTime } from './moment-time';
 import { PrivateMessageForm } from './private-message-form';
+import { UserListing, UserOther } from './user-listing';
 import { i18n } from '../i18next';
 
 interface PrivateMessageState {
@@ -49,46 +46,44 @@ export class PrivateMessage extends Component<
   }
 
   get mine(): boolean {
-    return UserService.Instance.user.id == this.props.privateMessage.creator_id;
+    return (
+      UserService.Instance.user &&
+      UserService.Instance.user.id == this.props.privateMessage.creator_id
+    );
   }
 
   render() {
     let message = this.props.privateMessage;
+    let userOther: UserOther = this.mine
+      ? {
+          name: message.recipient_name,
+          preferred_username: message.recipient_preferred_username,
+          id: message.id,
+          avatar: message.recipient_avatar,
+          local: message.recipient_local,
+          actor_id: message.recipient_actor_id,
+          published: message.published,
+        }
+      : {
+          name: message.creator_name,
+          preferred_username: message.creator_preferred_username,
+          id: message.id,
+          avatar: message.creator_avatar,
+          local: message.creator_local,
+          actor_id: message.creator_actor_id,
+          published: message.published,
+        };
+
     return (
       <div class="border-top border-light">
         <div>
           <ul class="list-inline mb-0 text-muted small">
+            {/* TODO refactor this */}
             <li className="list-inline-item">
               {this.mine ? i18n.t('to') : i18n.t('from')}
             </li>
             <li className="list-inline-item">
-              <Link
-                className="text-body font-weight-bold"
-                to={
-                  this.mine
-                    ? `/u/${message.recipient_name}`
-                    : `/u/${message.creator_name}`
-                }
-              >
-                {(this.mine
-                  ? message.recipient_avatar
-                  : message.creator_avatar) &&
-                  showAvatars() && (
-                    <img
-                      height="32"
-                      width="32"
-                      src={pictshareAvatarThumbnail(
-                        this.mine
-                          ? message.recipient_avatar
-                          : message.creator_avatar
-                      )}
-                      class="rounded-circle mr-1"
-                    />
-                  )}
-                <span>
-                  {this.mine ? message.recipient_name : message.creator_name}
-                </span>
-              </Link>
+              <UserListing user={userOther} />
             </li>
             <li className="list-inline-item">
               <span>
@@ -116,6 +111,7 @@ export class PrivateMessage extends Component<
             <PrivateMessageForm
               privateMessage={message}
               onEdit={this.handlePrivateMessageEdit}
+              onCreate={this.handlePrivateMessageCreate}
               onCancel={this.handleReplyCancel}
             />
           )}
@@ -134,7 +130,7 @@ export class PrivateMessage extends Component<
                   <>
                     <li className="list-inline-item">
                       <button
-                        class="btn btn-link btn-sm btn-animate text-muted"
+                        class="btn btn-link btn-animate text-muted"
                         onClick={linkEvent(this, this.handleMarkRead)}
                         data-tippy-content={
                           message.read
@@ -143,8 +139,9 @@ export class PrivateMessage extends Component<
                         }
                       >
                         <svg
-                          class={`icon icon-inline ${message.read &&
-                            'text-success'}`}
+                          class={`icon icon-inline ${
+                            message.read && 'text-success'
+                          }`}
                         >
                           <use xlinkHref="#icon-check"></use>
                         </svg>
@@ -152,7 +149,7 @@ export class PrivateMessage extends Component<
                     </li>
                     <li className="list-inline-item">
                       <button
-                        class="btn btn-link btn-sm btn-animate text-muted"
+                        class="btn btn-link btn-animate text-muted"
                         onClick={linkEvent(this, this.handleReplyClick)}
                         data-tippy-content={i18n.t('reply')}
                       >
@@ -167,7 +164,7 @@ export class PrivateMessage extends Component<
                   <>
                     <li className="list-inline-item">
                       <button
-                        class="btn btn-link btn-sm btn-animate text-muted"
+                        class="btn btn-link btn-animate text-muted"
                         onClick={linkEvent(this, this.handleEditClick)}
                         data-tippy-content={i18n.t('edit')}
                       >
@@ -178,7 +175,7 @@ export class PrivateMessage extends Component<
                     </li>
                     <li className="list-inline-item">
                       <button
-                        class="btn btn-link btn-sm btn-animate text-muted"
+                        class="btn btn-link btn-animate text-muted"
                         onClick={linkEvent(this, this.handleDeleteClick)}
                         data-tippy-content={
                           !message.deleted
@@ -187,8 +184,9 @@ export class PrivateMessage extends Component<
                         }
                       >
                         <svg
-                          class={`icon icon-inline ${message.deleted &&
-                            'text-danger'}`}
+                          class={`icon icon-inline ${
+                            message.deleted && 'text-danger'
+                          }`}
                         >
                           <use xlinkHref="#icon-trash"></use>
                         </svg>
@@ -198,13 +196,14 @@ export class PrivateMessage extends Component<
                 )}
                 <li className="list-inline-item">
                   <button
-                    class="btn btn-link btn-sm btn-animate text-muted"
+                    class="btn btn-link btn-animate text-muted"
                     onClick={linkEvent(this, this.handleViewSource)}
                     data-tippy-content={i18n.t('view_source')}
                   >
                     <svg
-                      class={`icon icon-inline ${this.state.viewSource &&
-                        'text-success'}`}
+                      class={`icon icon-inline ${
+                        this.state.viewSource && 'text-success'
+                      }`}
                     >
                       <use xlinkHref="#icon-file-text"></use>
                     </svg>
@@ -244,11 +243,11 @@ export class PrivateMessage extends Component<
   }
 
   handleDeleteClick(i: PrivateMessage) {
-    let form: EditPrivateMessageForm = {
+    let form: DeletePrivateMessageForm = {
       edit_id: i.props.privateMessage.id,
       deleted: !i.props.privateMessage.deleted,
     };
-    WebSocketService.Instance.editPrivateMessage(form);
+    WebSocketService.Instance.deletePrivateMessage(form);
   }
 
   handleReplyCancel() {
@@ -258,11 +257,11 @@ export class PrivateMessage extends Component<
   }
 
   handleMarkRead(i: PrivateMessage) {
-    let form: EditPrivateMessageForm = {
+    let form: MarkPrivateMessageAsReadForm = {
       edit_id: i.props.privateMessage.id,
       read: !i.props.privateMessage.read,
     };
-    WebSocketService.Instance.editPrivateMessage(form);
+    WebSocketService.Instance.markPrivateMessageAsRead(form);
   }
 
   handleMessageCollapse(i: PrivateMessage) {
@@ -280,9 +279,14 @@ export class PrivateMessage extends Component<
     this.setState(this.state);
   }
 
-  handlePrivateMessageCreate() {
-    this.state.showReply = false;
-    this.setState(this.state);
-    toast(i18n.t('message_sent'));
+  handlePrivateMessageCreate(message: PrivateMessageI) {
+    if (
+      UserService.Instance.user &&
+      message.creator_id == UserService.Instance.user.id
+    ) {
+      this.state.showReply = false;
+      this.setState(this.state);
+      toast(i18n.t('message_sent'));
+    }
   }
 }