Adjust querystring parsing

package.json

@@ -35,6 +35,7 @@
     "pkg-conf": "^2.1.0",
     "prop-types": "^15.6.2",
     "puppeteer": "^1.6.1",
+    "querystring": "^0.2.0",
     "react": "^16.4.1",
     "react-dev-utils": "^5.0.1",
     "react-syntax-highlighter": "^8.0.1",

src/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { MDXProvider } from '@mdx-js/tag'
 import { ThemeProvider } from 'styled-components'
 import debounce from 'lodash.debounce'
+import querystring from 'querystring'
 
 import { Provider as ContextProvider } from './context'
 import DefaultProvider from './Provider'
@@ -11,7 +12,7 @@ import Slide from './Slide'
 import Dots from './Dots'
 import Root from './Root'
 import Presenter from './Presenter'
-import Overview from './Overview'
+import Grid from './Overview'
 import GoogleFonts from './GoogleFonts'
 
 import defaultTheme from './themes'
@@ -49,6 +50,7 @@ export const modes = {
   normal: 'NORMAL',
   presenter: 'PRESENTER',
   overview: 'OVERVIEW',
+  grid: 'GRID',
 }
 
 export const toggleMode = key => state => ({
@@ -123,6 +125,11 @@ export class SlideDeck extends React.Component {
           this.update(toggleMode('overview'))
         }
         break
+      case keys.g:
+        if (alt) {
+          this.update(toggleMode('grid'))
+        }
+        break
     }
   }
 
@@ -141,13 +148,10 @@ export class SlideDeck extends React.Component {
   }
 
   getMode = () => {
-    const { search } = window.location
-    const presenter = search.includes('presenter')
-    if (presenter) {
-      this.setState({
-        mode: modes.presenter
-      })
-    }
+    const { mode } = querystring.parse(window.location.search.replace(/^\?/, ''))
+    this.setState({
+      mode: modes[mode]
+    })
   }
 
   handleStorageChange = e => {
@@ -190,7 +194,11 @@ export class SlideDeck extends React.Component {
     }
     const { index, mode, step } = this.state
     let query = '?'
-    if (mode === modes.presenter) query += 'presenter'
+    if (mode !== modes.normal) {
+      query += querystring.stringify({
+        mode: mode.toLowerCase()
+      })
+    }
     const step_ = step !== -1 ? ('.' + (step + 1)) : ''
     history.pushState(null, null, query + '#' + index + step_)
     localStorage.setItem(MDX_SLIDE_INDEX, index)
@@ -213,9 +221,12 @@ export class SlideDeck extends React.Component {
       Provider = PropsProvider
     } = theme
 
-    const Wrapper = mode === modes.presenter
-      ? Presenter
-      : Root
+    let Wrapper = Root
+    if (mode === modes.presenter) {
+      Wrapper = Presenter
+    } else if (mode === modes.overview) {
+      console.log('todo overview')
+    }
 
     const context = {
       ...this.state,
@@ -233,8 +244,8 @@ export class SlideDeck extends React.Component {
               ...components
             }}>
             <Provider {...this.state} update={this.update}>
-              {mode === modes.overview ? (
-                <Overview
+              {mode === modes.grid ? (
+                <Grid
                   slides={slides}
                   update={this.update}
                 />