Added wrapper component

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

@@ -3,44 +3,53 @@ import { Collapse } from 'reactstrap';
 import PropTypes from 'prop-types';
 
 const BotSettingsAccordion = (props) => {
-  if (props.onToggleAccordionHandler != null) {
-    onToggleAccordionHandler = props.onToggleAccordionHandler;
-  }  
-
   return (
     <div className="card border-0 rounded-lg shadow overflow-hidden">
+      {props.children}
+    </div>
+  );
+};
 
-      <div className="card border-0 rounded-lg mb-0">
-        <div
-          className="card-header font-weight-normal py-3 d-flex justify-content-between"
-          role="button"
-          onClick={onToggleAccordionHandler}
-        >
-          <p className="mb-0 text-primary"><span className="mr-2">①</span>{props.title}</p>
-          {props.isActive
-            ? <i className="fa fa-chevron-up" />
-            : <i className="fa fa-chevron-down" />
-          }
-        </div>
-        <Collapse isOpen={props.isActive}>
-          <div className="card-body">
-            {props.children}
-          </div>
-        </Collapse>
-      </div>
-
-
+const BotSettingsAccordionItem = (props) => {
+  const onToggleAccordionHandler = () => {
+    if (props.onToggleAccordionHandler != null) {
+      props.onToggleAccordionHandler();
+    }
+  };
 
+  return (
+    <div className="card border-0 rounded-lg mb-0">
+      <div
+        className="card-header font-weight-normal py-3 d-flex justify-content-between"
+        role="button"
+        onClick={onToggleAccordionHandler}
+      >
+        <p className="mb-0 text-primary">{props.title}</p>
+        {props.isActive
+          ? <i className="fa fa-chevron-up" />
+          : <i className="fa fa-chevron-down" />
+        }
+      </div>
+      <Collapse isOpen={props.isActive}>
+        <div className="card-body">
+          {props.children}
+        </div>
+      </Collapse>
     </div>
   );
-
 };
 
