feat: set only one level to be expanded

Tivix · Jul 8, 2024 · f827ea2 · f827ea2
1 parent d2e6b8f
commit f827ea2
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 23 deletions.
diff --git a/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.hooks.ts b/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.hooks.ts
@@ -1,21 +1,14 @@
 import { useState } from 'react';
-import { AdvancementLevelHooks } from './AdvancemetLevel.interface';
 
-export const useAdvancementLevel = (): AdvancementLevelHooks => {
-  const [accordionOpen, setAccordionOpen] = useState(false);
+export const useAdvancementLevel = () => {
   const [modalOpen, setModalOpen] = useState(false);
 
-  const toggleAccordionOpen = () => setAccordionOpen((prevState) => !prevState);
-
   const openModal = () => setModalOpen(true);
-
   const hideModal = () => setModalOpen(false);
 
   return {
     hideModal,
     openModal,
-    toggleAccordionOpen,
     modalOpen,
-    accordionOpen,
   };
 };
diff --git a/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx b/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx
@@ -9,8 +9,8 @@ import { Markdown } from '@app/components/common/Markdown';
 import { Typography } from '@app/components/common/Typography';
 import { Button } from '@app/components/common/Button';
 
-export const AdvancementLevel: React.FC<AdvancementLevelProps> = ({ showVerticalLine, data }) => {
-  const { hideModal, openModal, toggleAccordionOpen, modalOpen, accordionOpen } = useAdvancementLevel();
+export const AdvancementLevel: React.FC<AdvancementLevelProps> = ({ showVerticalLine, data, open, onClick }) => {
+  const { hideModal, openModal, modalOpen } = useAdvancementLevel();
 
   const { advancementLevel, description, projects, categories } = data;
   const shouldBeExpandedByDefault = Object.keys(data.categories).length === 1;
@@ -20,16 +20,16 @@ export const AdvancementLevel: React.FC<AdvancementLevelProps> = ({ showVertical
       <div className="relative flex flex-col items-center">
         <button
           className="mb-2 mt-4 flex h-6 w-6 items-center justify-center rounded-full bg-blue-800 hover:opacity-50"
-          onClick={toggleAccordionOpen}
+          onClick={onClick}
         >
-          <ChevronRightIcon className={`h-3.5 w-3.5 text-white ${!accordionOpen ? 'rotate-90' : '-rotate-90'}`} />
+          <ChevronRightIcon className={`h-3.5 w-3.5 text-white ${!open ? 'rotate-90' : '-rotate-90'}`} />
         </button>
         {showVerticalLine && <div className="absolute left-3 top-12 h-[calc(100%-40px)] w-[1.5px] bg-blue-800" />}
       </div>
       <div className="mb-4 ml-4 flex w-full flex-col gap-4">
         <button
-          className={`flex w-full cursor-pointer flex-col gap-4 rounded-lg ${!accordionOpen && 'hover:bg-navy-50'}`}
-          onClick={toggleAccordionOpen}
+          className={`flex w-full cursor-pointer flex-col gap-4 rounded-lg ${!open && 'hover:bg-navy-50'}`}
+          onClick={onClick}
         >
           <Typography as="h3" variant="body-l/semibold">
             Advancement level {advancementLevel}
@@ -38,7 +38,7 @@ export const AdvancementLevel: React.FC<AdvancementLevelProps> = ({ showVertical
             {description}
           </Typography>
         </button>
-        {accordionOpen && (
+        {open && (
           <>
             {projects.length > 0 && (
               <Button variant="link" onClick={openModal} className="w-fit text-sm">

diff --git a/frontend/src/components/modules/AdvancementLevel/AdvancemetLevel.interface.ts b/frontend/src/components/modules/AdvancementLevel/AdvancemetLevel.interface.ts
@@ -3,12 +3,6 @@ import { AdvancementLevel } from '@app/types/library';
 export interface AdvancementLevelProps {
   data: AdvancementLevel;
   showVerticalLine: boolean;
-}
-
-export interface AdvancementLevelHooks {
-  hideModal: () => void;
-  openModal: () => void;
-  toggleAccordionOpen: () => void;
-  modalOpen: boolean;
-  accordionOpen: boolean;
+  open: boolean;
+  onClick: () => void;
 }
diff --git a/frontend/src/components/modules/BucketDetails/BucketDetails.hooks.ts b/frontend/src/components/modules/BucketDetails/BucketDetails.hooks.ts
@@ -0,0 +1,14 @@
+import { useState } from 'react';
+
+export const useBucketDetails = () => {
+  const [levelOpen, setLevelOpen] = useState<null | number>(null);
+
+  const handleOpen = (level: null | number) => {
+    setLevelOpen((prev) => (prev === level ? null : level));
+  };
+
+  return {
+    levelOpen,
+    handleOpen,
+  };
+};
diff --git a/frontend/src/components/modules/BucketDetails/BucketDetails.tsx b/frontend/src/components/modules/BucketDetails/BucketDetails.tsx
@@ -1,9 +1,12 @@
+'use client';
 import { BucketDetailsProps } from './BucketDetails.interface';
 import { AdvancementLevel } from '@app/components/modules/AdvancementLevel';
 import { Typography } from '@app/components/common/Typography';
+import { useBucketDetails } from './BucketDetails.hooks';
 
 export const BucketDetails: React.FC<BucketDetailsProps> = ({ data }) => {
   const { bucketName, description, advancementLevels } = data;
+  const { levelOpen, handleOpen } = useBucketDetails();
 
   return (
     <section className="py-16">
@@ -24,6 +27,8 @@ export const BucketDetails: React.FC<BucketDetailsProps> = ({ data }) => {
               key={level.advancementLevel}
               data={level}
               showVerticalLine={index < advancementLevels.length - 1}
+              open={levelOpen === level.advancementLevel}
+              onClick={() => handleOpen(level.advancementLevel)}
             />
           ))}
         </div>