refactor(sidebar): remove unecessary variables from sidebar context

vtexdocs · Jul 5, 2022 · 4d03501 · 4d03501
1 parent 68389de
commit 4d03501
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 48 deletions.
diff --git a/src/components/sidebar-elements/index.tsx b/src/components/sidebar-elements/index.tsx
@@ -19,10 +19,11 @@ export interface SidebarProps {
 
 const SidebarElements = ({ items, subItemLevel }: SidebarProps) => {
   const {
-    sidebarElementActive,
+    activeSidebarElement,
     sidebarElementStatus,
-    toggleSidebarElementActive,
+    setActiveSidebarElement,
     toggleSidebarElementStatus,
+    openSidebarElement,
   } = useContext(SidebarContext)
 
   const ItemRoot = ({ title, subItems }: SidebarItemPropTypes) => {
@@ -37,38 +38,30 @@ const SidebarElements = ({ items, subItemLevel }: SidebarProps) => {
               variant="tertiary"
               sx={
                 sidebarElementStatus.has(title) &&
-                sidebarElementStatus.get(title)?.open
+                sidebarElementStatus.get(title)
                   ? styles.arrowIconActive
                   : styles.arrowIcon
               }
               icon={() => (
                 <IconCaret
                   direction={
                     sidebarElementStatus.has(title) &&
-                    sidebarElementStatus.get(title)?.open
+                    sidebarElementStatus.get(title)
                       ? 'down'
                       : 'right'
                   }
                   size={24}
                 />
               )}
-              onClick={() => {
-                sidebarElementStatus.has(title)
-                  ? toggleSidebarElementStatus(
-                      title,
-                      !sidebarElementStatus.get(title)?.open,
-                      subItemLevel
-                    )
-                  : toggleSidebarElementStatus(title, true, subItemLevel)
-              }}
+              onClick={() => toggleSidebarElementStatus(title)}
             />
           )}
           <Link
-            sx={textStyle(sidebarElementActive.has(title), isExpandable)}
+            sx={textStyle(activeSidebarElement === title, isExpandable)}
             target="_self"
             onClick={() => {
-              toggleSidebarElementStatus(title, true, subItemLevel)
-              toggleSidebarElementActive(title, subItemLevel)
+              openSidebarElement(title)
+              setActiveSidebarElement(title)
             }}
           >
             {title}
@@ -83,7 +76,7 @@ const SidebarElements = ({ items, subItemLevel }: SidebarProps) => {
 
     return isExpandable &&
       sidebarElementStatus.has(title) &&
-      sidebarElementStatus.get(title)?.open ? (
+      sidebarElementStatus.get(title) ? (
       <Box>
         <SidebarElements
           items={subItems}
@@ -101,12 +94,10 @@ const SidebarElements = ({ items, subItemLevel }: SidebarProps) => {
 
         return (
           <Fragment key={String(key)}>
-            <>
-              <ItemRoot {...item} />
-              <Box>
-                <ItemChildren {...item} />
-              </Box>
-            </>
+            <ItemRoot {...item} />
+            <Box>
+              <ItemChildren {...item} />
+            </Box>
             {subItemLevel == 0 ? (
               <Box sx={styles.sectionDivider}>
                 <hr />

diff --git a/src/utils/contexts/sidebar.tsx b/src/utils/contexts/sidebar.tsx
@@ -3,24 +3,22 @@ import { createContext, useState } from 'react'
 
 type ContextType = {
   sidebarSectionHidden: boolean
-  sidebarElementActive: Map<string, number>
-  sidebarElementStatus: Map<string, { open: boolean; level: number }>
+  activeSidebarElement: string
+  sidebarElementStatus: Map<string, boolean>
   setSidebarSectionHidden: Dispatch<SetStateAction<boolean>>
-  toggleSidebarElementActive: (title: string, level: number) => void
-  toggleSidebarElementStatus: (
-    title: string,
-    open: boolean,
-    level: number
-  ) => void
+  setActiveSidebarElement: Dispatch<SetStateAction<string>>
+  toggleSidebarElementStatus: (title: string) => void
+  openSidebarElement: (title: string) => void
 }
 
 export const SidebarContext = createContext<ContextType>({
   sidebarSectionHidden: false,
-  sidebarElementActive: new Map(),
+  activeSidebarElement: '',
   sidebarElementStatus: new Map(),
   setSidebarSectionHidden: () => undefined,
-  toggleSidebarElementActive: () => undefined,
+  setActiveSidebarElement: () => undefined,
   toggleSidebarElementStatus: () => undefined,
+  openSidebarElement: () => undefined,
 })
 
 interface Props extends Partial<ContextType> {
@@ -29,33 +27,34 @@ interface Props extends Partial<ContextType> {
 
 const SidebarContextProvider = ({ children, ...props }: Props) => {
   const [sidebarSectionHidden, setSidebarSectionHidden] = useState(false)
-  const [sidebarElementActive, changeSidebarElementActive] = useState(new Map())
-  const [sidebarElementStatus, changeSidebarElementStatus] = useState(new Map())
+  const [activeSidebarElement, setActiveSidebarElement] = useState('')
+  const [sidebarElementStatus, setSidebarElementStatus] = useState(new Map())
 
-  const toggleSidebarElementActive = (title: string, level: number) => {
-    sidebarElementActive.clear()
-    changeSidebarElementActive(new Map(sidebarElementActive.set(title, level)))
+  const toggleSidebarElementStatus = (title: string) => {
+    setSidebarElementStatus((sidebarElementStatus) => {
+      const open =
+        !sidebarElementStatus.has(title) || !sidebarElementStatus.get(title)
+
+      return new Map(sidebarElementStatus.set(title, open))
+    })
   }
 
-  const toggleSidebarElementStatus = (
-    title: string,
-    open: boolean,
-    level: number
-  ) => {
-    changeSidebarElementStatus(
-      new Map(sidebarElementStatus.set(title, { open, level }))
-    )
+  const openSidebarElement = (title: string) => {
+    setSidebarElementStatus((sidebarElementStatus) => {
+      return new Map(sidebarElementStatus.set(title, true))
+    })
   }
 
   return (
     <SidebarContext.Provider
       value={{
         sidebarSectionHidden,
-        sidebarElementActive,
+        activeSidebarElement,
         sidebarElementStatus,
         setSidebarSectionHidden,
-        toggleSidebarElementActive,
+        setActiveSidebarElement,
         toggleSidebarElementStatus,
+        openSidebarElement,
         ...props,
       }}
     >