From 2e945fc5286cff03d620a387f51ee555529eb5eb Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Tue, 21 Aug 2018 18:45:26 +0200
Subject: [PATCH] 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  |  7 +++++--
 lib/routing.js        | 29 +++++++++--------------------
 lib/shallow-equals.js | 25 +++++++++++++++++++++++++
 pages/index.js        |  7 ++++---
 4 files changed, 43 insertions(+), 25 deletions(-)
 create mode 100644 lib/shallow-equals.js

diff --git a/components/Editor.js b/components/Editor.js
index 5942454..2f95629 100644
--- a/components/Editor.js
+++ b/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() {
-    this.props.onUpdate(this.state)
+  componentDidUpdate(prevProps, prevState) {
+    if(!shallowEquals(this.state, prevState)) {
+      this.props.onUpdate(this.state)
+    }
   }
 
   getCarbonImage({ format, type } = { format: 'png' }) {
diff --git a/lib/routing.js b/lib/routing.js
index c6dc8d8..bbba7bd 100644
--- a/lib/routing.js
+++ b/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 => {
-  if (history.location.search.indexOf('react_perf') < 0) {
-    const mappedState = mapper.map(reverseMappings, state)
-    serializeCode(mappedState)
+export const updateQueryString = (router, state) => {
+  const mappedState = mapper.map(reverseMappings, state)
+  serializeCode(mappedState)
 
-    history.replace({
-      search: encodeURI(keysToQuery(mappedState))
-    })
-  }
+  router.replace({
+    pathname: router.pathname
+  }, {
+    pathname: router.pathname,
+    query: mappedState
+  }, {shallow: true})
 }
 
 // private
diff --git a/lib/shallow-equals.js b/lib/shallow-equals.js
new file mode 100644
index 0000000..73fb3b8
--- /dev/null
+++ b/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
+}
diff --git a/pages/index.js b/pages/index.js
index bb63594..2403207 100644
--- a/pages/index.js
+++ b/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) {
-  updateQueryString(state)
+function onEditorUpdate(router, state) {
+  updateQueryString(router, state)
   const s = { ...state }
   delete s.code
   delete s.backgroundImage