Adding form_id to comment creates and edits.

- This adds a form_id to CreateComment, EditComment, and CommentResponse
- This is so any front end clients can add a randomly generated string,
  and know which comment they submitted, is the one they're getting
  back.
- This gets rid of all the weird complicated logic in handleFinished(),
  and should stop the comment forms getting cleared once and for all.

docs/src/contributing_websocket_http_api.md

@@ -1623,6 +1623,7 @@ Only admins and mods can sticky a post.
     content: String,
     parent_id: Option<i32>,
     post_id: i32,
+    form_id: Option<String>, // An optional form id, so you know which message came back
     auth: String
   }
 }
@@ -1652,6 +1653,7 @@ Only the creator can edit the comment.
   data: {
     content: String,
     edit_id: i32,
+    form_id: Option<String>,
     auth: String,
   }
 }

server/src/api/comment.rs

@@ -44,6 +44,7 @@ pub struct CreateComment {
   content: String,
   parent_id: Option<i32>,
   pub post_id: i32,
+  form_id: Option<String>,
   auth: String,
 }
 
@@ -51,6 +52,7 @@ pub struct CreateComment {
 pub struct EditComment {
   content: String,
   edit_id: i32,
+  form_id: Option<String>,
   auth: String,
 }
 
@@ -87,6 +89,7 @@ pub struct SaveComment {
 pub struct CommentResponse {
   pub comment: CommentView,
   pub recipient_ids: Vec<i32>,
+  pub form_id: Option<String>,
 }
 
 #[derive(Serialize, Deserialize)]
@@ -227,6 +230,7 @@ impl Perform for Oper<CreateComment> {
     let mut res = CommentResponse {
       comment: comment_view,
       recipient_ids,
+      form_id: data.form_id.to_owned(),
     };
 
     if let Some(ws) = websocket_info {
@@ -321,6 +325,7 @@ impl Perform for Oper<EditComment> {
     let mut res = CommentResponse {
       comment: comment_view,
       recipient_ids,
+      form_id: data.form_id.to_owned(),
     };
 
     if let Some(ws) = websocket_info {
@@ -419,6 +424,7 @@ impl Perform for Oper<DeleteComment> {
     let mut res = CommentResponse {
       comment: comment_view,
       recipient_ids,
+      form_id: None,
     };
 
     if let Some(ws) = websocket_info {
@@ -530,6 +536,7 @@ impl Perform for Oper<RemoveComment> {
     let mut res = CommentResponse {
       comment: comment_view,
       recipient_ids,
+      form_id: None,
     };
 
     if let Some(ws) = websocket_info {
@@ -621,6 +628,7 @@ impl Perform for Oper<MarkCommentAsRead> {
     let res = CommentResponse {
       comment: comment_view,
       recipient_ids: Vec::new(),
+      form_id: None,
     };
 
     Ok(res)
@@ -671,6 +679,7 @@ impl Perform for Oper<SaveComment> {
     Ok(CommentResponse {
       comment: comment_view,
       recipient_ids: Vec::new(),
+      form_id: None,
     })
   }
 }
@@ -782,6 +791,7 @@ impl Perform for Oper<CreateCommentLike> {
     let mut res = CommentResponse {
       comment: liked_comment,
       recipient_ids,
+      form_id: None,
     };
 
     if let Some(ws) = websocket_info {

server/src/apub/shared_inbox.rs

@@ -404,6 +404,7 @@ async fn receive_create_comment(
   let res = CommentResponse {
     comment: comment_view,
     recipient_ids,
+    form_id: None,
   };
 
   chat_server.do_send(SendComment {
@@ -567,6 +568,7 @@ async fn receive_update_comment(
   let res = CommentResponse {
     comment: comment_view,
     recipient_ids,
+    form_id: None,
   };
 
   chat_server.do_send(SendComment {
@@ -616,6 +618,7 @@ async fn receive_like_comment(
   let res = CommentResponse {
     comment: comment_view,
     recipient_ids,
+    form_id: None,
   };
 
   chat_server.do_send(SendComment {
@@ -665,6 +668,7 @@ async fn receive_dislike_comment(
   let res = CommentResponse {
     comment: comment_view,
     recipient_ids,
+    form_id: None,
   };
 
   chat_server.do_send(SendComment {
@@ -960,6 +964,7 @@ async fn receive_delete_comment(
   let res = CommentResponse {
     comment: comment_view,
     recipient_ids,
+    form_id: None,
   };
 
   chat_server.do_send(SendComment {
@@ -1017,6 +1022,7 @@ async fn receive_remove_comment(
   let res = CommentResponse {
     comment: comment_view,
     recipient_ids,
+    form_id: None,
   };
 
   chat_server.do_send(SendComment {
@@ -1108,6 +1114,7 @@ async fn receive_undo_delete_comment(
   let res = CommentResponse {
     comment: comment_view,
     recipient_ids,
+    form_id: None,
   };
 
   chat_server.do_send(SendComment {
@@ -1165,6 +1172,7 @@ async fn receive_undo_remove_comment(
   let res = CommentResponse {
     comment: comment_view,
     recipient_ids,
+    form_id: None,
   };
 
   chat_server.do_send(SendComment {
@@ -1464,6 +1472,7 @@ async fn receive_undo_like_comment(
   let res = CommentResponse {
     comment: comment_view,
     recipient_ids,
+    form_id: None,
   };
 
   chat_server.do_send(SendComment {

ui/src/components/comment-form.tsx

@@ -115,34 +115,9 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
     );
   }
 
-  handleFinished(op: UserOperation, data: CommentResponse) {
+  handleCommentSubmit(msg: { val: string; formId: string }) {
-    let isReply =
+    this.state.commentForm.content = msg.val;
-      this.props.node !== undefined && data.comment.parent_id !== null;
+    this.state.commentForm.form_id = msg.formId;
-    let xor =
-      +!(data.comment.parent_id !== null) ^ +(this.props.node !== undefined);
-
-    if (
-      (data.comment.creator_id == UserService.Instance.user.id &&
-        ((op == UserOperation.CreateComment &&
-          // If its a reply, make sure parent child match
-          isReply &&
-          data.comment.parent_id == this.props.node.comment.id) ||
-          // Otherwise, check the XOR of the two
-          (!isReply && xor))) ||
-      // If its a comment edit, only check that its from your user, and that its a
-      // text edit only
-
-      (data.comment.creator_id == UserService.Instance.user.id &&
-        op == UserOperation.EditComment &&
-        data.comment.content)
-    ) {
-      this.state.finished = true;
-      this.setState(this.state);
-    }
-  }
-
-  handleCommentSubmit(val: string) {
-    this.state.commentForm.content = val;
     if (this.props.edit) {
       WebSocketService.Instance.editComment(this.state.commentForm);
     } else {
@@ -160,12 +135,16 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
 
     // Only do the showing and hiding if logged in
     if (UserService.Instance.user) {
-      if (res.op == UserOperation.CreateComment) {
+      if (
+        res.op == UserOperation.CreateComment ||
+        res.op == UserOperation.EditComment
+      ) {
         let data = res.data as CommentResponse;
-        this.handleFinished(res.op, data);
+
-      } else if (res.op == UserOperation.EditComment) {
+        // This only finishes this form, if the randomly generated form_id matches the one received
-        let data = res.data as CommentResponse;
+        if (this.state.commentForm.form_id == data.form_id) {
-        this.handleFinished(res.op, data);
+          this.setState({ finished: true });
+        }
       }
     }
   }

ui/src/components/markdown-textarea.tsx

@@ -21,7 +21,7 @@ interface MarkdownTextAreaProps {
   replyType?: boolean;
   focus?: boolean;
   disabled?: boolean;
-  onSubmit?(val: string): any;
+  onSubmit?(msg: { val: string; formId: string }): any;
   onContentChange?(val: string): any;
   onReplyCancel?(): any;
 }
@@ -373,7 +373,8 @@ export class MarkdownTextArea extends Component<
     event.preventDefault();
     i.state.loading = true;
     i.setState(i.state);
-    i.props.onSubmit(i.state.content);
+    let msg = { val: i.state.content, formId: i.formId };
+    i.props.onSubmit(msg);
   }
 
   handleReplyCancel(i: MarkdownTextArea) {

ui/src/interfaces.ts

@@ -708,6 +708,7 @@ export interface CommentForm {
   parent_id?: number;
   edit_id?: number;
   creator_id?: number;
+  form_id?: string;
   auth: string;
 }
 
@@ -739,6 +740,7 @@ export interface SaveCommentForm {
 export interface CommentResponse {
   comment: Comment;
   recipient_ids: Array<number>;
+  form_id?: string;
 }
 
 export interface CommentLikeForm {