Merge pull request #121 from DenverCoder544/accordion_bugfix

Accordion bugfix
oskariorg · Sep 10, 2024 · 5485452 · 5485452
2 parents 133d0dc + 02891ae
commit 5485452
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 24 deletions.
diff --git a/app/documentation/docs/[version]/[slug]/AccordionListWrapper.tsx b/app/documentation/docs/[version]/[slug]/AccordionListWrapper.tsx
@@ -8,13 +8,13 @@ import { cleanTags } from '@/lib/utils';
 
 export default function AccordionListWrapper({
   items,
-  initialOpenSections
+  initialOpenSection
 }: {
   items: MarkdownFileMetadata[] | null,
-  initialOpenSections: string[]
+  initialOpenSection: string
 }) {
 
-  const [openSections, setOpenSections] = useState(initialOpenSections);
+  const [openSection, setOpenSection] = useState(initialOpenSection);
   const renderAccordionContent = (
     items: Array<DocAnchorLinksType>, parentSlug: string, isOpen: boolean
   ) => {
@@ -36,28 +36,19 @@ export default function AccordionListWrapper({
   }
 
   const updateOpenAccordion = (id: string, isOpen: boolean) => {
-    let newOpenSections: string[] = Object.assign([], openSections);
-    if (isOpen) {
-      if (!newOpenSections.includes(id)) {
-        newOpenSections.push(id);
-      }
-    } else {
-      newOpenSections = openSections.filter(accordionId => accordionId !== id);
-    }
-
-    setOpenSections(newOpenSections);
+    const newOpenSection = isOpen ? id : '';
+    setOpenSection(newOpenSection);
   }
 
-
   return <>
     {items?.map((item: MarkdownFileMetadata) => (
       <Accordion
         key={item.slug}
         id={item.slug}
-        initialOpen = { openSections?.includes(item.slug) }
+        initialOpen = { openSection === item.slug }
         updateIsOpen={updateOpenAccordion}
         title={ item?.title || `Chapter ${item.slug}`}
-        content={renderAccordionContent(item.anchorLinks, item.slug, openSections.includes(item.slug))}
+        content={renderAccordionContent(item.anchorLinks, item.slug, openSection === item.slug)}
       />
     ))}
   </>;

diff --git a/app/documentation/docs/[version]/[slug]/page.tsx b/app/documentation/docs/[version]/[slug]/page.tsx
@@ -64,7 +64,7 @@ export default async function SingleDocPage({
     <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
       <VersionSidebar selectedVersion={params.version} versions={versions} baseHref='/documentation/docs/' />
       <AccordionGroup>
-        <AccordionListWrapper items={indexJSON[params.version]} initialOpenSections={[activeSection.slug]}/>
+        <AccordionListWrapper items={indexJSON[params.version]} initialOpenSection={activeSection.slug}/>
       </AccordionGroup>
     </div>
     <div>

diff --git a/components/Accordion/Accordion.tsx b/components/Accordion/Accordion.tsx
@@ -34,12 +34,11 @@ export default function Accordion({
         })
       }
     }
-    setIsOpen((prev) => {
-      if (updateIsOpen && id) {
-        updateIsOpen(id, !prev);
-      }
-      return !prev;
-    })
+    setIsOpen((prev) => !prev)
+    if (updateIsOpen && id) {
+      updateIsOpen(id, !isOpen);
+    }
+
   }
 
   const accordionKeyUp = (event: KeyboardEvent) => {
@@ -68,7 +67,7 @@ export default function Accordion({
         onClick={toggleAccordion}
         onKeyUp={accordionKeyUp}
       >
-        {title}
+        {title} - { initialOpen } - { isOpen }
         <span className={styles.arrowIndicator}>
           <Image
             src='/assets/icons/arrow_down.svg'