refactor CustomBotWithProxySettings

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

@@ -14,14 +14,11 @@ import DeleteSlackBotSettingsModal from './DeleteSlackBotSettingsModal';
 const logger = loggerFactory('growi:SlackBotSettings');
 
 const CustomBotWithProxySettings = (props) => {
-  const { appContainer } = props;
+  const { appContainer, slackAppIntegrations } = props;
   const [isDeleteConfirmModalShown, setIsDeleteConfirmModalShown] = useState(false);
   const [proxyUri, setProxyUri] = useState(null);
 
   const { t } = useTranslation();
-  // TODO: Multiple accordion logic
-  const [tokenPtoG, setTokenPtoG] = useState(null);
-  const [tokenGtoP, setTokenGtoP] = useState(null);
 
   const retrieveProxyUri = useCallback(async() => {
     try {
@@ -39,25 +36,13 @@ const CustomBotWithProxySettings = (props) => {
     retrieveProxyUri();
   }, [retrieveProxyUri]);
 
-  // TODO: Multiple accordion logic
-  const [accordionComponentsCount, setAccordionComponentsCount] = useState(0);
-  const addAccordionHandler = () => {
-    setAccordionComponentsCount(
-      prevState => prevState + 1,
-    );
-  };
-  // TODO: Delete accordion logic
-  const deleteAccordionHandler = () => {
-    setAccordionComponentsCount(
-      prevState => prevState - 1,
-    );
+  const addSlackAppIntegrationHandler = async() => {
+    // TODO implement
   };
 
-  const discardTokenHandler = async() => {
+  const discardTokenHandler = async(tokenGtoP, tokenPtoG) => {
     try {
       await appContainer.apiv3.delete('/slack-integration-settings/slack-app-integration', { tokenGtoP, tokenPtoG });
-      setTokenGtoP(null);
-      setTokenPtoG(null);
     }
     catch (err) {
       toastError(err);
@@ -67,9 +52,7 @@ const CustomBotWithProxySettings = (props) => {
 
   const generateTokenHandler = async() => {
     try {
-      const { data: { tokenGtoP, tokenPtoG } } = await appContainer.apiv3.put('/slack-integration-settings/access-tokens');
-      setTokenGtoP(tokenGtoP);
-      setTokenPtoG(tokenPtoG);
+      await appContainer.apiv3.put('/slack-integration-settings/access-tokens');
     }
     catch (err) {
       toastError(err);
@@ -81,9 +64,7 @@ const CustomBotWithProxySettings = (props) => {
   const deleteSlackSettingsHandler = async() => {
     try {
       // TODO imple delete PtoG and GtoP Token at GW 5861
-      await appContainer.apiv3.put('/slack-integration-settings/custom-bot-with-proxy', {
-      });
-      deleteAccordionHandler();
+      await appContainer.apiv3.put('/slack-integration-settings/custom-bot-with-proxy');
       toastSuccess('success');
     }
     catch (err) {
@@ -144,38 +125,36 @@ const CustomBotWithProxySettings = (props) => {
 
       <h2 className="admin-setting-header">{t('admin:slack_integration.integration_procedure')}</h2>
       <div className="mx-3">
+        {slackAppIntegrations.map((slackAppIntegration) => {
+          const { tokenGtoP, tokenPtoG } = slackAppIntegration;
+          return (
+            <React.Fragment key={slackAppIntegration.id}>
+              <div className="d-flex justify-content-end">
+                <button
+                  className="my-3 btn btn-outline-danger"
+                  type="button"
+                  onClick={() => setIsDeleteConfirmModalShown(true)}
+                >
+                  <i className="icon-trash mr-1" />
+                  {t('admin:slack_integration.delete')}
+                </button>
+              </div>
+              <WithProxyAccordions
+                botType="customBotWithProxy"
+                discardTokenHandler={() => discardTokenHandler(tokenGtoP, tokenPtoG)}
+                generateTokenHandler={generateTokenHandler}
+                tokenGtoP={tokenGtoP}
+                tokenPtoG={tokenPtoG}
+              />
+            </React.Fragment>
+        );
+          })}
 
-        {/* TODO: Multiple accordion logic */}
-        {/* TODO: Undefined key fix */}
-        {Array(...Array(accordionComponentsCount)).map(i => (
-          <React.Fragment key={i}>
-            <div className="d-flex justify-content-end">
-              <button
-                className="my-3 btn btn-outline-danger"
-                type="button"
-                onClick={() => setIsDeleteConfirmModalShown(true)}
-              >
-                <i className="icon-trash mr-1" />
-                {t('admin:slack_integration.delete')}
-              </button>
-            </div>
-            <WithProxyAccordions
-              botType="customBotWithProxy"
-              discardTokenHandler={discardTokenHandler}
-              generateTokenHandler={generateTokenHandler}
-              tokenPtoG={tokenPtoG}
-              tokenGtoP={tokenGtoP}
-            />
-          </React.Fragment>
-        ))}
-
-        {/* TODO: Disable button when integration is incomplete */}
-        {/* TODO: i18n */}
         <div className="row justify-content-center my-5">
           <button
             type="button"
             className="btn btn-outline-primary"
-            onClick={addAccordionHandler}
+            onClick={addSlackAppIntegrationHandler}
           >
             {`+ ${t('admin:slack_integration.accordion.add_slack_workspace')}`}
           </button>
@@ -195,6 +174,8 @@ const CustomBotWithProxySettingsWrapper = withUnstatedContainers(CustomBotWithPr
 
 CustomBotWithProxySettings.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  slackAppIntegrations: PropTypes.array.isRequired,
 };
 
 export default CustomBotWithProxySettingsWrapper;

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

@@ -27,13 +27,14 @@ const SlackIntegration = (props) => {
   const [isSendTestMessage, setIsSendTestMessage] = useState(false);
   const [slackWSNameInWithoutProxy, setSlackWSNameInWithoutProxy] = useState(null);
   const [isDeleteConfirmModalShown, setIsDeleteConfirmModalShown] = useState(false);
+  const [slackAppIntegrations, setSlackAppIntegrations] = useState([]);
 
 
   const fetchSlackIntegrationData = useCallback(async() => {
     try {
       const { data } = await appContainer.apiv3.get('/slack-integration-settings');
       const {
-        slackSigningSecret, slackBotToken, slackSigningSecretEnvVars, slackBotTokenEnvVars,
+        slackSigningSecret, slackBotToken, slackSigningSecretEnvVars, slackBotTokenEnvVars, slackAppIntegrations,
       } = data.settings;
 
       if (data.connectionStatuses != null) {
@@ -47,6 +48,7 @@ const SlackIntegration = (props) => {
       setSlackBotToken(slackBotToken);
       setSlackSigningSecretEnv(slackSigningSecretEnvVars);
       setSlackBotTokenEnv(slackBotTokenEnvVars);
+      setSlackAppIntegrations(slackAppIntegrations);
     }
     catch (err) {
       toastError(err);
@@ -120,7 +122,7 @@ const SlackIntegration = (props) => {
 
   switch (currentBotType) {
     case 'officialBot':
-      settingsComponent = <OfficialBotSettings />;
+      settingsComponent = <OfficialBotSettings slackAppIntegrations={slackAppIntegrations} />;
       break;
     case 'customBotWithoutProxy':
       settingsComponent = (
@@ -141,7 +143,7 @@ const SlackIntegration = (props) => {
       );
       break;
     case 'customBotWithProxy':
-      settingsComponent = <CustomBotWithProxySettings />;
+      settingsComponent = <CustomBotWithProxySettings slackAppIntegrations={slackAppIntegrations} />;
       break;
   }