Converted to FC, changed to useTranslation

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

@@ -1,47 +1,39 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+/* eslint-disable no-console */
+import React from 'react';
+import { useTranslation } from 'react-i18next';
 
-class AccessTokenSettings extends React.Component {
+function AccessTokenSettings() {
 
-  updateHandler() {
-    console.log('Update button pressed');
+  const { t } = useTranslation('admin');
+  function discardHandler() {
+    console.log('Discard button pressed');
   }
 
-  discardHandler() {
+  function generateHandler() {
     console.log('Generate button pressed');
   }
 
-  render() {
-    const { t } = this.props;
-
-    return (
-      <Fragment>
-        <div className="form-group row my-5">
-          <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>
+  return (
+    <>
+      <div className="form-group row my-5">
+        <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 className="row">
-          <div className="mx-auto">
-            <button type="button" className="btn btn-outline-secondary text-nowrap mx-1" onClick={this.discardHandler}>
-              {t('admin:slack_integration.access_token_settings.discard')}
-            </button>
-            <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={this.updateHandler}>
-              {t('admin:slack_integration.access_token_settings.generate')}
-            </button>
-          </div>
+      </div>
+
+      <div className="row">
+        <div className="mx-auto">
+          <button type="button" className="btn btn-outline-secondary text-nowrap mx-1" onClick={discardHandler}>
+            {t('slack_integration.access_token_settings.discard')}
+          </button>
+          <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={generateHandler}>
+            {t('slack_integration.access_token_settings.generate')}
+          </button>
         </div>
-      </Fragment>
-    );
-  }
-
+      </div>
+    </>
+  );
 }
 
-AccessTokenSettings.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-};
-
-export default withTranslation()(AccessTokenSettings);
+export default AccessTokenSettings;

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

@@ -1,67 +1,54 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+/* eslint-disable no-console */
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
-class CustomBotNonProxySettings extends React.Component {
+function CustomBotNonProxySettings() {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      secretState: '',
-      authState: '',
-    };
-    this.updateHandler = this.updateHandler.bind(this);
-  }
+  const { t } = useTranslation('admin');
+  const [secret, setSecret] = useState('');
+  const [token, setToken] = useState('');
 
-  updateHandler() {
-    console.log(`Signing Secret: ${this.state.secretState}, Bot User OAuth Token: ${this.state.authState}`);
+  function updateHandler() {
+    console.log(`Signing Secret: ${secret}, Bot User OAuth Token: ${token}`);
   }
 
-  render() {
-    const { t } = this.props;
-
-    return (
-      <Fragment>
-        <div className="row my-5">
-          <div className="mx-auto">
-            <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
-              {t('admin:slack_integration.non_proxy.create_bot')}
-            </button>
-          </div>
+  return (
+    <>
+      <div className="row my-5">
+        <div className="mx-auto">
+          <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
+            {t('slack_integration.non_proxy.create_bot')}
+          </button>
         </div>
-
-        <div className="form-group row">
-          <label className="text-left text-md-right col-md-3 col-form-label">Signing Secret</label>
-          <div className="col-md-6">
-            <input
-              className="form-control"
-              type="text"
-              onChange={(e) => { this.state.secretState = e.target.value }}
-            />
-          </div>
+      </div>
+
+      <div className="form-group row">
+        <label className="text-left text-md-right col-md-3 col-form-label">Signing Secret</label>
+        <div className="col-md-6">
+          <input
+            className="form-control"
+            type="text"
+            onChange={e => setSecret(e.target.value)}
+          />
         </div>
-
-        <div className="form-group row mb-5">
-          <label className="text-left text-md-right col-md-3 col-form-label">Bot User OAuth Token</label>
-          <div className="col-md-6">
-            <input
-              className="form-control"
-              type="text"
-              onChange={(e) => { this.state.authState = e.target.value }}
-            />
-          </div>
+      </div>
+
+      <div className="form-group row mb-5">
+        <label className="text-left text-md-right col-md-3 col-form-label">Bot User OAuth Token</label>
+        <div className="col-md-6">
+          <input
+            className="form-control"
+            type="text"
+            onChange={e => setToken(e.target.value)}
+          />
         </div>
+      </div>
 
-        <AdminUpdateButtonRow onClick={this.updateHandler} disabled={false} />
-      </Fragment>
-    );
-  }
-
+      <AdminUpdateButtonRow onClick={updateHandler} disabled={false} />
+    </>
+  );
 }
 
-CustomBotNonProxySettings.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-};
-
-export default withTranslation()(CustomBotNonProxySettings);
+export default CustomBotNonProxySettings;

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

@@ -1,39 +1,29 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import AccessTokenSettings from './AccessTokenSettings';
 import CustomBotNonProxySettings from './CustomBotNonProxySettings';
 
-class SlackIntegration extends React.Component {
+function SlackIntegration() {
 
-  render() {
-    const { t } = this.props;
-
-    return (
-      <Fragment>
-        <div className="row">
-          <div className="col-lg-12">
-            <h2 className="admin-setting-header">Access Token</h2>
-            <AccessTokenSettings />
-          </div>
+  const { t } = useTranslation('admin');
+  return (
+    <>
+      <div className="row">
+        <div className="col-lg-12">
+          <h2 className="admin-setting-header">Access Token</h2>
+          <AccessTokenSettings />
         </div>
+      </div>
 
-        <div className="row">
-          <div className="col-lg-12">
-            <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_non_proxy_settings')}</h2>
-            <CustomBotNonProxySettings />
-          </div>
+      <div className="row">
+        <div className="col-lg-12">
+          <h2 className="admin-setting-header">{t('slack_integration.custom_bot_non_proxy_settings')}</h2>
+          <CustomBotNonProxySettings />
         </div>
-
-      </Fragment>
-    );
-  }
-
+      </div>
+    </>
+  );
 }
 
-SlackIntegration.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-};
-
-export default withTranslation()(SlackIntegration);
+export default SlackIntegration;