used set obj

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

@@ -4,15 +4,17 @@ import { Collapse } from 'reactstrap';
 
 const CustomBotWithoutSettingsAccordion = () => {
   const { t } = useTranslation('admin');
-  const [currentlyOpenAccordionIndexes, setCurrentlyOpenAccordionIndexes] = useState(new Set());
+  const [openAccordionIndexes, setOpenAccordionIndexes] = useState(new Set());
+
   const onToggleAccordionHandler = (i) => {
-    if (currentlyOpenAccordionIndexes.has(i)) {
-      currentlyOpenAccordionIndexes.delete(i);
-      setCurrentlyOpenAccordionIndexes(currentlyOpenAccordionIndexes);
-      return;
+    const accordionIndexes = new Set(openAccordionIndexes);
+    if (accordionIndexes.has(i)) {
+      accordionIndexes.delete(i);
+    }
+    else {
+      accordionIndexes.add(i);
     }
-    
-    setCurrentlyOpenAccordionIndexes(currentlyOpenAccordionIndexes.add(i));
+    setOpenAccordionIndexes(accordionIndexes);
   };
 
   return (
@@ -25,12 +27,12 @@ const CustomBotWithoutSettingsAccordion = () => {
           onClick={() => onToggleAccordionHandler(0)}
         >
           <p className="mb-0 text-primary"><span className="mr-2">①</span>{t('slack_integration.without_proxy.create_bot')}</p>
-          {currentlyOpenAccordionIndexes.has(0)
+          {openAccordionIndexes.has(0)
             ? <i className="fa fa-chevron-up" />
             : <i className="fa fa-chevron-down" />
           }
         </div>
-        <Collapse isOpen={currentlyOpenAccordionIndexes.has(0)}>
+        <Collapse isOpen={openAccordionIndexes.has(0)}>
           <div className="card-body">
 
             <div className="row my-5">
@@ -63,12 +65,12 @@ const CustomBotWithoutSettingsAccordion = () => {
           onClick={() => onToggleAccordionHandler(1)}
         >
           <p className="mb-0 text-primary"><span className="mr-2">②</span>{t('slack_integration.without_proxy.install_bot_to_slack')}</p>
-          {currentlyOpenAccordionIndexes.has(1)
+          {openAccordionIndexes.has(1)
             ? <i className="fa fa-chevron-up" />
             : <i className="fa fa-chevron-down" />
           }
         </div>
-        <Collapse isOpen={currentlyOpenAccordionIndexes.has(1)}>
+        <Collapse isOpen={openAccordionIndexes.has(1)}>
           <div className="card-body">
             BODY2
           </div>
@@ -82,12 +84,12 @@ const CustomBotWithoutSettingsAccordion = () => {
           onClick={() => onToggleAccordionHandler(2)}
         >
           <p className="mb-0 text-primary"><span className="mr-2">③</span>{t('slack_integration.without_proxy.register_secret_and_token')}</p>
-          {currentlyOpenAccordionIndexes.has(2)
+          {openAccordionIndexes.has(2)
             ? <i className="fa fa-chevron-up" />
             : <i className="fa fa-chevron-down" />
           }
         </div>
-        <Collapse isOpen={currentlyOpenAccordionIndexes.has(2)}>
+        <Collapse isOpen={openAccordionIndexes.has(2)}>
           <div className="card-body">
             BODY 3
           </div>
@@ -101,12 +103,12 @@ const CustomBotWithoutSettingsAccordion = () => {
           onClick={() => onToggleAccordionHandler(3)}
         >
           <p className="mb-0 text-primary"><span className="mr-2">④</span>{t('slack_integration.without_proxy.test_connection')}</p>
-          {currentlyOpenAccordionIndexes.has(3)
+          {openAccordionIndexes.has(3)
             ? <i className="fa fa-chevron-up" />
             : <i className="fa fa-chevron-down" />
           }
         </div>
-        <Collapse isOpen={currentlyOpenAccordionIndexes.has(3)}>
+        <Collapse isOpen={openAccordionIndexes.has(3)}>
           <div className="card-body">
             BODY 4
           </div>