add multiple accordions

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import AppContainer from '../../../services/AppContainer';
@@ -12,6 +12,14 @@ const CustomBotWithProxySettings = (props) => {
   const { appContainer, adminAppContainer } = props;
   const { t } = useTranslation();
 
+  // TODO: Multiple accordion logic
+  const [accordionComponentsArray, setAccordionComponentArray] = useState(0);
+  const addAccordionHandler = () => {
+    setAccordionComponentArray(
+      prevState => prevState + 1,
+    );
+  };
+
   return (
     <>
       <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_with_proxy_integration')}</h2>
@@ -22,19 +30,22 @@ const CustomBotWithProxySettings = (props) => {
         slackWSNameInWithProxy="SlackWorkSpaceName"
         isSlackScopeSet
       />
+      {accordionComponentsArray.map(() => (
+        <div className="my-5 mx-3">
+          <CustomBotWithProxySettingsAccordion />
+        </div>
+      ))
 
-      <div className="my-5 mx-3">
-        <CustomBotWithProxySettingsAccordion />
-      </div>
+      }
 
-      {/* TODO: No accordion by default */}
-      {/* TODO: Change color when integration is incomplete */}
-      <div className="row my-5 mx-auto">
+      {/* TODO: Disable when integration is incomplete */}
+      <div className="row justify-content-center my-5">
         <button
           type="button"
           className="btn btn-outline-primary"
+          onClick={addAccordionHandler}
         >
-        + Slackワークスペースを追加
+          + Slackワークスペースを追加
         </button>
       </div>
     </>