From c76e72b7476ad740f6f8893464105cd00a6eed22 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Sat, 1 Aug 2020 23:52:38 -0400
Subject: [PATCH] Fixing an issue with comments clearing out forms. Fixes #1045

---
 ui/src/components/inbox.tsx           | 31 +++++++++++++++------------
 ui/src/components/navbar.tsx          |  1 +
 ui/src/components/private-message.tsx | 19 +++++++++++-----
 ui/src/components/search.tsx          |  2 ++
 ui/src/components/user-details.tsx    |  2 ++
 ui/src/services/WebSocketService.ts   |  4 ----
 6 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx
index eff7efcf..ecc9223c 100644
--- a/ui/src/components/inbox.tsx
+++ b/ui/src/components/inbox.tsx
@@ -275,21 +275,21 @@ export class Inbox extends Component<any, InboxState> {
     );
   }
 
-  all() {
-    let combined: Array<ReplyType> = [];
-
-    combined.push(...this.state.replies);
-    combined.push(...this.state.mentions);
-    combined.push(...this.state.messages);
-
-    // Sort it
-    combined.sort((a, b) => b.published.localeCompare(a.published));
+  combined(): Array<ReplyType> {
+    return [
+      ...this.state.replies,
+      ...this.state.mentions,
+      ...this.state.messages,
+    ].sort((a, b) => b.published.localeCompare(a.published));
+  }
 
+  all() {
     return (
       <div>
-        {combined.map(i =>
+        {this.combined().map(i =>
           isCommentType(i) ? (
             <CommentNodes
+              key={i.id}
               nodes={[{ comment: i }]}
               noIndent
               markable
@@ -298,7 +298,7 @@ export class Inbox extends Component<any, InboxState> {
               enableDownvotes={this.state.site.enable_downvotes}
             />
           ) : (
-            <PrivateMessage privateMessage={i} />
+            <PrivateMessage key={i.id} privateMessage={i} />
           )
         )}
       </div>
@@ -325,6 +325,7 @@ export class Inbox extends Component<any, InboxState> {
       <div>
         {this.state.mentions.map(mention => (
           <CommentNodes
+            key={mention.id}
             nodes={[{ comment: mention }]}
             noIndent
             markable
@@ -341,7 +342,7 @@ export class Inbox extends Component<any, InboxState> {
     return (
       <div>
         {this.state.messages.map(message => (
-          <PrivateMessage privateMessage={message} />
+          <PrivateMessage key={message.id} privateMessage={message} />
         ))}
       </div>
     );
@@ -565,7 +566,6 @@ export class Inbox extends Component<any, InboxState> {
       } else if (data.comment.creator_id == UserService.Instance.user.id) {
         toast(i18n.t('reply_sent'));
       }
-      this.setState(this.state);
     } else if (res.op == UserOperation.CreatePrivateMessage) {
       let data = res.data as PrivateMessageResponse;
       if (data.message.recipient_id == UserService.Instance.user.id) {
@@ -597,7 +597,10 @@ export class Inbox extends Component<any, InboxState> {
       this.state.replies.filter(r => !r.read).length +
       this.state.mentions.filter(r => !r.read).length +
       this.state.messages.filter(
-        r => !r.read && r.creator_id !== UserService.Instance.user.id
+        r =>
+          UserService.Instance.user &&
+          !r.read &&
+          r.creator_id !== UserService.Instance.user.id
       ).length
     );
   }
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index 6418bb22..1eb17319 100644
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -431,6 +431,7 @@ export class Navbar extends Component<any, NavbarState> {
       // The login
       if (data.my_user) {
         UserService.Instance.user = data.my_user;
+        WebSocketService.Instance.userJoin();
         // On the first load, check the unreads
         if (this.state.isLoggedIn == false) {
           this.requestNotificationPermission();
diff --git a/ui/src/components/private-message.tsx b/ui/src/components/private-message.tsx
index c3e0c2c2..4fa30a81 100644
--- a/ui/src/components/private-message.tsx
+++ b/ui/src/components/private-message.tsx
@@ -45,7 +45,10 @@ 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() {
@@ -113,6 +116,7 @@ export class PrivateMessage extends Component<
             <PrivateMessageForm
               privateMessage={message}
               onEdit={this.handlePrivateMessageEdit}
+              onCreate={this.handlePrivateMessageCreate}
               onCancel={this.handleReplyCancel}
             />
           )}
@@ -280,9 +284,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'));
+    }
   }
 }
diff --git a/ui/src/components/search.tsx b/ui/src/components/search.tsx
index 11429fb2..2162edeb 100644
--- a/ui/src/components/search.tsx
+++ b/ui/src/components/search.tsx
@@ -289,6 +289,7 @@ export class Search extends Component<any, SearchState> {
             <div class="col-12">
               {i.type_ == 'posts' && (
                 <PostListing
+                  key={(i.data as Post).id}
                   post={i.data as Post}
                   showCommunity
                   enableDownvotes={this.state.site.enable_downvotes}
@@ -297,6 +298,7 @@ export class Search extends Component<any, SearchState> {
               )}
               {i.type_ == 'comments' && (
                 <CommentNodes
+                  key={(i.data as Comment).id}
                   nodes={[{ comment: i.data as Comment }]}
                   locked
                   noIndent
diff --git a/ui/src/components/user-details.tsx b/ui/src/components/user-details.tsx
index 913cb5e9..5e9a58d2 100644
--- a/ui/src/components/user-details.tsx
+++ b/ui/src/components/user-details.tsx
@@ -150,6 +150,7 @@ export class UserDetails extends Component<UserDetailsProps, UserDetailsState> {
             <div>
               {i.type === 'posts' ? (
                 <PostListing
+                  key={(i.data as Post).id}
                   post={i.data as Post}
                   admins={this.props.admins}
                   showCommunity
@@ -158,6 +159,7 @@ export class UserDetails extends Component<UserDetailsProps, UserDetailsState> {
                 />
               ) : (
                 <CommentNodes
+                  key={(i.data as Comment).id}
                   nodes={[{ comment: i.data as Comment }]}
                   admins={this.props.admins}
                   noBorder
diff --git a/ui/src/services/WebSocketService.ts b/ui/src/services/WebSocketService.ts
index 03233ef9..c73de210 100644
--- a/ui/src/services/WebSocketService.ts
+++ b/ui/src/services/WebSocketService.ts
@@ -82,10 +82,6 @@ export class WebSocketService {
       this.ws.onopen = () => {
         console.log(`Connected to ${wsUri}`);
 
-        if (UserService.Instance.user) {
-          this.userJoin();
-        }
-
         if (!firstConnect) {
           let res: WebSocketJsonResponse = {
             reconnect: true,
-- 
2.44.1