Refactor Storage

src/LocalStorage.js

@@ -1,8 +1,28 @@
 import React from 'react'
 import Storage from './Storage'
 
+function getItem(key) {
+  try {
+    const value = localStorage.getItem(key)
+    const parsedValue = JSON.parse(value)
+    return Promise.resolve(parsedValue)
+  } catch (error) {
+    return Promise.reject(error)
+  }
+}
+
+function setItem(key, value) {
+  try {
+    const stringifiedValue = JSON.stringify(value)
+    localStorage.setItem(key, stringifiedValue)
+    return Promise.resolve(value)
+  } catch (error) {
+    return Promise.reject(error)
+  }
+}
+
 export default function LocalStorage(props) {
-  return <Storage {...props} driver={localStorage} />
+  return <Storage {...props} driver={{ getItem, setItem }} />
 }
 
 LocalStorage.propTypes = {

src/MemoryStorage.js

@@ -1,19 +1,19 @@
 import React from 'react'
 import Storage from './Storage'
 
-const memoryStorage = {
-  store: {},
-  getItem(key) {
-    return this.store[key]
-  },
-  setItem(key, value) {
-    this.store[key] = value
-    return value
-  }
+const store = {}
+
+function getItem(key) {
+  return Promise.resolve(store[key])
+}
+
+function setItem(key, value) {
+  store[key] = value
+  return Promise.resolve(value)
 }
 
 export default function MemoryStorage(props) {
-  return <Storage {...props} driver={memoryStorage} />
+  return <Storage {...props} driver={{ getItem, setItem }} />
 }
 
 MemoryStorage.propTypes = {

src/SessionStorage.js

@@ -1,8 +1,28 @@
 import React from 'react'
 import Storage from './Storage'
 
+function getItem(key) {
+  try {
+    const value = sessionStorage.getItem(key)
+    const parsedValue = JSON.parse(value)
+    return Promise.resolve(parsedValue)
+  } catch (error) {
+    return Promise.reject(error)
+  }
+}
+
+function setItem(key, value) {
+  try {
+    const stringifiedValue = JSON.stringify(value)
+    sessionStorage.setItem(key, stringifiedValue)
+    return Promise.resolve(value)
+  } catch (error) {
+    return Promise.reject(error)
+  }
+}
+
 export default function SessionStorage(props) {
-  return <Storage {...props} driver={sessionStorage} />
+  return <Storage {...props} driver={{ getItem, setItem }} />
 }
 
 SessionStorage.propTypes = {

src/Storage.js

@@ -1,4 +1,5 @@
 import { Component, PropTypes } from 'react'
+import isNil from 'lodash/isNil'
 import isEqual from 'lodash/isEqual'
 import Evee from 'evee'
 
@@ -19,15 +20,23 @@ export default class Storage extends Component {
 
   static defaultProps = { initialValues: {} }
 
-  state = this.getSubscribedKeys().reduce((result, key) => ({
-    ...result,
-    [key]: this.props.driver.getItem(key) || this.props.initialValues[key] || null
-  }), {})
+  state = {}
+
+  subscriptions = this.getSubscribedKeys().map(key => (
+    evee.on(key, event => !this.willUnmount && this.setState({ [key]: event.data }))
+  ))
 
   componentDidMount() {
-    this.subscriptions = this.getSubscribedKeys().map(key => (
-      evee.on(key, event => !this.willUnmount && this.setState({ [key]: event.data }))
-    ))
+    Promise.all([
+      this.getInitialValues(),
+      this.getCurrentValues()
+    ]).then(([initialValues, currentValues]) => {
+      const nextValues = this.getSubscribedKeys().reduce((result, key) => ({
+        ...result,
+        [key]: currentValues[key] || initialValues[key]
+      }), {})
+      return this.setItems(nextValues)
+    })
   }
 
   componentWillUnmount() {
@@ -45,18 +54,42 @@ export default class Storage extends Component {
     return this.props.subscribe
   }
 
+  getCurrentValues() {
+    const subscribedKeys = this.getSubscribedKeys()
+    const promises = subscribedKeys.map(this.props.driver.getItem)
+    return Promise.all(promises).then(values => {
+      return subscribedKeys.reduce((result, key, index) => ({
+        ...result,
+        [key]: isNil(values[index]) ? null : values[index]
+      }), {})
+    })
+  }
+
+  getInitialValues() {
+    const subscribedKeys = this.getSubscribedKeys()
+    const promises = subscribedKeys.map(this.props.driver.getItem)
+    return Promise.all(promises).then(values => {
+      return subscribedKeys.reduce((result, key) => ({
+        ...result,
+        [key]: isNil(this.props.initialValues[key]) ? null : this.props.initialValues[key]
+      }), {})
+    })
+  }
+
   setItem = (key, value) => {
-    if (isEqual(this.props.driver.getItem(key), value)) {
+    const currentValue = this.state[key]
+    if (isEqual(currentValue, value)) {
       return value
     }
-    this.props.driver.setItem(key, value)
-    evee.emit(key, value)
-    return value
+    return this.props.driver.setItem(key, value).then(value => {
+      evee.emit(key, value)
+      return value
+    })
   }
 
   setItems = items => {
-    Object.keys(items).forEach(key => this.setItem(key, items[key]))
-    return items
+    const promises = Object.keys(items).map(key => this.setItem(key, items[key]))
+    return Promise.all(promises).then(() => items)
   }
 
   render() {