Refactoring userDetails.jsx removes user config duplication (#4161)

forem · Oct 1, 2019 · eeb6cbd · eeb6cbd
1 parent f3417d7
commit eeb6cbd
Showing 1 changed file with 38 additions and 37 deletions.
diff --git a/app/javascript/chat/userDetails.jsx b/app/javascript/chat/userDetails.jsx
@@ -34,49 +34,50 @@ const setUpButton = ({ modalId = '', otherModalId = '', btnName = '' }) => {
   );
 }
 
+const userDetailsConfig = {
+  twitter_username: {
+    hostUrl: 'https://twitter.com/',
+    srcImage: twitterImage,
+    imageAltText: 'twitter logo'
+  },
+  github_username: {
+    hostUrl: 'https://github.com/',
+    srcImage: githubImage,
+    imageAltText: 'github logo'
+  },
+  website_url: {
+    className: 'external-link-img',
+    hostUrl: '',
+    srcImage: websiteImage,
+    imageAltText: 'external link icon'
+  }
+}
+
 export default class UserDetails extends Component {
   render() {
     const { user } = this.props;
     const channelId = this.props.activeChannelId;
     const channel = this.props.activeChannel || {};
     const socialIcons = [];
-    if (user.twitter_username) {
-      socialIcons.push(
-        <a
-          href={`https://twitter.com/${user.twitter_username}`}
-          target="_blank"
-        >
-          <img
-            src={twitterImage}
-            style={{ width: '30px', margin: '5px 15px 15px 0px' }}
-            alt="twitter logo"
-          />
-        </a>,
-      );
-    }
-    if (user.github_username) {
-      socialIcons.push(
-        <a href={`https://github.com/${user.github_username}`} target="_blank">
-          <img
-            src={githubImage}
-            style={{ width: '30px', margin: '5px 15px 15px 0px' }}
-            alt="github logo"
-          />
-        </a>,
-      );
-    }
-    if (user.website_url) {
-      socialIcons.push(
-        <a href={user.website_url} target="_blank">
-          <img
-            className="external-link-img"
-            src={websiteImage}
-            style={{ width: '30px', margin: '5px 15px 15px 0px' }}
-            alt="external link icon"
-          />
-        </a>,
-      );
-    }
+    const userMeta = ['twitter_username', 'github_username', 'website_url'];
+    userMeta.forEach((metaProp) => {
+      if (user[metaProp]) {
+        let { className, hostUrl, srcImage, imageAltText } = userDetailsConfig[metaProp];
+        socialIcons.push(
+          <a
+            href={`${hostUrl}${user[metaProp]}`}
+            target="_blank"
+          >
+            <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 = (