Merge pull request #3707 from weseek/5862-2-multiple-accordions

5862 2 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,9 +12,22 @@ const CustomBotWithProxySettings = (props) => {
   const { appContainer, adminAppContainer } = props;
   const { t } = useTranslation();
 
+  // 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,
+    );
+  };
+
   return (
     <>
-
       <h2 className="admin-setting-header mb-2">{t('admin:slack_integration.custom_bot_with_proxy_integration')}</h2>
 
       {/* TODO delete tmp props */}
@@ -25,17 +38,35 @@ const CustomBotWithProxySettings = (props) => {
       />
       <h2 className="admin-setting-header">{t('admin:slack_integration.cooperation_procedure')}</h2>
       <div className="mx-3">
-        <div className="d-flex flex-column pull-right">
+
+        {/* // TODO: Multiple accordion logic */}
+        {Array(...Array(accordionComponentsCount)).map(i => (
+          <>
+            <div className="d-flex justify-content-end">
+              <button
+                className="my-3 btn btn-outline-danger"
+                type="button"
+                onClick={deleteAccordionHandler}
+              >
+                <i className="icon-trash mr-1" />
+                {t('admin:slack_integration.delete')}
+              </button>
+            </div>
+            <CustomBotWithProxySettingsAccordion key={i} />
+          </>
+        ))}
+
+        {/* TODO: Disable button when integration is incomplete */}
+        {/* TODO: i18n */}
+        <div className="row justify-content-center my-5">
           <button
-            className="my-3 btn btn-outline-danger"
             type="button"
-          ><i className="icon-trash mr-1" />{t('admin:slack_integration.delete')}
+            className="btn btn-outline-primary"
+            onClick={addAccordionHandler}
+          >
+            + Slackワークスペースを追加
           </button>
         </div>
-
-        <div className="d-flex flex-column my-5 w-100">
-          <CustomBotWithProxySettingsAccordion />
-        </div>
       </div>
     </>
   );