78 lines
2.2 KiB
JavaScript
78 lines
2.2 KiB
JavaScript
|
import React from 'react'
|
||
|
import {connect} from 'react-redux'
|
||
|
|
||
|
|
||
|
import * as Actions from '../common/actions'
|
||
|
import * as Selectors from '../common/selectors'
|
||
|
|
||
|
|
||
|
/* This component reads the local storage store and adds them to the Redux store.
|
||
|
* Local storage is read during the componentDidMount lifecycle method.
|
||
|
* Local storage is written during the componentWillReceiveProps lifecycle method.
|
||
|
*/
|
||
|
|
||
|
//an app-specific name for the localStorage state
|
||
|
const stateName = "dubdiff_state"
|
||
|
|
||
|
//return a new object with the given keys, each assigned to the cooresponding value
|
||
|
//from the given object
|
||
|
const copyKeys = (obj, keys) => keys.reduce((acc, p)=>{acc[p]=obj[p]; return acc}, {})
|
||
|
|
||
|
console.log(copyKeys({a:1, b:2}, ['a']))
|
||
|
console.log(copyKeys({}, ['a']))
|
||
|
|
||
|
//utility method for retrieving json data from the local store
|
||
|
function getLocalState (keys) {
|
||
|
if (localStorage.getItem(stateName)) {
|
||
|
const localState = JSON.parse(localStorage.getItem(stateName))
|
||
|
return copyKeys(localState, keys)
|
||
|
}
|
||
|
else
|
||
|
return copyKeys({}, keys)
|
||
|
}
|
||
|
|
||
|
//utility method for writing json data to the local store
|
||
|
function setLocalState (state, keys) {
|
||
|
let toSave = copyKeys(state, keys)
|
||
|
localStorage.setItem(stateName, JSON.stringify(toSave))
|
||
|
}
|
||
|
|
||
|
|
||
|
const mapStateToProps = (state) => ({
|
||
|
input: state.input,
|
||
|
//the loading/empty/clean state
|
||
|
})
|
||
|
|
||
|
|
||
|
const mapDispatchToProps = dispatch => ({
|
||
|
onChangeOriginal: (text) => dispatch(Actions.updateOriginalInput(text)),
|
||
|
onChangeFinal: (text) => dispatch(Actions.updateFinalInput(text)),
|
||
|
})
|
||
|
|
||
|
|
||
|
class LocalStorage extends React.Component {
|
||
|
|
||
|
//load the state from the local storage
|
||
|
componentDidMount() {
|
||
|
//only if the status is EMPTY
|
||
|
if (this.props.input.original=='' && this.props.input.final == '') {
|
||
|
const localState = getLocalState(['input'])
|
||
|
if (localState.input && localState.input.original)
|
||
|
this.props.onChangeOriginal(localState.input.original)
|
||
|
if (localState.input && localState.input.final)
|
||
|
this.props.onChangeFinal(localState.input.final)
|
||
|
}
|
||
|
}
|
||
|
//save the state to local storage
|
||
|
componentWillReceiveProps(nextProps) {
|
||
|
setLocalState(nextProps, ['input'])
|
||
|
}
|
||
|
|
||
|
render () {
|
||
|
return this.props.children
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export default connect(mapStateToProps, mapDispatchToProps)(LocalStorage)
|
||
|
|