✨ Added localForage for persisting state and offline data storage

Author: brianwtaylor

package-lock.json

@@ -46,6 +46,7 @@
     "enzyme-adapter-react-16": "^1.2.0",
     "eslint-plugin-jest": "^21.21.0",
     "konva": "^2.1.7",
+    "localforage": "^1.7.2",
     "lodash.throttle": "^4.1.1",
     "prettier": "^1.14.2",
     "prop-types": "^15.6.2",

package.json

@@ -1,3 +1,4 @@
+export const LOAD_INIT_DATA = 'LOAD_INIT_DATA';
 export const ADD_COMPONENT = 'ADD_COMPONENT';
 export const UPDATE_COMPONENT = 'UPDATE_COMPONENT';
 export const DELETE_COMPONENT = 'DELETE_COMPONENT';

src/actionTypes/index.js

@@ -1,4 +1,5 @@
 import {
+  LOAD_INIT_DATA,
   ADD_COMPONENT,
   UPDATE_COMPONENT,
   DELETE_COMPONENT,
@@ -24,9 +25,21 @@ import {
   CHANGE_IMAGE_PATH,
 } from '../actionTypes/index';
 
+import { loadState } from '../localStorage';
+
 import createFiles from '../utils/createFiles.util';
 import createApplicationUtil from '../utils/createApplication.util';
 
+export const loadInitData = () => (dispatch) => {
+  loadState()
+    .then(({ workspace }) => dispatch({
+      type: LOAD_INIT_DATA,
+      payload: {
+        data: workspace,
+      },
+    }));
+};
+
 export const addNewChild = (({
   id, childIndex, childId,
 }) => ({

src/actions/components.js

@@ -7,13 +7,16 @@ import MainContainer from './MainContainer.jsx';
 import RightContainer from './RightContainer.jsx';
 import convertIdToObjs from '../utils/convertIdsToObjs.util';
 import theme from '../components/theme';
+import { loadInitData } from '../actions/components';
 
 const mapStateToProps = store => ({
   components: store.workspace.components,
   totalComponents: store.workspace.totalComponents,
   focusComponent: store.workspace.focusComponent,
 });
 
+const mapDispatchToProps = { loadInitData };
+
 class AppContainer extends Component {
   state = {
     width: 25,
@@ -34,6 +37,10 @@ class AppContainer extends Component {
     }
   }
 
+  componentDidMount() {
+    this.props.loadInitData();
+  }
+
   render() {
     const { components, totalComponents, focusComponent } = this.props;
     const { width, rightColumnOpen } = this.state;
@@ -66,10 +73,11 @@ class AppContainer extends Component {
   }
 }
 
-export default connect(mapStateToProps)(AppContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(AppContainer);
 
 AppContainer.propTypes = {
   components: PropTypes.array.isRequired,
   totalComponents: PropTypes.number.isRequired,
   focusComponent: PropTypes.object.isRequired,
+  loadInitData: PropTypes.func.isRequired,
 };

src/containers/AppContainer.jsx

@@ -1,21 +1,38 @@
-export const loadState = () => {
-  try {
-    const serializedState = localStorage.getItem('state');
-    if (serializedState === null) {
-      return undefined;
-    }
-    return JSON.parse(serializedState);
-  } catch (err) {
-    return undefined;
-  }
-};
+import localforage from 'localforage';
 
+// export const loadState = () => {
+//   try {
+//     const serializedState = localforage.getItem('state');
+//     if (serializedState === null) {
+//       return undefined;
+//     }
+//     return JSON.parse(serializedState);
+//   } catch (err) {
+//     return undefined;
+//   }
+// };
 
 export const saveState = (state) => {
-  try {
-    const serializedState = JSON.stringify(state);
-    localStorage.setItem('state', serializedState);
-  } catch (err) {
-    // Ignore write errors
-  }
+  localforage.setItem('state', state).then((value) => value)
+  .catch((err) => {
+    console.log(err);
+  });
 };
+
+export const loadState = () => localforage.getItem('state');
+
+// export const loadState = () => {
+//   localforage.setItem('state', function (err) {
+//     // if err is non-null, we got an error
+//   });
+// }
+
+// export const loadState = () => {
+//   const serializedState = localforage.getItem('state', function (err, value) {
+//     // if err is non-null, we got an error. otherwise, value is the value
+//     if(err) {
+//       return undefined;
+//     }
+//     return JSON.parse(serializedState);
+//   });
+// }

src/localStorage.js

@@ -1,4 +1,5 @@
 import {
+  LOAD_INIT_DATA,
   ADD_COMPONENT,
   UPDATE_COMPONENT,
   DELETE_COMPONENT,
@@ -41,7 +42,6 @@ import {
   deleteProp,
 } from '../utils/componentReducer.util';
 
-
 const initialApplicationState = {
   totalComponents: 0,
   nextId: 1,
@@ -55,6 +55,8 @@ const initialApplicationState = {
 
 const componentReducer = (state = initialApplicationState, action) => {
   switch (action.type) {
+    case LOAD_INIT_DATA:
+      return { ...state, ...action.payload.data };
     case ADD_COMPONENT:
       return addComponent(state, action.payload);
     case UPDATE_COMPONENT:

src/reducers/componentReducer.js

@@ -1,21 +1,19 @@
 import logger from 'redux-logger';
-// import throttle from 'lodash.throttle';
+import throttle from 'lodash.throttle';
 import { composeWithDevTools } from 'redux-devtools-extension';
 import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import reducers from './reducers';
-// import { loadState, saveState } from './localStorage';
-
-// const persistedState = loadState();
+import { saveState } from './localStorage';
 
 const store = createStore(
   reducers,
   compose(
     applyMiddleware(logger, thunk),
     composeWithDevTools(),
-  )
+  ),
 );
 
-// store.subscribe(throttle(() => saveState(store.getState()), 1000));
+store.subscribe(throttle(() => saveState(store.getState()), 1000));
 
 export default store;