From 65394cb8ccd910d598f499fa211c999e9290b2af Mon Sep 17 00:00:00 2001
From: Aswathprabhu <15tucs026@skct.edu.in>
Date: Tue, 1 Oct 2019 21:35:57 +0530
Subject: [PATCH] Refactoring articleForm.jsx removes code duplication (#4159)

---
 app/javascript/article-form/articleForm.jsx | 55 +++++++++++++--------
 1 file changed, 34 insertions(+), 21 deletions(-)

diff --git a/app/javascript/article-form/articleForm.jsx b/app/javascript/article-form/articleForm.jsx
index 55d17bdd7..b71b7701e 100644
--- a/app/javascript/article-form/articleForm.jsx
+++ b/app/javascript/article-form/articleForm.jsx
@@ -18,6 +18,18 @@ import Errors from './elements/errors';
 import KeyboardShortcutsHandler from './elements/keyboardShortcutsHandler';
 import Tags from '../shared/components/tags';
 
+const setupImageButton = ({ className = '', imgSrc, imgAltText = '', onClickCallback }) => {
+  return (
+    <button
+    type="button"
+    className={className}
+    onClick={onClickCallback}
+    >
+      <img src={imgSrc} alt={imgAltText} />
+    </button>
+  )
+}
+
 export default class ArticleForm extends Component {
   static handleGistPreview() {
     const els = document.getElementsByClassName('ltag_gist-liquid-tag');
@@ -383,13 +395,12 @@ export default class ArticleForm extends Component {
       let moreConfigBottomButton = '';
       if (version === 'v2') {
         moreConfigBottomButton = (
-          <button
-            type="button"
-            className="articleform__detailsButton articleform__detailsButton--moreconfig articleform__detailsButton--bottom"
-            onClick={this.toggleMoreConfig}
-          >
-            <img src={ThreeDotsIcon} alt="menu dots" />
-          </button>
+          setupImageButton({
+            className: 'articleform__detailsButton articleform__detailsButton--moreconfig articleform__detailsButton--bottom',
+            imgSrc: ThreeDotsIcon,
+            imgAltText: 'menu dots',
+            onClickCallback: this.toggleMoreConfig
+          })
         );
         controls = (
           <div
@@ -407,20 +418,22 @@ export default class ArticleForm extends Component {
                 maxTags={4}
                 classPrefix={`articleform`}
               />
-              <button
-                className="articleform__detailsButton articleform__detailsButton--image"
-                onClick={this.toggleImageManagement}
-                type="button"
-              >
-                <img src={ImageUploadIcon} alt="Upload images" />
-              </button>
-              <button
-                className="articleform__detailsButton articleform__detailsButton--moreconfig"
-                onClick={this.toggleMoreConfig}
-                type="button"
-              >
-                <img src={ThreeDotsIcon} alt="Menu" />
-              </button>
+              {
+                setupImageButton({
+                  className: 'articleform__detailsButton articleform__detailsButton--image',
+                  imgSrc: ImageUploadIcon,
+                  imgAltText: 'Upload images',
+                  onClickCallback: this.toggleImageManagement
+                })
+              }
+              {
+                setupImageButton({
+                  className: 'articleform__detailsButton articleform__detailsButton--moreconfig',
+                  imgSrc: ThreeDotsIcon,
+                  imgAltText: 'Menu',
+                  onClickCallback: this.toggleMoreConfig
+                })
+              }
             </div>
           </div>
         );