wip added accordion function

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

@@ -1,26 +1,24 @@
 import React from 'react';
 import { Collapse } from 'reactstrap';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
 
 const Group = ({ children }) => (
   <div className="card border-0 rounded-lg mb-0">{ children }</div>
-)
+);
 
 const Header = ({ children }) => (
-  const { t } = useTranslation();
   <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>
+    <p className="mb-0 text-primary"><span className="mr-2">①</span>{ children }</p>
     {currentlyOpenAccordionIndexes.includes(0)
       ? <i className="fa fa-chevron-up" />
       : <i className="fa fa-chevron-down" />
     }
   </div>
-)
+);
 
 const Body = ({ children }) => (
   <Collapse isOpen={currentlyOpenAccordionIndexes.includes(0)}>
@@ -28,18 +26,28 @@ const Body = ({ children }) => (
       { children }
     </div>
   </Collapse>
-)
+);
 
 const BotSettingsAccordion = ({ children, currentlyOpenAccordionIndexes }) => {
 
+  const onToggleAccordionHandler = (i) => {
+    const accordionIndexes = new Set(openAccordionIndexes);
+    if (accordionIndexes.has(i)) {
+      accordionIndexes.delete(i);
+    }
+    else {
+      accordionIndexes.add(i);
+    }
+    setOpenAccordionIndexes(accordionIndexes);
+  };
 
   return (
     <div className="card border-0 rounded-lg shadow overflow-hidden">
       { children }
     </div>
-  )
+  );
 
-}
+};
 
 BotSettingsAccordion.Group = Group;
 BotSettingsAccordion.Header = Header;
@@ -47,19 +55,22 @@ BotSettingsAccordion.Body = Body;
 
 Group.propTypes = {
   children: PropTypes.element,
-}
+};
 
 Header.propTypes = {
   children: PropTypes.element,
-}
+};
 
 Body.propTypes = {
   children: PropTypes.element,
-}
+};
 
 BotSettingsAccordion.propTypes = {
   children: PropTypes.element,
   currentlyOpenAccordionIndexes: PropTypes.object,
-}
+};
 
 export default BotSettingsAccordion;
+
+
+// Groupの数に応じて増える数字を書く