Making sure new comments don't clear out your current textarea.

- Making a better random string generator.
- Doing better incoming comment checking.
- Fixes #769

ui/src/components/comment-form.tsx

@@ -245,18 +245,32 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
     });
   }
 
-  handleFinished() {
-    this.state.previewMode = false;
-    this.state.loading = false;
-    this.state.commentForm.content = '';
-    this.setState(this.state);
-    let form: any = document.getElementById(this.formId);
-    form.reset();
-    if (this.props.node) {
-      this.props.onReplyCancel();
+  handleFinished(data: CommentResponse) {
+    let isReply =
+      this.props.node !== undefined && data.comment.parent_id !== null;
+    let xor =
+      +!(data.comment.parent_id !== null) ^ +(this.props.node !== undefined);
+
+    if (
+      (data.comment.creator_id == UserService.Instance.user.id &&
+        // 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)
+    ) {
+      this.state.previewMode = false;
+      this.state.loading = false;
+      this.state.commentForm.content = '';
+      this.setState(this.state);
+      let form: any = document.getElementById(this.formId);
+      form.reset();
+      if (this.props.node) {
+        this.props.onReplyCancel();
+      }
+      autosize.update(form);
+      this.setState(this.state);
     }
-    autosize.update(document.querySelector('textarea'));
-    this.setState(this.state);
   }
 
   handleCommentSubmit(i: CommentForm, event: any) {
@@ -359,14 +373,10 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
     if (UserService.Instance.user) {
       if (res.op == UserOperation.CreateComment) {
         let data = res.data as CommentResponse;
-        if (data.comment.creator_id == UserService.Instance.user.id) {
-          this.handleFinished();
-        }
+        this.handleFinished(data);
       } else if (res.op == UserOperation.EditComment) {
         let data = res.data as CommentResponse;
-        if (data.comment.creator_id == UserService.Instance.user.id) {
-          this.handleFinished();
-        }
+        this.handleFinished(data);
       }
     }
   }

ui/src/utils.ts

@@ -114,11 +114,26 @@ export const emojiPicker = new EmojiButton({
   // TODO i18n
 });
 
-export function randomStr() {
-  return Math.random()
-    .toString(36)
-    .replace(/[^a-z]+/g, '')
-    .substr(2, 10);
+const DEFAULT_ALPHABET =
+  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+function getRandomCharFromAlphabet(alphabet: string): string {
+  return alphabet.charAt(Math.floor(Math.random() * alphabet.length));
+}
+
+export function randomStr(
+  idDesiredLength: number = 20,
+  alphabet = DEFAULT_ALPHABET
+): string {
+  /**
+   * Create n-long array and map it to random chars from given alphabet.
+   * Then join individual chars as string
+   */
+  return Array.from({ length: idDesiredLength })
+    .map(() => {
+      return getRandomCharFromAlphabet(alphabet);
+    })
+    .join('');
 }
 
 export function wsJsonToRes(msg: WebSocketJsonResponse): WebSocketResponse {