Fix search query component

CHANGELOG.md

@@ -5,6 +5,11 @@
 - Refactor localStorage to use hooks #334
 - Refactor keyboard shortcuts #335
 - Refactor query string to use hooks #336
+- Refactor to use hooks #337
+  - Adds `MDXDeckState` provider component
+  - Fixes an issue with rerenders in Gatsby theme
+  - Adjusts styles in grid mode
+  - Refactors `useSteps` to use effect hook
 
 ## v2.2.3 2019-04-20
 

packages/components/src/MDXDeck.js

@@ -15,6 +15,7 @@ import GoogleFonts from './GoogleFonts'
 import Catch from './Catch'
 import Keyboard from './Keyboard'
 import Storage from './Storage'
+import QueryString from './QueryString'
 import Style from './Style'
 
 const NORMAL = 'normal'
@@ -106,7 +107,8 @@ export const MDXDeck = props => {
   const goto = nextIndex => {
     const current = getIndex(props)
     const reverse = nextIndex < current
-    navigate(basepath + '/' + nextIndex)
+    const { search } = globalHistory.location
+    navigate(basepath + '/' + nextIndex + search)
     const meta = getMeta(nextIndex)
     setState({
       step: reverse ? meta.steps || 0 : 0,
@@ -157,6 +159,7 @@ export const MDXDeck = props => {
         <Style {...context} />
         <Keyboard {...props} {...context} />
         <Storage {...context} />
+        <QueryString {...context} />
         <GoogleFonts />
         <Wrapper {...props} {...context}>
           <Swipeable onSwipedRight={previous} onSwipedLeft={next}>

packages/components/src/QueryString.js

@@ -0,0 +1,31 @@
+import { useEffect } from 'react'
+import { globalHistory, navigate } from '@reach/router'
+import querystring from 'querystring'
+
+const getQuery = () => {
+  const query = querystring.parse(
+    globalHistory.location.search.replace(/^\?/, '')
+  )
+  return query
+}
+
+export default ({ mode, modes, update, index }) => {
+  useEffect(() => {
+    const state = getQuery()
+    update(state)
+  }, [])
+
+  useEffect(() => {
+    const { pathname, search } = globalHistory.location
+    if (mode !== modes.NORMAL && mode !== modes.PRINT) {
+      const query = '?' + querystring.stringify({ mode })
+      if (query === search) return
+      navigate(query)
+    } else {
+      if (!search) return
+      navigate(pathname)
+    }
+  }, [mode])
+
+  return false
+}