Filter kerbs on nav item click

schiehll · May 25, 2019 · 28ae0d4 · 28ae0d4
1 parent 85b30f3
commit 28ae0d4
Showing 1 changed file with 29 additions and 9 deletions.
diff --git a/src/components/layout/index.js b/src/components/layout/index.js
@@ -1,4 +1,4 @@
-import React, { Fragment, useState, useEffect } from 'react'
+import React, { Fragment, useState, useEffect, useRef } from 'react'
 import { Transition } from 'react-transition-group'
 import Logo from 'components/logo'
 import Nav from 'components/nav'
@@ -11,20 +11,36 @@ import { duration, overlayStyles, sideSheetStyles } from './transitions'
 import * as S from './styles'
 
 const Layout = () => {
-  const [kerbs, setKerbs] = useState([
+  const allKerbs = useRef([])
+  const [kerbs, setKerbs] = useState([])
+  const [navItems, setNavItems] = useState([
     { id: '__DASHBOARD__', meta: { title: 'dashboard' } }
   ])
-  const [activeItem, setActiveItem] = useState(kerbs[0].id)
+  const [activeItem, setActiveItem] = useState(navItems[0].id)
   const [openSideSheet, setOpenSideSheet] = useState(false)
 
   const toggleSideSheet = () => {
     setOpenSideSheet(!openSideSheet)
   }
 
+  const handleNavbarItemClick = itemId => {
+    setActiveItem(itemId)
+    setKerbs(
+      itemId === '__DASHBOARD__'
+        ? allKerbs.current
+        : allKerbs.current.filter(kerb => kerb.id === itemId)
+    )
+
+    if (openSideSheet) {
+      setOpenSideSheet(false)
+    }
+  }
+
   useEffect(() => {
     const loadKerbs = async () => {
-      const allKerbs = await getKerbs()
-      setKerbs(kerbs.concat(allKerbs))
+      allKerbs.current = await getKerbs()
+      setKerbs(allKerbs.current)
+      setNavItems(navItems.concat(allKerbs.current))
     }
 
     loadKerbs()
@@ -34,7 +50,11 @@ const Layout = () => {
     <S.Wrapper>
       <S.Sidebar>
         <Logo>project name that's big</Logo>
-        <Nav items={kerbs} activeItem={activeItem} onClick={setActiveItem} />
+        <Nav
+          items={navItems}
+          activeItem={activeItem}
+          onClick={handleNavbarItemClick}
+        />
       </S.Sidebar>
       <S.Content>
         <S.Header>
@@ -43,7 +63,7 @@ const Layout = () => {
           </S.SideSheetButton>
           <Search />
         </S.Header>
-        <Widgets widgets={kerbs.filter(k => k.id !== '__DASHBOARD__')} />
+        <Widgets widgets={kerbs} />
       </S.Content>
       <Transition
         appear
@@ -58,9 +78,9 @@ const Layout = () => {
             <S.SideSheet style={sideSheetStyles(state)}>
               <Logo>project name that's big</Logo>
               <Nav
-                items={kerbs}
+                items={navItems}
                 activeItem={activeItem}
-                onClick={setActiveItem}
+                onClick={handleNavbarItemClick}
               />
             </S.SideSheet>
           </Fragment>