From 6fc3d2b5e1502e9dab830ffdbbe50ca90a2a9515 Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Tue, 21 Aug 2018 10:11:01 -0700
Subject: [PATCH] use react-addons-shallow-compare for comparing state

---
 components/Editor.js  |  5 +++--
 lib/routing.js        | 16 ++++++++++------
 lib/shallow-equals.js | 25 -------------------------
 package.json          |  1 +
 pages/index.js        | 22 +++++++++++-----------
 yarn.lock             |  9 ++++++++-
 6 files changed, 33 insertions(+), 45 deletions(-)
 delete mode 100644 lib/shallow-equals.js

diff --git a/components/Editor.js b/components/Editor.js
index 2f95629..d746158 100644
--- a/components/Editor.js
+++ b/components/Editor.js
@@ -6,7 +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'
+import shallowCompare from 'react-addons-shallow-compare'
 
 // Ours
 import Button from './Button'
@@ -115,7 +115,8 @@ class Editor extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if(!shallowEquals(this.state, prevState)) {
+    // this.props ensures props are not compared, only state
+    if (shallowCompare(this, this.props, prevState)) {
       this.props.onUpdate(this.state)
     }
   }
diff --git a/lib/routing.js b/lib/routing.js
index bbba7bd..3439482 100644
--- a/lib/routing.js
+++ b/lib/routing.js
@@ -80,12 +80,16 @@ export const updateQueryString = (router, state) => {
   const mappedState = mapper.map(reverseMappings, state)
   serializeCode(mappedState)
 
-  router.replace({
-    pathname: router.pathname
-  }, {
-    pathname: router.pathname,
-    query: mappedState
-  }, {shallow: true})
+  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
deleted file mode 100644
index 73fb3b8..0000000
--- a/lib/shallow-equals.js
+++ /dev/null
@@ -1,25 +0,0 @@
-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/package.json b/package.json
index f7d1dbf..9055468 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "next-offline": "^2.9.0",
     "prettier": "^1.8.1",
     "react": "16.3.*",
+    "react-addons-shallow-compare": "^15.6.2",
     "react-click-outside": "^3.0.0",
     "react-codemirror2": "^5.1.0",
     "react-color": "^2.13.8",
diff --git a/pages/index.js b/pages/index.js
index 2403207..bbf1466 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -10,23 +10,23 @@ import { updateQueryString } from '../lib/routing'
 import { saveState } from '../lib/util'
 
 class Index extends React.Component {
+  onEditorUpdate = state => {
+    updateQueryString(this.props.router, state)
+    const s = { ...state }
+    delete s.code
+    delete s.backgroundImage
+    delete s.backgroundImageSelection
+    saveState(localStorage, s)
+  }
+
   render() {
-    const {router} = this.props
+    const { router } = this.props
     return (
       <Page enableHeroText={true}>
-        <Editor {...router} onUpdate={(state) => onEditorUpdate(router, state)} api={api} />
+        <Editor {...router} onUpdate={this.onEditorUpdate} api={api} />
       </Page>
     )
   }
 }
 
-function onEditorUpdate(router, state) {
-  updateQueryString(router, state)
-  const s = { ...state }
-  delete s.code
-  delete s.backgroundImage
-  delete s.backgroundImageSelection
-  saveState(localStorage, s)
-}
-
 export default withRouter(Index)
diff --git a/yarn.lock b/yarn.lock
index 955b78b..c3f7805 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2391,7 +2391,7 @@ fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
-fbjs@^0.8.1, fbjs@^0.8.16:
+fbjs@^0.8.1, fbjs@^0.8.16, fbjs@^0.8.4:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   dependencies:
@@ -4695,6 +4695,13 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-addons-shallow-compare@^15.6.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react-addons-shallow-compare/-/react-addons-shallow-compare-15.6.2.tgz#198a00b91fc37623db64a28fd17b596ba362702f"
+  dependencies:
+    fbjs "^0.8.4"
+    object-assign "^4.1.0"
+
 react-click-outside@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/react-click-outside/-/react-click-outside-3.0.1.tgz#6e77e84d2f17afaaac26dbad743cbbf909f5e24c"