Lifted state up

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import AppContainer from '../../../services/AppContainer';
@@ -6,39 +6,26 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 const AccessTokenSettings = (props) => {
-  const { appContainer } = props;
   const { t } = useTranslation('admin');
 
-  const [accessToken, setAccessToken] = useState('');
-
-  const generateTokenHandler = async() => {
-    try {
-      const res = await appContainer.apiv3.put('slack-integration/access-token');
-      setAccessToken(res.data.accessToken);
-    }
-    catch (err) {
-      toastError(err);
+  const discardTokenHandler = () => {
+    if (props.discardTokenHandler != null) {
+      props.discardTokenHandler();
     }
-  };
+  }
 
-  const discardTokenHandler = async() => {
-    try {
-      const res = await appContainer.apiv3.put('slack-integration/access-token', { deleteAccessToken: true });
-      setAccessToken(res.data.accessToken);
-      toastSuccess(t('slack_integration.bot_reset_successful'));
+  const generateTokenHandler = () => {
+    if (props.generateTokenHandler != null) {
+      props.generateTokenHandler();
     }
-    catch (err) {
-      toastError(err);
-    }
-  };
+  }
 
   const textboxClickHandler = (e) => {
     e.target.select();
-    if (accessToken) {
-      navigator.clipboard.writeText(accessToken)
+    if (props.accessToken != null) {
+      navigator.clipboard.writeText(props.accessToken)
         .then(() => { toastSuccess('slack_integration.copied_to_clipboard') });
     }
-
   };
 
   return (
@@ -50,7 +37,7 @@ const AccessTokenSettings = (props) => {
         <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" value={accessToken} onClick={e => textboxClickHandler(e)} readOnly />
+            <input className="form-control" type="text" value={props.accessToken} onClick={e => textboxClickHandler(e)} readOnly />
           </div>
         </div>
 
@@ -74,6 +61,9 @@ const AccessTokenSettingsWrapper = withUnstatedContainers(AccessTokenSettings, [
 
 AccessTokenSettings.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  accessToken: PropTypes.string,
+  discardTokenHandler: PropTypes.func,
+  generateTokenHandler: PropTypes.func,
 };
 
 export default AccessTokenSettingsWrapper;

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

@@ -16,6 +16,7 @@ const SlackIntegration = (props) => {
   const { t } = useTranslation();
   const [currentBotType, setCurrentBotType] = useState(null);
   const [selectedBotType, setSelectedBotType] = useState(null);
+  const [accessToken, setAccessToken] = useState('');
 
   const fetchData = useCallback(async() => {
     try {
@@ -63,6 +64,27 @@ const SlackIntegration = (props) => {
     }
   };
 
+  const generateTokenHandler = async() => {
+    try {
+      const res = await appContainer.apiv3.put('slack-integration/access-token');
+      setAccessToken(res.data.accessToken);
+    }
+    catch (err) {
+      toastError(err);
+    }
+  };
+
+  const discardTokenHandler = async() => {
+    try {
+      const res = await appContainer.apiv3.put('slack-integration/access-token', { deleteAccessToken: true });
+      setAccessToken(res.data.accessToken);
+      toastSuccess(t('slack_integration.bot_reset_successful'));
+    }
+    catch (err) {
+      toastError(err);
+    }
+  };
+
   let settingsComponent = null;
 
   switch (currentBotType) {
@@ -87,7 +109,11 @@ const SlackIntegration = (props) => {
         />
       </div>
 
-      <AccessTokenSettings />
+      <AccessTokenSettings
+        accessToken={accessToken}
+        discardTokenHandler={discardTokenHandler}
+        generateTokenHandler={generateTokenHandler}
+      />
 
       <div className="row my-5">
         <div className="card-deck mx-auto">