Merge pull request #74 from hongphinguyen/sidebar-context

Fixing up the sidebar context

src/SidebarProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useMemo } from "react"
 
 interface ISidebarProviderProps {
   children: React.ReactNode
@@ -15,20 +15,16 @@ export const SidebarContext = React.createContext<ISidebarContextInterface | nul
 
 export function SidebarProvider({
   children,
-}: ISidebarProviderProps): JSX.Element {
+}: ISidebarProviderProps) {
   const [current, setCurrent] = useState(0)
 
-  function selectFirstLevel(index: number) {
-    setCurrent(index)
-  }
+  const memoizedContextValue = useMemo(() => ({
+    current,
+    setCurrent,
+  }), [current, setCurrent])
 
   return (
-    <SidebarContext.Provider
-      value={{
-        current,
-        setCurrent: selectFirstLevel,
-      }}
-    >
+    <SidebarContext.Provider value={memoizedContextValue}>
       {children}
     </SidebarContext.Provider>
   )

src/components/ResourcesSidebar/index.tsx

@@ -1,5 +1,5 @@
 import { graphql, Link, useStaticQuery } from "gatsby"
-import React, { PropsWithChildren, useState } from "react"
+import React, { PropsWithChildren, useState, memo } from "react"
 import TriangleDown from "../../icons/triangle-down.svg"
 import Banner from "../../images/tph-banner.svg"
 import useSidebar from "./../../hooks/useSidebar"
@@ -91,7 +91,7 @@ function Folder({ item }: { item: IFolder }) {
   )
 }
 
-function FirstLevelFolder({ item, index }: { item: IFolder; index: number }) {
+const FirstLevelFolder = memo(({ item, index }: { item: IFolder; index: number }) => {
   const { current, setCurrent } = useSidebar()
   const collapsed = current !== index
 
@@ -107,7 +107,7 @@ function FirstLevelFolder({ item, index }: { item: IFolder; index: number }) {
       <SC.Children>{item.children.map(node => plantTree(node))}</SC.Children>
     </SC.TreeWrapper>
   )
-}
+})
 
 function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
   return (

src/hooks/useSidebar.tsx

@@ -1,7 +1,7 @@
 import { useContext } from "react"
-import { SidebarContext, SidebarContextInterface } from "../SidebarProvider"
+import { SidebarContext, ISidebarContextInterface } from "../SidebarProvider"
 
-export default function useSidebar(): SidebarContextInterface {
+export default function useSidebar(): ISidebarContextInterface {
   const sidebarContext = useContext(SidebarContext)
 
   if (!sidebarContext) {