-BotSettingsAccordion.propTypes = {
+BotSettingsAccordion.item = BotSettingsAccordionItem;
+
+BotSettingsAccordionItem.propTypes = {
   isActive: PropTypes.bool,
   title: PropTypes.string.isRequired,
   children: PropTypes.element.isRequired,
   onToggleAccordionHandler: PropTypes.func,
 };
 
+BotSettingsAccordion.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
 export default BotSettingsAccordion;

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

@@ -7,125 +7,146 @@ const CustomBotWithoutSettingsAccordion = () => {
   const { t } = useTranslation('admin');
   const [openAccordionIndexes, setOpenAccordionIndexes] = useState(new Set());
 
-  const onToggleAccordionHandler = (i) => {
-    const accordionIndexes = new Set(openAccordionIndexes);
-    if (accordionIndexes.has(i)) {
-      accordionIndexes.delete(i);
-    }
-    else {
-      accordionIndexes.add(i);
-    }
-    setOpenAccordionIndexes(accordionIndexes);
-  };
+  // const onToggleAccordionHandler = (i) => {
+  //   const accordionIndexes = new Set(openAccordionIndexes);
+  //   if (accordionIndexes.has(i)) {
+  //     accordionIndexes.delete(i);
+  //   }
+  //   else {
+  //     accordionIndexes.add(i);
+  //   }
+  //   setOpenAccordionIndexes(accordionIndexes);
+  // };
+
+  const [isActive, setIsActive] = useState(false)
+
+  const onToggleAccordionHandler = () => {
+    setIsActive(prevState => !prevState);
+  }
 
   return (
-
-    <BotSettingsAccordion
-      isActive={false}
-      title="asdfasdfasdf"
-    >
-      ボディー
-    </BotSettingsAccordion>
-
-    <div className="card border-0 rounded-lg shadow overflow-hidden">
-
-      <div className="card border-0 rounded-lg mb-0">
-        <div
-          className="card-header font-weight-normal py-3 d-flex justify-content-between"
-          role="button"
-          onClick={() => onToggleAccordionHandler(0)}
-        >
-          <p className="mb-0 text-primary"><span className="mr-2">①</span>{t('slack_integration.without_proxy.create_bot')}</p>
-          {openAccordionIndexes.has(0)
-            ? <i className="fa fa-chevron-up" />
-            : <i className="fa fa-chevron-down" />
-          }
-        </div>
-        <Collapse isOpen={openAccordionIndexes.has(0)}>
-          <div className="card-body">
-
-            <div className="row my-5">
-              <div className="mx-auto">
-                <div>
-                  <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
-                    {t('slack_integration.without_proxy.create_bot')}
-                    <i className="fa fa-external-link ml-2" aria-hidden="true" />
-                  </button>
-                </div>
-                {/* TODO: Insert DOCS link */}
-                <a href="#">
-                  <p className="text-center mt-1">
-                    <small>
-                      {t('slack_integration.without_proxy.how_to_create_a_bot')}
+    <>
+      <BotSettingsAccordion
+        isActive={isActive}
+        title="asdfasdfasdf"
+        onToggleAccordionHandler={onToggleAccordionHandler}
+      >
+        ボディー
+      </BotSettingsAccordion>
+      <BotSettingsAccordion
+        isActive={isActive}
+        title="asdfasdfasdf"
+        onToggleAccordionHandler={onToggleAccordionHandler}
+      >
+        ボディー
+      </BotSettingsAccordion>
+      <BotSettingsAccordion
+        isActive={isActive}
+        title="asdfasdfasdf"
+        onToggleAccordionHandler={onToggleAccordionHandler}
+      >
+        ボディー
+      </BotSettingsAccordion>
+
+      <div className="card border-0 rounded-lg shadow overflow-hidden">
+
+        <div className="card border-0 rounded-lg mb-0">
+          <div
+            className="card-header font-weight-normal py-3 d-flex justify-content-between"
+            role="button"
+            onClick={() => onToggleAccordionHandler(0)}
+          >
+            <p className="mb-0 text-primary"><span className="mr-2">①</span>{t('slack_integration.without_proxy.create_bot')}</p>
+            {openAccordionIndexes.has(0)
+              ? <i className="fa fa-chevron-up" />
+              : <i className="fa fa-chevron-down" />
+            }
+          </div>
+          <Collapse isOpen={openAccordionIndexes.has(0)}>
+            <div className="card-body">
+
+              <div className="row my-5">
+                <div className="mx-auto">
+                  <div>
+                    <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
+                      {t('slack_integration.without_proxy.create_bot')}
                       <i className="fa fa-external-link ml-2" aria-hidden="true" />
-                    </small>
-                  </p>
-                </a>
+                    </button>
+                  </div>
+                  {/* TODO: Insert DOCS link */}
+                  <a href="#">
+                    <p className="text-center mt-1">
+                      <small>
+                        {t('slack_integration.without_proxy.how_to_create_a_bot')}
+                        <i className="fa fa-external-link ml-2" aria-hidden="true" />
+                      </small>
+                    </p>
+                  </a>
+                </div>
               </div>
             </div>
-          </div>
-        </Collapse>
-      </div>
-
-      <div className="card border-0 rounded-lg mb-0">
-        <div
-          className="card-header font-weight-normal py-3 d-flex justify-content-between"
-          role="button"
-          onClick={() => onToggleAccordionHandler(1)}
-        >
-          <p className="mb-0 text-primary"><span className="mr-2">②</span>{t('slack_integration.without_proxy.install_bot_to_slack')}</p>
-          {openAccordionIndexes.has(1)
-            ? <i className="fa fa-chevron-up" />
-            : <i className="fa fa-chevron-down" />
-          }
+          </Collapse>
         </div>
-        <Collapse isOpen={openAccordionIndexes.has(1)}>
-          <div className="card-body">
-            BODY2
-          </div>
-        </Collapse>
-      </div>
 
-      <div className="card border-0 rounded-lg mb-0">
-        <div
-          className="card-header font-weight-normal py-3 d-flex justify-content-between"
-          role="button"
-          onClick={() => onToggleAccordionHandler(2)}
-        >
-          <p className="mb-0 text-primary"><span className="mr-2">③</span>{t('slack_integration.without_proxy.register_secret_and_token')}</p>
-          {openAccordionIndexes.has(2)
-            ? <i className="fa fa-chevron-up" />
-            : <i className="fa fa-chevron-down" />
-          }
-        </div>
-        <Collapse isOpen={openAccordionIndexes.has(2)}>
-          <div className="card-body">
-            BODY 3
+        <div className="card border-0 rounded-lg mb-0">
+          <div
+            className="card-header font-weight-normal py-3 d-flex justify-content-between"
+            role="button"
+            onClick={() => onToggleAccordionHandler(1)}
+          >
+            <p className="mb-0 text-primary"><span className="mr-2">②</span>{t('slack_integration.without_proxy.install_bot_to_slack')}</p>
+            {openAccordionIndexes.has(1)
+              ? <i className="fa fa-chevron-up" />
+              : <i className="fa fa-chevron-down" />
+            }
           </div>
-        </Collapse>
-      </div>
-
-      <div className="card border-0 rounded-lg mb-0">
-        <div
-          className="card-header font-weight-normal py-3 d-flex justify-content-between"
-          role="button"
-          onClick={() => onToggleAccordionHandler(3)}
-        >
-          <p className="mb-0 text-primary"><span className="mr-2">④</span>{t('slack_integration.without_proxy.test_connection')}</p>
-          {openAccordionIndexes.has(3)
-            ? <i className="fa fa-chevron-up" />
-            : <i className="fa fa-chevron-down" />
-          }
+          <Collapse isOpen={openAccordionIndexes.has(1)}>
+            <div className="card-body">
+              BODY2
+            </div>
+          </Collapse>
         </div>
-        <Collapse isOpen={openAccordionIndexes.has(3)}>
-          <div className="card-body">
-            BODY 4
+
+        <div className="card border-0 rounded-lg mb-0">
+          <div
+            className="card-header font-weight-normal py-3 d-flex justify-content-between"
+            role="button"
+            onClick={() => onToggleAccordionHandler(2)}
+          >
+            <p className="mb-0 text-primary"><span className="mr-2">③</span>{t('slack_integration.without_proxy.register_secret_and_token')}</p>
+            {openAccordionIndexes.has(2)
+              ? <i className="fa fa-chevron-up" />
+              : <i className="fa fa-chevron-down" />
+            }
           </div>
-        </Collapse>
-      </div>
+          <Collapse isOpen={openAccordionIndexes.has(2)}>
+            <div className="card-body">
+              BODY 3
+            </div>
+          </Collapse>
+        </div>
 
-    </div>
+        <div className="card border-0 rounded-lg mb-0">
+          <div
+            className="card-header font-weight-normal py-3 d-flex justify-content-between"
+            role="button"
+            onClick={() => onToggleAccordionHandler(3)}
+          >
+            <p className="mb-0 text-primary"><span className="mr-2">④</span>{t('slack_integration.without_proxy.test_connection')}</p>
+            {openAccordionIndexes.has(3)
+              ? <i className="fa fa-chevron-up" />
+              : <i className="fa fa-chevron-down" />
+            }
+          </div>
+          <Collapse isOpen={openAccordionIndexes.has(3)}>
+            <div className="card-body">
+              BODY 4
+            </div>
+          </Collapse>
+        </div>
 
+      </div>
+    </>
 
   );