parents have state, delete children state

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

@@ -52,6 +52,7 @@ const CustomBotWithoutProxySettings = (props) => {
         slackBotToken,
         botType,
       });
+      props.onChangeRenderer();
       toastSuccess(t('toaster.update_successed', { target: t('admin:slack_integration.custom_bot_without_proxy_settings') }));
     }
     catch (err) {
@@ -63,7 +64,10 @@ const CustomBotWithoutProxySettings = (props) => {
     <>
       <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_without_proxy_settings')}</h2>
       {/* temporarily put bellow component */}
-      <SlackGrowiBridging />
+      <SlackGrowiBridging
+        siteName={siteName}
+        slackWorkSpaceName={props.slackWorkSpaceName}
+      />
       <div className="row my-5">
         <div className="mx-auto">
           <button
@@ -146,6 +150,8 @@ const CustomBotWithoutProxySettingsWrapper = withUnstatedContainers(CustomBotWit
 CustomBotWithoutProxySettings.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
+  slackWorkSpaceName: PropTypes.string,
+  onChangeRenderer: PropTypes.func.isRequired,
 };
 
 export default CustomBotWithoutProxySettingsWrapper;

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

@@ -1,59 +1,17 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { withUnstatedContainers } from '../../UnstatedUtils';
-import { toastError } from '../../../util/apiNotification';
-
-
-import AppContainer from '../../../services/AppContainer';
-import AdminAppContainer from '../../../services/AdminAppContainer';
-
 
 const SlackGrowiBridging = (props) => {
-  const { WebClient, LogLevel } = require('@slack/web-api');
-  const { adminAppContainer } = props;
-  const [siteName, setSiteName] = useState('');
-
-  const checkSlackGrowiCommunication = function() {
-    return new Promise((resolve, reject) => {
-      const client = new WebClient('xoxb-1399660543842-1848670292404-I6OLidkKzn4WPF34ezWmE56r', {
-        logLevel: LogLevel.DEBUG,
-      });
-      client.chat.postMessage({ text: 'hoge', channel: 'C01BAT2LXHV' }, (err, res) => {
-        if (err) {
-          return reject(err);
-        }
-        resolve(res);
-      });
-    });
-  };
-
-  const fetchData = useCallback(async() => {
-    try {
-      await adminAppContainer.retrieveAppSettingsData();
-      setSiteName(adminAppContainer.state.title);
-      checkSlackGrowiCommunication();
-
-    }
-    catch (err) {
-      toastError(err);
-    }
-  }, [adminAppContainer]);
-
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-
-
   return (
     <>
-      {siteName}
+      {props.slackWorkSpaceName}{props.siteName}
     </>
   );
 };
-const SlackGrowiBridgingWrapper = withUnstatedContainers(SlackGrowiBridging, [AppContainer, AdminAppContainer]);
 
 SlackGrowiBridging.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer),
-  adminAppContainer: PropTypes.instanceOf(AdminAppContainer),
+  slackWorkSpaceName: PropTypes.string,
+  siteName: PropTypes.string,
 };
-export default SlackGrowiBridgingWrapper;
+
+export default SlackGrowiBridging;

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

@@ -1,14 +1,33 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
 
 import AccessTokenSettings from './AccessTokenSettings';
 import OfficialBotSettings from './OfficialBotSettings';
 import CustomBotWithoutProxySettings from './CustomBotWithoutProxySettings';
 import CustomBotWithProxySettings from './CustomBotWithProxySettings';
 import ConfirmBotChangeModal from './ConfirmBotChangeModal';
+import { withUnstatedContainers } from '../../UnstatedUtils';
+import { toastError } from '../../../util/apiNotification';
+
+import AppContainer from '../../../services/AppContainer';
+import AdminAppContainer from '../../../services/AdminAppContainer';
+
+const SlackIntegration = (props) => {
+  const { appContainer } = props;
 
-const SlackIntegration = () => {
   const [currentBotType, setCurrentBotType] = useState(null);
   const [selectedBotType, setSelectedBotType] = useState(null);
+  const [slackWorkSpaceName, setSlackWorkSpaceName] = useState(null);
+
+  const getSlackWSInWithoutProxy = useCallback(async() => {
+    try {
+      const res = await appContainer.apiv3.get('/slack-integration/custom-bot-without-proxy-slack-workspace');
+      setSlackWorkSpaceName(res.data.slackWorkSpaceName);
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }, [appContainer]);
 
   const handleBotTypeSelect = (clickedBotType) => {
     if (clickedBotType === currentBotType) {
@@ -19,6 +38,7 @@ const SlackIntegration = () => {
       return;
     }
     setSelectedBotType(clickedBotType);
+    getSlackWSInWithoutProxy();
   };
 
   const handleCancelBotChange = () => {
@@ -37,7 +57,12 @@ const SlackIntegration = () => {
       settingsComponent = <OfficialBotSettings />;
       break;
     case 'custom-bot-without-proxy':
-      settingsComponent = <CustomBotWithoutProxySettings />;
+      settingsComponent = (
+        <CustomBotWithoutProxySettings
+          onChangeRenderer={getSlackWSInWithoutProxy}
+          slackWorkSpaceName={slackWorkSpaceName}
+        />
+      );
       break;
     case 'custom-bot-with-proxy':
       settingsComponent = <CustomBotWithProxySettings />;
@@ -101,5 +126,11 @@ const SlackIntegration = () => {
     </>
   );
 };
+const SlackIntegrationWrapper = withUnstatedContainers(SlackIntegration, [AppContainer, AdminAppContainer]);
 
-export default SlackIntegration;
+SlackIntegration.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer),
+  adminAppContainer: PropTypes.instanceOf(AdminAppContainer),
+  onChangeRenderer: PropTypes.func,
+};
+export default SlackIntegrationWrapper;