debounce updating query string and localStorage (#664)

* debounce updating query string and localStorage * memoize meta components * fix tests
6 years ago · 93c57d2b5d
parent 981947c454
commit 93c57d2b5d
3 changed files with 23 additions and 23 deletions
--- a/components/Meta.js
+++ b/components/Meta.js
@ -37,7 +37,7 @@ export const CodeMirrorLink = () => (
 const title = 'Carbon'
 const description =
  'Carbon is the easiest way to create and share beautiful images of your source code.'
-export const MetaTags = () => (
+export const MetaTags = React.memo(() => (
  <Head>
    <meta charSet="utf-8" />
    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
@ -54,9 +54,9 @@ export const MetaTags = () => (
    <link rel="shortcut icon" href="/static/favicon.ico" />
    <link rel="manifest" href="/static/manifest.json" />
  </Head>
-)
+))

-export const MetaLinks = () => {
+export const MetaLinks = React.memo(() => {
  return (
    <React.Fragment>
      <Link href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.42.2/theme/seti.min.css" />
@ -71,21 +71,15 @@ export const MetaLinks = () => {
      })}
    </React.Fragment>
  )
-}
+})

-export const Styles = () => (
+export default React.memo(function Meta() {
+  return (
    <React.Fragment>
+      <MetaTags />
      <Reset />
      <Font />
      <Typography />
    </React.Fragment>
  )
-
-export default function Meta() {
-  return (
-    <React.Fragment>
-      <MetaTags />
-      <Styles />
-    </React.Fragment>
-  )
-}
+})
--- a/cypress/integration/localStorage-spec.js
+++ b/cypress/integration/localStorage-spec.js
@ -30,6 +30,8 @@ describe('localStorage', () => {
      .click()
      .contains('Blackboard')

+    cy.wait(1000) // URL updates are debounced
+
    cy.window()
      .its('localStorage.CARBON_STATE')
      .then(JSON.parse)
@ -41,7 +43,6 @@ describe('localStorage', () => {
    themeDropdown()
      .click()
      .contains('Blackboard')
-    cy.wait(1000) // URL updates are debounced
    cy.url().should('contain', 't=blackboard')
  })
 })
--- a/pages/index.js
+++ b/pages/index.js
@ -1,6 +1,7 @@
 // Theirs
 import React from 'react'
 import { withRouter } from 'next/router'
+import debounce from 'lodash.debounce'

 // Ours
 import Editor from '../components/Editor'
@ -13,13 +14,17 @@ import { saveSettings, clearSettings, omit } from '../lib/util'
 class Index extends React.Component {
  shouldComponentUpdate = () => false

-  onEditorUpdate = state => {
+  onEditorUpdate = debounce(
+    state => {
      updateQueryString(this.props.router, state)
      saveSettings(
        localStorage,
        omit(state, ['code', 'backgroundImage', 'backgroundImageSelection', 'filename'])
      )
-  }
+    },
+    750,
+    { trailing: true, leading: true }
+  )

  render() {
    return (