hammy
/
carbon
mirror of https://github.com/sgoudham/carbon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

debounce updating query string and localStorage (#664)

Browse Source 
* debounce updating query string and localStorage

* memoize meta components

* fix tests
main
Michael Fix 6 years ago committed by GitHub
parent 981947c454
commit 93c57d2b5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File

24
components/Meta.js
Unescape Escape View File

@ -37,7 +37,7 @@ export const CodeMirrorLink = () => (
const title = 'Carbon' const title = 'Carbon'
const description = const description =
'Carbon is the easiest way to create and share beautiful images of your source code.' 'Carbon is the easiest way to create and share beautiful images of your source code.'
export const MetaTags = () => ( export const MetaTags = React.memo(() => (
<Head> <Head>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" /> <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="shortcut icon" href="/static/favicon.ico" />
<link rel="manifest" href="/static/manifest.json" /> <link rel="manifest" href="/static/manifest.json" />
</Head> </Head>
) ))
export const MetaLinks = () => { export const MetaLinks = React.memo(() => {
return ( return (
<React.Fragment> <React.Fragment>
<Link href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.42.2/theme/seti.min.css" /> <Link href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.42.2/theme/seti.min.css" />
@ -71,21 +71,15 @@ export const MetaLinks = () => {
})} })}
</React.Fragment> </React.Fragment>
) )
} })
export const Styles = () => ( export default React.memo(function Meta() {
<React.Fragment>
<Reset />
<Font />
<Typography />
</React.Fragment>
)
export default function Meta() {
return ( return (
<React.Fragment> <React.Fragment>
<MetaTags /> <MetaTags />
<Styles /> <Reset />
<Font />
<Typography />
</React.Fragment> </React.Fragment>
) )
} })

3
cypress/integration/localStorage-spec.js
Unescape Escape View File

@ -30,6 +30,8 @@ describe('localStorage', () => {
.click() .click()
.contains('Blackboard') .contains('Blackboard')
cy.wait(1000) // URL updates are debounced
cy.window() cy.window()
.its('localStorage.CARBON_STATE') .its('localStorage.CARBON_STATE')
.then(JSON.parse) .then(JSON.parse)
@ -41,7 +43,6 @@ describe('localStorage', () => {
themeDropdown() themeDropdown()
.click() .click()
.contains('Blackboard') .contains('Blackboard')
cy.wait(1000) // URL updates are debounced
cy.url().should('contain', 't=blackboard') cy.url().should('contain', 't=blackboard')
}) })
}) })

19
pages/index.js
Unescape Escape View File

@ -1,6 +1,7 @@
// Theirs // Theirs
import React from 'react' import React from 'react'
import { withRouter } from 'next/router' import { withRouter } from 'next/router'
import debounce from 'lodash.debounce'
// Ours // Ours
import Editor from '../components/Editor' import Editor from '../components/Editor'
@ -13,13 +14,17 @@ import { saveSettings, clearSettings, omit } from '../lib/util'
class Index extends React.Component { class Index extends React.Component {
shouldComponentUpdate = () => false shouldComponentUpdate = () => false
onEditorUpdate = state => { onEditorUpdate = debounce(
updateQueryString(this.props.router, state) state => {
saveSettings( updateQueryString(this.props.router, state)
localStorage, saveSettings(
omit(state, ['code', 'backgroundImage', 'backgroundImageSelection', 'filename']) localStorage,
) omit(state, ['code', 'backgroundImage', 'backgroundImageSelection', 'filename'])
} )
},
750,
{ trailing: true, leading: true }
)
render() { render() {
return ( return (

Write Preview
Loading…
Cancel
Save