new Set

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

@@ -4,13 +4,13 @@ import { Collapse } from 'reactstrap';
 
 const CustomBotWithoutSettingsAccordion = () => {
   const { t } = useTranslation('admin');
-  const [currentlyOpenAccordionIndexes, setCurrentlyOpenAccordionIndexes] = useState([]);
+  const [currentlyOpenAccordionIndexes, setCurrentlyOpenAccordionIndexes] = useState(new Set());
   const onToggleAccordionHandler = (i) => {
-    if (currentlyOpenAccordionIndexes.includes(i)) {
-      setCurrentlyOpenAccordionIndexes(currentlyOpenAccordionIndexes.filter(n => n !== i));
+    if (currentlyOpenAccordionIndexes.has(i)) {
+      setCurrentlyOpenAccordionIndexes(currentlyOpenAccordionIndexes.delete(i));
       return;
     }
-    setCurrentlyOpenAccordionIndexes([...currentlyOpenAccordionIndexes, i]);
+    setCurrentlyOpenAccordionIndexes(currentlyOpenAccordionIndexes.add(i));
   };
 
   return (
@@ -23,12 +23,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.includes(0)
+          {currentlyOpenAccordionIndexes.has(0)
             ? <i className="fa fa-chevron-up" />
             : <i className="fa fa-chevron-down" />
           }
         </div>
-        <Collapse isOpen={currentlyOpenAccordionIndexes.includes(0)}>
+        <Collapse isOpen={currentlyOpenAccordionIndexes.has(0)}>
           <div className="card-body">
 
             <div className="row my-5">
@@ -61,12 +61,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.includes(1)
+          {currentlyOpenAccordionIndexes.has(1)
             ? <i className="fa fa-chevron-up" />
             : <i className="fa fa-chevron-down" />
           }
         </div>
-        <Collapse isOpen={currentlyOpenAccordionIndexes.includes(1)}>
+        <Collapse isOpen={currentlyOpenAccordionIndexes.has(1)}>
           <div className="card-body">
             BODY2
           </div>
@@ -80,12 +80,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.includes(2)
+          {currentlyOpenAccordionIndexes.has(2)
             ? <i className="fa fa-chevron-up" />
             : <i className="fa fa-chevron-down" />
           }
         </div>
-        <Collapse isOpen={currentlyOpenAccordionIndexes.includes(2)}>
+        <Collapse isOpen={currentlyOpenAccordionIndexes.has(2)}>
           <div className="card-body">
             BODY 3
           </div>
@@ -99,12 +99,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.includes(3)
+          {currentlyOpenAccordionIndexes.has(3)
             ? <i className="fa fa-chevron-up" />
             : <i className="fa fa-chevron-down" />
           }
         </div>
-        <Collapse isOpen={currentlyOpenAccordionIndexes.includes(3)}>
+        <Collapse isOpen={currentlyOpenAccordionIndexes.has(3)}>
           <div className="card-body">
             BODY 4
           </div>