Fixing an issue with comments clearing out forms. Fixes #1045

ui/src/components/inbox.tsx

@@ -275,21 +275,21 @@ export class Inbox extends Component<any, InboxState> {
     );
   }
 
+  combined(): Array<ReplyType> {
+    return [
+      ...this.state.replies,
+      ...this.state.mentions,
+      ...this.state.messages,
+    ].sort((a, b) => b.published.localeCompare(a.published));
+  }
+
   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));
-
     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
     );
   }

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();

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() {
+  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'));
     }
+  }
 }

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

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

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,