From 3e72ec379abbebca1b76772fe740dbd34cb76c23 Mon Sep 17 00:00:00 2001
From: Andrei Alikov <andrei.alikov@gmail.com>
Date: Wed, 6 Feb 2019 18:50:15 +0900
Subject: [PATCH] Fix block users select behavior

We need to have onBlur and onChange events listeners for the select for the "block user" as it advised by es-lint. But if we simply add onBlur event listener it will cause infinite loop of blur -> confirm pop-up -> cancel -> blur -> confirm pop-up... So we have to debounce the events to process them only one time.
---
 web/app/components/comment/comment.jsx | 28 ++++++++++++++++++++------
 web/app/utils/debounce.js              |  8 ++++++++
 2 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 web/app/utils/debounce.js

diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx
index 7c7a209f..5d30816a 100644
--- a/web/app/components/comment/comment.jsx
+++ b/web/app/components/comment/comment.jsx
@@ -7,6 +7,7 @@ import { API_BASE, BASE_URL, COMMENT_NODE_CLASSNAME_PREFIX, BLOCKING_DURATIONS }
 import { url } from 'common/settings';
 import store from 'common/store';
 import copy from 'common/copy';
+import debounce from 'utils/debounce';
 
 import Input from 'components/input';
 
@@ -41,6 +42,7 @@ export default class Comment extends Component {
     this.onDeleteClick = this.onDeleteClick.bind(this);
     this.onOwnCommentDeleteClick = this.onOwnCommentDeleteClick.bind(this);
     this.onBlockUserClick = this.onBlockUserClick.bind(this);
+    this.blockUser = debounce(this.blockUser, 100).bind(this);
     this.onUnblockUserClick = this.onUnblockUserClick.bind(this);
     this.isAdmin = this.isAdmin.bind(this);
     this.isCurrentUser = this.isCurrentUser.bind(this);
@@ -180,17 +182,28 @@ export default class Comment extends Component {
   }
 
   onBlockUserClick(e) {
+    // blur event will be triggered by the confirm pop-up which will start
+    // infinite loop of blur -> confirm -> blur -> ...
+    // so we trigger the blur event manually and have debounce mechanism to prevent it
+    if (e.type === 'change') {
+      e.target.blur();
+    }
+    // we have to debounce the blockUser function calls otherwise it will be
+    // called 2 times (by change event and by blur event)
+    this.blockUser(e.target.value);
+  }
+
+  blockUser(ttl) {
     const {
       id,
-      user: { id: userId },
+      user: { id: userId, name: userName },
     } = this.props.data;
 
-    const ttl = e.target.value;
     const duration = BLOCKING_DURATIONS.find(el => el.value === ttl).label;
     const promptMessage =
       ttl === 'permanently'
-        ? 'Do you want to permanently block this user?'
-        : `Do you want to block this user (${duration.toLowerCase()})?`;
+        ? `Do you want to permanently block user "${userName}"?`
+        : `Do you want to block user "${userName}" (${duration.toLowerCase()})?`;
     if (confirm(promptMessage)) {
       this.setState({ userBlocked: true });
 
@@ -663,8 +676,11 @@ export default class Comment extends Component {
                   {!userBlocked && (
                     <span className="comment__control comment__control_select-label">
                       Block
-                      {/* eslint-disable jsx-a11y/no-onchange */}
-                      <select className="comment__control_select" onChange={this.onBlockUserClick}>
+                      <select
+                        className="comment__control_select"
+                        onBlur={this.onBlockUserClick}
+                        onChange={this.onBlockUserClick}
+                      >
                         <option disabled selected value>
                           {' '}
                           Blocking period{' '}
diff --git a/web/app/utils/debounce.js b/web/app/utils/debounce.js
new file mode 100644
index 00000000..06f5b9f0
--- /dev/null
+++ b/web/app/utils/debounce.js
@@ -0,0 +1,8 @@
+export default function debounce(func, wait) {
+  let timeout;
+  return function() {
+    const laterCall = () => func.apply(this, arguments);
+    clearTimeout(timeout);
+    timeout = setTimeout(laterCall, wait);
+  };
+}