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 ( - onEditorUpdate(router, state)} api={api} /> + ) } } -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"