fix: nav context

carbon-design-system · Apr 23, 2019 · 444a6ee · 444a6ee
1 parent 9a09a8d
commit 444a6ee
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 43 deletions.
diff --git a/packages/gatsby-theme-carbon/src/components/GlobalSearch/GlobalSearch.js b/packages/gatsby-theme-carbon/src/components/GlobalSearch/GlobalSearch.js
@@ -6,7 +6,7 @@ import GlobalSearchInput from './GlobalSearchInput';
 import NavContext from '../../util/context/NavContext';
 
 const GlobalSearch = () => {
-  const { searchIsOpen, toggleNav } = useContext(NavContext);
+  const { searchIsOpen, toggleNavState } = useContext(NavContext);
 
   if (searchIsOpen) {
     return <GlobalSearchInput />;
@@ -17,8 +17,8 @@ const GlobalSearch = () => {
       className="bx--header__action--search"
       aria-label="Search Website"
       onClick={() => {
-        toggleNav('search', 'open');
-        toggleNav('switcher', 'close');
+        toggleNavState('searchIsOpen', 'open');
+        toggleNavState('switcherIsOpen', 'close');
       }}
     >
       <Search20 />

diff --git a/packages/gatsby-theme-carbon/src/components/GlobalSearch/GlobalSearchInput.js b/packages/gatsby-theme-carbon/src/components/GlobalSearch/GlobalSearchInput.js
@@ -8,7 +8,7 @@ import NavContext from '../../util/context/NavContext';
 const GlobalSearchInput = () => {
   const inputRef = useRef(null);
   const [input, setInput] = useState('');
-  const { toggleNav } = useContext(NavContext);
+  const { toggleNavState } = useContext(NavContext);
 
   useEffect(() => {
     if (inputRef.current) inputRef.current.focus();
@@ -40,7 +40,7 @@ const GlobalSearchInput = () => {
         aria-label="Clear search input"
         onClick={() => {
           setInput('');
-          toggleNav('search', 'close');
+          toggleNavState('searchIsOpen', 'close');
         }}
       >
         <Close20 description="Search Clear" className="bx--search-clear" />

diff --git a/packages/gatsby-theme-carbon/src/components/Header.js b/packages/gatsby-theme-carbon/src/components/Header.js
@@ -14,14 +14,16 @@ import GlobalSearch from './GlobalSearch';
 import NavContext from '../util/context/NavContext';
 
 const Header = ({ children }) => {
-  const { leftNavIsOpen, toggleNav, switcherIsOpen } = useContext(NavContext);
+  const { leftNavIsOpen, toggleNavState, switcherIsOpen } = useContext(
+    NavContext
+  );
   return (
     <ShellHeader aria-label="Header" className="bx--header--website">
       <SkipToContent />
       <HeaderMenuButton
         className="bx--header__action--menu"
         aria-label="Open menu"
-        onClick={() => toggleNav('leftNav')}
+        onClick={() => toggleNavState('leftNavIsOpen')}
         isActive={leftNavIsOpen}
       />
       <HeaderName prefix="" to="/" element={Link}>
@@ -33,8 +35,8 @@ const Header = ({ children }) => {
           className="bx--header__action--switcher"
           aria-label="Switch"
           onClick={() => {
-            toggleNav('switcher');
-            toggleNav('search', 'close');
+            toggleNavState('switcherIsOpen');
+            toggleNavState('searchIsOpen', 'close');
           }}
         >
           {switcherIsOpen ? <Close20 /> : <AppSwitcher20 />}

diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js
@@ -17,11 +17,11 @@ import LeftNavWrapper from './LeftNavWrapper';
 import resourceLinks from './resourceLinks';
 
 const LeftNav = props => {
-  const { leftNavIsOpen, toggleNav } = useContext(NavContext);
+  const { leftNavIsOpen, toggleNavState } = useContext(NavContext);
   const windowSize = useWindowSize();
 
   if (windowSize.innerWidth > 1056 && !leftNavIsOpen) {
-    toggleNav('leftNav', 'open');
+    toggleNavState('leftNavIsOpen', 'open');
   }
 
   const data = useStaticQuery(graphql`
@@ -44,7 +44,7 @@ const LeftNav = props => {
     }
   `);
   const sideNavRef = useRef(null);
-  useOnClickOutside(sideNavRef, () => toggleNav('leftNav', 'close'));
+  useOnClickOutside(sideNavRef, () => toggleNavState('leftNavIsOpen', 'close'));
 
   const nodes = data.allFile.edges.map(edge => edge.node);
   const topLevelNavItems = Array.from(

diff --git a/packages/gatsby-theme-carbon/src/util/context/NavContext.js b/packages/gatsby-theme-carbon/src/util/context/NavContext.js
@@ -1,10 +1,9 @@
-import React, { useState, useReducer } from 'react';
+import React, { useReducer } from 'react';
 
 const NavContext = React.createContext({
-  leftNav: false,
-  search: false,
-  switcher: false,
-  expandedCategories: [],
+  leftNavIsOpen: true,
+  searchIsOpen: false,
+  switcherIsOpen: false,
 });
 
 const reducer = (state, action) => {
@@ -18,30 +17,16 @@ const reducer = (state, action) => {
   }
 };
 export const NavContextProvider = ({ children }) => {
-  const { leftNavIsOpen, searchIsOpen, switcherIsOpen, dispatch } = useReducer(
-    reducer,
-    {
-      leftNav: false,
-      search: false,
-      switcher: false,
-    }
-  );
-
-  const [expandedCategories, setExpandedCategories] = useState([]);
-
-  const toggleCategory = category => {
-    if (expandedCategories.includes(category)) {
-      setExpandedCategories(
-        expandedCategories.filter(
-          expandedCategory => expandedCategory === category
-        )
-      );
-    } else {
-      setExpandedCategories([...expandedCategories, category]);
-    }
-  };
+  const [
+    { leftNavIsOpen, searchIsOpen, switcherIsOpen },
+    dispatch,
+  ] = useReducer(reducer, {
+    leftNav: false,
+    search: false,
+    switcher: false,
+  });
 
-  const toggleNav = (nav, type) => {
+  const toggleNavState = (nav, type) => {
     dispatch({ nav, type });
   };
 
@@ -51,9 +36,7 @@ export const NavContextProvider = ({ children }) => {
         leftNavIsOpen,
         searchIsOpen,
         switcherIsOpen,
-        toggleNav,
-        expandedCategories,
-        toggleCategory,
+        toggleNavState,
       }}
     >
       {children}