From eff7bac9d882d2aa5a2d0890f956132a67d2144f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Chaves=20Neto?= <netobac1@gmail.com>
Date: Thu, 16 Jan 2020 16:02:49 -0300
Subject: [PATCH] refact: refactor userDetails (#5467)

---
 app/javascript/.eslintrc.js                   |   2 +
 .../__snapshots__/userDetails.test.jsx.snap   |  14 +-
 app/javascript/chat/userDetails.jsx           | 383 +++++++++---------
 3 files changed, 215 insertions(+), 184 deletions(-)

diff --git a/app/javascript/.eslintrc.js b/app/javascript/.eslintrc.js
index f9ff4f0ab..b7773cfd5 100644
--- a/app/javascript/.eslintrc.js
+++ b/app/javascript/.eslintrc.js
@@ -34,6 +34,8 @@ module.exports = {
     'react/jsx-no-target-blank': [2, { enforceDynamicLinks: 'always' }],
   },
   globals: {
+    getCsrfToken: false,
+    sendFetch: false,
     InstantClick: false,
     filterXSS: false,
     Pusher: false,
diff --git a/app/javascript/chat/__tests__/__snapshots__/userDetails.test.jsx.snap b/app/javascript/chat/__tests__/__snapshots__/userDetails.test.jsx.snap
index e1166c1c0..b04faa386 100644
--- a/app/javascript/chat/__tests__/__snapshots__/userDetails.test.jsx.snap
+++ b/app/javascript/chat/__tests__/__snapshots__/userDetails.test.jsx.snap
@@ -3,7 +3,7 @@
 exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
 <div>
   <img
-    alt="bojackhorseman profile image"
+    alt="bojackhorseman profile"
     src="https://media.giphy.com/media/3o7WTHb2WjEXbsmWDS/giphy.gif"
     style={
       Object {
@@ -24,6 +24,7 @@ exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
   >
     <a
       href="/bojackhorseman"
+      rel="noopener noreferrer"
       target="_blank"
     >
       Bojack Horseman
@@ -165,6 +166,7 @@ exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
         class="no"
         onClick={[Function]}
         onKeyUp={[Function]}
+        role="button"
         tabIndex="0"
       >
         No
@@ -202,6 +204,7 @@ exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
       <a
         onClick={[Function]}
         onKeyUp={[Function]}
+        role="button"
         tabIndex="0"
       >
         Yes, Block
@@ -210,6 +213,7 @@ exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
         class="no"
         onClick={[Function]}
         onKeyUp={[Function]}
+        role="button"
         tabIndex="0"
       >
         No
@@ -222,7 +226,7 @@ exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
 exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
 <div>
   <img
-    alt="mrpeanutbutter profile image"
+    alt="mrpeanutbutter profile"
     src="https://media.giphy.com/media/xThuW6sWCGbpZMpX7a/giphy.gif"
     style={
       Object {
@@ -243,6 +247,7 @@ exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
   >
     <a
       href="/mrpeanutbutter"
+      rel="noopener noreferrer"
       target="_blank"
     >
       Mr. Peanutbutter
@@ -347,11 +352,13 @@ exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
   >
     <button
       onClick={[Function]}
+      type="button"
     >
       Block User
     </button>
     <button
       onClick={[Function]}
+      type="button"
     >
       Report Abuse
     </button>
@@ -395,6 +402,7 @@ exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
         class="no"
         onClick={[Function]}
         onKeyUp={[Function]}
+        role="button"
         tabIndex="0"
       >
         No
@@ -432,6 +440,7 @@ exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
       <a
         onClick={[Function]}
         onKeyUp={[Function]}
+        role="button"
         tabIndex="0"
       >
         Yes, Block
@@ -440,6 +449,7 @@ exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
         class="no"
         onClick={[Function]}
         onKeyUp={[Function]}
+        role="button"
         tabIndex="0"
       >
         No
diff --git a/app/javascript/chat/userDetails.jsx b/app/javascript/chat/userDetails.jsx
index 465aaf5e6..d34b85045 100644
--- a/app/javascript/chat/userDetails.jsx
+++ b/app/javascript/chat/userDetails.jsx
@@ -1,6 +1,10 @@
-import { h, Component } from 'preact';
+import { h } from 'preact';
+import { PropTypes } from 'prop-types';
+// eslint-disable-next-line import/no-unresolved
 import twitterImage from 'images/twitter-logo.svg';
+// eslint-disable-next-line import/no-unresolved
 import githubImage from 'images/github-logo.svg';
+// eslint-disable-next-line import/no-unresolved
 import websiteImage from 'images/external-link-logo.svg';
 
 function blockUser(blockedUserId) {
@@ -16,6 +20,7 @@ function blockUser(blockedUserId) {
 const setUpButton = ({ modalId = '', otherModalId = '', btnName = '' }) => {
   return (
     <button
+      type="button"
       onClick={() => {
         const modal = document.getElementById(`${modalId}`);
         const otherModal = document.getElementById(`${otherModalId}`);
@@ -34,6 +39,12 @@ const setUpButton = ({ modalId = '', otherModalId = '', btnName = '' }) => {
   );
 };
 
+setUpButton.propTypes = {
+  modalId: PropTypes.string.isRequired,
+  otherModalId: PropTypes.string.isRequired,
+  btnName: PropTypes.string.isRequired,
+};
+
 const userDetailsConfig = {
   twitter_username: {
     hostUrl: 'https://twitter.com/',
@@ -53,200 +64,208 @@ const userDetailsConfig = {
   },
 };
 
-export default class UserDetails extends Component {
-  render() {
-    const { user } = this.props;
-    const channelId = this.props.activeChannelId;
-    const channel = this.props.activeChannel || {};
-    const socialIcons = [];
-    const userMeta = ['twitter_username', 'github_username', 'website_url'];
-    userMeta.forEach(metaProp => {
-      if (user[metaProp]) {
-        const {
-          className,
-          hostUrl,
-          srcImage,
-          imageAltText,
-        } = userDetailsConfig[metaProp];
-        socialIcons.push(
-          <a
-            href={`${hostUrl}${user[metaProp]}`}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <img
-              className={className}
-              src={srcImage}
-              style={{ width: '30px', margin: '5px 15px 15px 0px' }}
-              alt={imageAltText}
-            />
-          </a>,
-        );
-      }
-    });
-    let userLocation = '';
-    if (user.location && user.location.length > 0) {
-      userLocation = (
-        <div>
-          <div className="key">location</div>
-          <div className="value">{user.location}</div>
-        </div>
+const UserDetails = ({ user, activeChannelId, activeChannel }) => {
+  const channelId = activeChannelId;
+  const channel = activeChannel || {};
+  const socialIcons = [];
+  const userMeta = ['twitter_username', 'github_username', 'website_url'];
+  userMeta.forEach(metaProp => {
+    if (user[metaProp]) {
+      const { className, hostUrl, srcImage, imageAltText } = userDetailsConfig[
+        metaProp
+      ];
+      socialIcons.push(
+        <a
+          href={`${hostUrl}${user[metaProp]}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img
+            className={className}
+            src={srcImage}
+            style={{ width: '30px', margin: '5px 15px 15px 0px' }}
+            alt={imageAltText}
+          />
+        </a>,
       );
     }
-    let blockButton = '';
-    if (channel.channel_type === 'direct' && window.currentUser.id != user.id) {
-      blockButton = setUpButton({
-        modalId: 'userdetails__blockmsg',
-        otherModalId: 'userdetails__reportabuse',
-        btnName: 'Block User',
-      });
-    }
-
-    let reportButton = '';
-    if (window.currentUser.id !== user.id) {
-      reportButton = setUpButton({
-        modalId: 'userdetails__reportabuse',
-        otherModalId: 'userdetails__blockmsg',
-        btnName: 'Report Abuse',
-      });
-    }
-    return (
+  });
+  let userLocation = '';
+  if (user.location && user.location.length > 0) {
+    userLocation = (
       <div>
-        <img
-          src={user.profile_image}
-          alt={`${user.username} profile image`}
-          style={{
-            height: '210px',
-            width: '210px',
-            margin: ' 15px auto',
-            display: 'block',
-            borderRadius: '500px',
-          }}
-        />
-        <h1 style={{ textAlign: 'center' }}>
-          <a href={`/${user.username}`} target="_blank">
-            {user.name}
+        <div className="key">location</div>
+        <div className="value">{user.location}</div>
+      </div>
+    );
+  }
+  let blockButton = '';
+  if (channel.channel_type === 'direct' && window.currentUser.id !== user.id) {
+    blockButton = setUpButton({
+      modalId: 'userdetails__blockmsg',
+      otherModalId: 'userdetails__reportabuse',
+      btnName: 'Block User',
+    });
+  }
+
+  let reportButton = '';
+  if (window.currentUser.id !== user.id) {
+    reportButton = setUpButton({
+      modalId: 'userdetails__reportabuse',
+      otherModalId: 'userdetails__blockmsg',
+      btnName: 'Report Abuse',
+    });
+  }
+
+  return (
+    <div>
+      <img
+        src={user.profile_image}
+        alt={`${user.username} profile`}
+        style={{
+          height: '210px',
+          width: '210px',
+          margin: ' 15px auto',
+          display: 'block',
+          borderRadius: '500px',
+        }}
+      />
+      <h1 style={{ textAlign: 'center' }}>
+        <a href={`/${user.username}`} target="_blank" rel="noopener noreferrer">
+          {user.name}
+        </a>
+      </h1>
+      <div style={{ height: '50px', margin: 'auto', width: '96%' }}>
+        {socialIcons}
+      </div>
+      <div style={{ fontStyle: 'italic' }}>{user.summary}</div>
+      <div className="activechatchannel__activecontentuserdetails">
+        {userLocation}
+        <div className="key">joined</div>
+        <div className="value">{user.joined_at}</div>
+      </div>
+      <div className="userdetails__blockreport">
+        {blockButton}
+        {reportButton}
+      </div>
+      <div id="userdetails__reportabuse" style={{ display: 'none' }}>
+        <div className="userdetails__reportabuse">
+          <p>Reporting abuse will: </p>
+          <ul>
+            <li>
+              close this chat and prevent this user from re-opening chat with
+              you
+            </li>
+            <li>
+              give the DEV team your consent to read messages in this chat to
+              understand your report and take appropriate action
+            </li>
+          </ul>
+          <p>
+            Blocking is only on Connect right now and has not been implemented
+            across DEV yet.
+          </p>
+          <h5>Are you sure?</h5>
+          <a
+            tabIndex="0"
+            href="/report-abuse"
+            onClick={() => {
+              blockUser(channelId);
+            }}
+          >
+            Yes, Report
           </a>
-        </h1>
-        <div style={{ height: '50px', margin: 'auto', width: '96%' }}>
-          {socialIcons}
-        </div>
-        <div style={{ fontStyle: 'italic' }}>{user.summary}</div>
-        <div className="activechatchannel__activecontentuserdetails">
-          {userLocation}
-          <div className="key">joined</div>
-          <div className="value">{user.joined_at}</div>
-        </div>
-        <div className="userdetails__blockreport">
-          {blockButton}
-          {reportButton}
-        </div>
-        <div id="userdetails__reportabuse" style={{ display: 'none' }}>
-          <div className="userdetails__reportabuse">
-            <p>Reporting abuse will: </p>
-            <ul>
-              <li>
-                close this chat and prevent this user from re-opening chat with
-                you
-              </li>
-              <li>
-                give the DEV team your consent to read messages in this chat to
-                understand your report and take appropriate action
-              </li>
-            </ul>
-            <p>
-              Blocking is only on Connect right now and has not been implemented
-              across DEV yet.
-            </p>
-            <h5>Are you sure?</h5>
-            <a
-              tabIndex="0"
-              href="/report-abuse"
-              onClick={() => {
-                blockUser(channelId);
-              }}
-            >
-              Yes, Report
-            </a>
-            <a
-              tabIndex="0"
-              className="no"
-              onClick={() => {
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a
+            role="button"
+            tabIndex="0"
+            className="no"
+            onClick={() => {
+              document.getElementById(
+                'userdetails__reportabuse',
+              ).style.display = 'none';
+              window.location.href = `#`;
+            }}
+            onKeyUp={e => {
+              if (e.keyCode === 13) {
                 document.getElementById(
                   'userdetails__reportabuse',
                 ).style.display = 'none';
                 window.location.href = `#`;
-              }}
-              onKeyUp={e => {
-                if (e.keyCode === 13) {
-                  document.getElementById(
-                    'userdetails__reportabuse',
-                  ).style.display = 'none';
-                  window.location.href = `#`;
-                }
-              }}
-            >
-              No
-            </a>
-          </div>
+              }
+            }}
+          >
+            No
+          </a>
         </div>
-        <div id="userdetails__blockmsg" style={{ display: 'none' }}>
-          <div className="userdetails__blockmsg">
-            <p>Blocking on connect will: </p>
-            <ul>
-              <li>
-                close this chat and prevent this user from re-opening chat with
-                you
-              </li>
-              <li>
-                NOT notify the user you will block--this channel will become
-                inaccessible for both users
-              </li>
-            </ul>
-            <p>
-              Blocking is only on Connect right now and has not been implemented
-              across DEV yet. Consider reporting abuse to the DEV team if this
-              user is spamming or harassing elsewhere on dev.to, so we can take
-              further action.
-            </p>
-            <h5>Are you sure?</h5>
-            <a
-              tabIndex="0"
-              onClick={() => {
+      </div>
+      <div id="userdetails__blockmsg" style={{ display: 'none' }}>
+        <div className="userdetails__blockmsg">
+          <p>Blocking on connect will: </p>
+          <ul>
+            <li>
+              close this chat and prevent this user from re-opening chat with
+              you
+            </li>
+            <li>
+              NOT notify the user you will block--this channel will become
+              inaccessible for both users
+            </li>
+          </ul>
+          <p>
+            Blocking is only on Connect right now and has not been implemented
+            across DEV yet. Consider reporting abuse to the DEV team if this
+            user is spamming or harassing elsewhere on dev.to, so we can take
+            further action.
+          </p>
+          <h5>Are you sure?</h5>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a
+            role="button"
+            tabIndex="0"
+            onClick={() => {
+              blockUser(user.id);
+              window.location.href = `/connect`;
+            }}
+            onKeyUp={e => {
+              if (e.keyCode === 13) {
                 blockUser(user.id);
                 window.location.href = `/connect`;
-              }}
-              onKeyUp={e => {
-                if (e.keyCode === 13) {
-                  blockUser(user.id);
-                  window.location.href = `/connect`;
-                }
-              }}
-            >
-              Yes, Block
-            </a>
-            <a
-              tabIndex="0"
-              className="no"
-              onClick={() => {
+              }
+            }}
+          >
+            Yes, Block
+          </a>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a
+            role="button"
+            tabIndex="0"
+            className="no"
+            onClick={() => {
+              document.getElementById('userdetails__blockmsg').style.display =
+                'none';
+              window.location.href = `#`;
+            }}
+            onKeyUp={e => {
+              if (e.keyCode === 13) {
                 document.getElementById('userdetails__blockmsg').style.display =
                   'none';
                 window.location.href = `#`;
-              }}
-              onKeyUp={e => {
-                if (e.keyCode === 13) {
-                  document.getElementById(
-                    'userdetails__blockmsg',
-                  ).style.display = 'none';
-                  window.location.href = `#`;
-                }
-              }}
-            >
-              No
-            </a>
-          </div>
+              }
+            }}
+          >
+            No
+          </a>
         </div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
+UserDetails.propTypes = {
+  user: PropTypes.objectOf().isRequired,
+  activeChannelId: PropTypes.string.isRequired,
+  activeChannel: PropTypes.objectOf().isRequired,
+};
+
+export default UserDetails;