Don't use custom history API (#485)

* Add shallowEquals check for onUpdate

* Using Next.js Router instead of custom history API

Fixes https://github.com/zeit/next.js/issues/4994

* Remove urlObject code

components/Editor.js

@@ -6,6 +6,7 @@ import { DragDropContext } from 'react-dnd'
 import domtoimage from 'dom-to-image'
 import ReadFileDropContainer, { DATA_URL, TEXT } from 'dropperx'
 import Spinner from 'react-spinner'
+import shallowEquals from '../lib/shallow-equals'
 
 // Ours
 import Button from './Button'
@@ -113,8 +114,10 @@ class Editor extends React.Component {
     window.removeEventListener('online', this.setOnline)
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps, prevState) {
-    this.props.onUpdate(this.state)
+    if(!shallowEquals(this.state, prevState)) {
+      this.props.onUpdate(this.state)
+    }
   }
 
   getCarbonImage({ format, type } = { format: 'png' }) {

lib/routing.js

@@ -1,12 +1,5 @@
 import Morph from 'morphmorph'
 
-let createHistory
-let history
-if (typeof window !== 'undefined') {
-  createHistory = require('history').createBrowserHistory
-  history = createHistory()
-}
-
 const mapper = new Morph({
   types: {
     bool: v => {
@@ -68,11 +61,6 @@ export const deserializeState = serializedState => {
   return JSON.parse(decodeURIComponent(stateString))
 }
 
-const keysToQuery = keys =>
-  `?${Object.keys(keys)
-    .map(key => `${key}=${keys[key]}`)
-    .join('&')}`
-
 export const getQueryStringState = query => {
   if (query.state) {
     return deserializeState(query.state)
@@ -88,15 +76,16 @@ export const getQueryStringState = query => {
   return state
 }
 
-export const updateQueryString = state => {
+export const updateQueryString = (router, state) => {
-  if (history.location.search.indexOf('react_perf') < 0) {
+  const mappedState = mapper.map(reverseMappings, state)
-    const mappedState = mapper.map(reverseMappings, state)
+  serializeCode(mappedState)
-    serializeCode(mappedState)
 
-    history.replace({
+  router.replace({
-      search: encodeURI(keysToQuery(mappedState))
+    pathname: router.pathname
-    })
+  }, {
-  }
+    pathname: router.pathname,
+    query: mappedState
+  }, {shallow: true})
 }
 
 // private

lib/shallow-equals.js

@@ -0,0 +1,25 @@
+export default function shallowEquals (a, b) {
+  for (const i in a) {
+    // NaN === NaN is false in Javascript
+    if(isNaN(b[i]) && isNaN(a[i])) {
+      continue
+    }
+    if (b[i] !== a[i]) {
+      console.log('DID NOT MATCH', i, a[i], b[i])
+      return false
+    }
+  }
+
+  for (const i in b) {
+    // NaN === NaN is false in Javascript
+    if(isNaN(b[i]) && isNaN(a[i])) {
+      continue
+    }
+
+    if (b[i] !== a[i]) {
+      return false
+    }
+  }
+
+  return true
+}

pages/index.js

@@ -11,16 +11,17 @@ import { saveState } from '../lib/util'
 
 class Index extends React.Component {
   render() {
+    const {router} = this.props
     return (
       <Page enableHeroText={true}>
-        <Editor {...this.props.router} onUpdate={onEditorUpdate} api={api} />
+        <Editor {...router} onUpdate={(state) => onEditorUpdate(router, state)} api={api} />
       </Page>
     )
   }
 }
 
-function onEditorUpdate(state) {
+function onEditorUpdate(router, state) {
-  updateQueryString(state)
+  updateQueryString(router, state)
   const s = { ...state }
   delete s.code
   delete s.backgroundImage