Refactor navigation

package.json

@@ -10,7 +10,8 @@
     "start": "yarn workspace @mdx-deck/docs start",
     "analyze-bundle": "yarn workspace @mdx-deck/docs start --webpack bundle-analyzer.config.js",
     "build": "yarn workspace @mdx-deck/docs build",
-    "test": "jest"
+    "build-theme": "yarn workspace @mdx-deck/gatsby-theme build",
+    "test": "jest && yarn build-theme"
   },
   "devDependencies": {
     "@babel/core": "^7.3.4",

packages/components/src/Grid.js

@@ -1,22 +1,9 @@
 import React, { useEffect } from 'react'
-import { Location, navigate } from '@reach/router'
 import Zoom from './Zoom'
 import Slide from './Slide'
 
-const getIndex = ({ pathname }) => {
-  return Number(pathname.split('/')[1] || 0)
-}
-
-const withLocation = Component => props => (
-  <Location
-    children={({ location }) => (
-      <Component {...props} location={location} index={getIndex(location)} />
-    )}
-  />
-)
-
-export const Grid = withLocation(props => {
-  const { index, slides, modes, update, basepath } = props
+export const Grid = props => {
+  const { index, slides, modes, update, goto } = props
   const activeThumb = React.createRef()
 
   useEffect(() => {
@@ -49,18 +36,19 @@ export const Grid = withLocation(props => {
             key={i}
             role="link"
             onClick={e => {
-              navigate(basepath + '/' + i)
+              goto(i)
               update({ mode: modes.NORMAL })
             }}
             style={{
               display: 'block',
-              width: '25vw',
-              height: '25vh',
-              padding: '2px',
+              width: 'calc(25vw - 4px)',
+              height: 'calc(25vh - 4px)',
+              margin: '2px',
               overflow: 'hidden',
               color: 'inherit',
               textDecoration: 'none',
               cursor: 'pointer',
+              outline: i === index ? '4px solid #0cf' : null,
             }}
           >
             <Zoom zoom={1 / 4}>
@@ -73,6 +61,6 @@ export const Grid = withLocation(props => {
       </div>
     </div>
   )
-})
+}
 
 export default Grid

packages/components/src/Keyboard.js

@@ -19,7 +19,7 @@ const toggleMode = key => state => ({
 })
 
 const handleKeyDown = props => e => {
-  const { basepath, update, modes } = props
+  const { basepath, update, modes, goto } = props
   const { keyCode, metaKey, ctrlKey, altKey, shiftKey } = e
   const { activeElement } = document
 

packages/components/src/MDXDeck.js

@@ -120,7 +120,9 @@ export class MDXDeck extends React.Component {
     const context = {
       ...this.state,
       register: this.register,
+      index,
       modes,
+      goto: this.goto,
       previous: this.previous,
       next: this.next,
     }
@@ -157,11 +159,11 @@ export class MDXDeck extends React.Component {
       <Provider {...this.props} {...this.state} mode={mode} index={index}>
         {style}
         <Catch>
-          <QueryString {...this.state} modes={modes} index={index} />
+          <QueryString {...context} />
           <Keyboard {...this.props} {...context} />
-          <Storage {...this.state} goto={this.goto} index={index} />
+          <Storage {...context} />
           <GoogleFonts />
-          <Wrapper {...this.props} {...this.state} modes={modes} index={index}>
+          <Wrapper {...this.props} {...context}>
             <Swipeable onSwipedRight={this.previous} onSwipedLeft={this.next}>
               <Router basepath={basepath}>
                 <Slide path="/" index={0} context={context}>

packages/components/src/Overview.js

@@ -1,13 +1,10 @@
 import React, { useEffect } from 'react'
-import { navigate } from '@reach/router'
 import Zoom from './Zoom'
 import Slide from './Slide'
 import Pre from './Pre'
 
-const query = '?mode=overview'
-
 export const Overview = props => {
-  const { index, slides, basepath } = props
+  const { goto, index, slides } = props
   const activeThumb = React.createRef()
 
   useEffect(() => {
@@ -44,7 +41,7 @@ export const Overview = props => {
             key={i}
             role="link"
             onClick={e => {
-              navigate(basepath + '/' + i + query)
+              goto(i)
             }}
             style={{
               display: 'block',

packages/components/src/QueryString.js

@@ -23,6 +23,7 @@ export default ({ mode, modes, update, index }) => {
       navigate(query)
     } else {
       if (!search) return
+      // clear search params
       navigate(pathname)
     }
   }, [index, mode])