Load and store state from localStorage (#80)

* Load and store state from localStorage

* remove idea of localStorage from get and set state fns
main
Michael Fix 7 years ago committed by GitHub
parent 598ca88b98
commit 0c365218d6

@ -0,0 +1,13 @@
import morph from 'morphmorph'
const KEY = 'CARBON_STATE'
const assign = morph.assign(KEY)
const parse = v => {
try {
return JSON.parse(v)
} catch (e) {}
}
export const getState = morph.compose(parse, morph.get(KEY))
export const saveState = (window, v) => assign(window, JSON.stringify(v))

@ -23,7 +23,7 @@
"highlight.js": "^9.12.0", "highlight.js": "^9.12.0",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"morgan": "^1.8.2", "morgan": "^1.8.2",
"morphmorph": "0.0.2", "morphmorph": "^0.0.2",
"ms": "^2.0.0", "ms": "^2.0.0",
"next": "^3.2.2", "next": "^3.2.2",
"react": "^15.6.1", "react": "^15.6.1",

@ -23,6 +23,7 @@ import {
COLORS, COLORS,
DEFAULT_CODE DEFAULT_CODE
} from '../lib/constants' } from '../lib/constants'
import { getState, saveState } from '../lib/util'
class Editor extends React.Component { class Editor extends React.Component {
/* pathname, asPath, err, req, res */ /* pathname, asPath, err, req, res */
@ -50,7 +51,7 @@ class Editor extends React.Component {
paddingVertical: '48px', paddingVertical: '48px',
paddingHorizontal: '32px', paddingHorizontal: '32px',
uploading: false, uploading: false,
code: props.content || DEFAULT_CODE code: props.content
} }
this.save = this.save.bind(this) this.save = this.save.bind(this)
@ -58,6 +59,19 @@ class Editor extends React.Component {
this.updateCode = this.updateCode.bind(this) this.updateCode = this.updateCode.bind(this)
} }
componentDidMount() {
const state = getState(localStorage)
if (state) {
this.setState(state)
}
}
componentDidUpdate() {
const s = Object.assign({}, this.state)
delete s.code
saveState(localStorage, s)
}
getCarbonImage () { getCarbonImage () {
const node = document.getElementById('section') const node = document.getElementById('section')
@ -140,7 +154,7 @@ class Editor extends React.Component {
title={`Drop your file here to import ${isOver ? '✋' : '✊'}`} title={`Drop your file here to import ${isOver ? '✋' : '✊'}`}
> >
<Carbon config={this.state} updateCode={this.updateCode}> <Carbon config={this.state} updateCode={this.updateCode}>
{this.state.code} {this.state.code || DEFAULT_CODE}
</Carbon> </Carbon>
</Overlay> </Overlay>
)} )}

@ -2877,7 +2877,7 @@ morgan@^1.8.2:
on-finished "~2.3.0" on-finished "~2.3.0"
on-headers "~1.0.1" on-headers "~1.0.1"
morphmorph@0.0.2: morphmorph@^0.0.2:
version "0.0.2" version "0.0.2"
resolved "https://registry.yarnpkg.com/morphmorph/-/morphmorph-0.0.2.tgz#b2401b5e976ca4f4e068b730145aa64634aaa689" resolved "https://registry.yarnpkg.com/morphmorph/-/morphmorph-0.0.2.tgz#b2401b5e976ca4f4e068b730145aa64634aaa689"

Loading…
Cancel
Save