Made component AccessTokenSettings.jsx

src/client/js/components/Admin/SlackIntegration/AccessTokenSettings.jsx

@@ -0,0 +1,40 @@
+import React, { Fragment } from 'react';
+
+class AccessTokenSettings extends React.Component {
+
+  updateHandler() {
+    console.log('Update button pressed');
+  }
+
+  discardHandler() {
+    console.log('Discard button pressed');
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <div className="form-group row">
+          {/* <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.site_name')}</label> */}
+          <label className="text-left text-md-right col-md-3 col-form-label">Access Token</label>
+          <div className="col-md-6">
+            <input className="form-control" type="text" placeholder="access-token" />
+          </div>
+        </div>
+
+        <div className="row my-3">
+          <div className="offset-4 col-5">
+            <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={this.updateHandler}>
+              Update
+            </button>
+            <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={this.discardHandler}>
+              Discard
+            </button>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+
+}
+
+export default AccessTokenSettings;

src/client/js/components/Admin/SlackIntegration/SlackIntegration.jsx

@@ -3,15 +3,10 @@ import React, { Fragment } from 'react';
 
 // import { withUnstatedContainers } from '../../UnstatedUtils';
 // import AppContainer from '../../../services/AppContainer';
-class SlackIntegration extends React.Component {
 
-  updateHandler() {
-    console.log('Update button pressed');
-  }
+import AccessTokenSettings from './AccessTokenSettings';
 
-  discardHandler() {
-    console.log('Discard button pressed');
-  }
+class SlackIntegration extends React.Component {
 
   render() {
     // const { t } = this.props;
@@ -23,25 +18,8 @@ class SlackIntegration extends React.Component {
             {/* <h2 className="admin-setting-header">{t('Access Token')}</h2> */}
             <h2 className="admin-setting-header">Access Token</h2>
 
-            <div className="form-group row">
-              {/* <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.site_name')}</label> */}
-              <label className="text-left text-md-right col-md-3 col-form-label">Access Token</label>
-              <div className="col-md-6">
-                <input className="form-control" type="text" placeholder="access-token" />
-              </div>
-            </div>
-
-            <div className="row my-3">
-              <div className="offset-4 col-5">
-                <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={this.updateHandler}>
-                  Update
-                </button>
-                <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={this.discardHandler}>
-                  Discard
-                </button>
-              </div>
-
-            </div>
+            <AccessTokenSettings />
+
           </div>
         </div>
       </Fragment>