Persists Redux store when reloading app for login

Author: andrewn

client/modules/IDE/actions/project.js

@@ -7,6 +7,7 @@ import { setUnsavedChanges,
   justOpenedProject,
   resetJustOpenedProject,
   showErrorModal } from './ide';
+import { saveState } from '../../../persistState';
 
 const ROOT_URL = process.env.API_URL;
 
@@ -41,6 +42,13 @@ export function getProject(id) {
   };
 }
 
+export function persistState() {
+  return (dispatch, getState) => {
+    const state = getState();
+    saveState(state);
+  };
+}
+
 export function saveProject(autosave = false) {
   return (dispatch, getState) => {
     const state = getState();

client/modules/IDE/pages/IDEView.jsx

@@ -170,8 +170,10 @@ class IDEView extends React.Component {
   warnIfUnsavedChanges(route) { // eslint-disable-line
     if (route && (route.action === 'PUSH' && (route.pathname === '/login' || route.pathname === '/signup'))) {
       // don't warn
+      this.props.persistState();
     } else if (route && (this.props.location.pathname === '/login' || this.props.location.pathname === '/signup')) {
       // don't warn
+      this.props.persistState();
     } else if (this.props.ide.unsavedChanges) {
       if (!window.confirm('Are you sure you want to leave this page? You have unsaved changes.')) {
         return false;
@@ -588,7 +590,8 @@ IDEView.propTypes = {
   })).isRequired,
   clearConsole: PropTypes.func.isRequired,
   showErrorModal: PropTypes.func.isRequired,
-  hideErrorModal: PropTypes.func.isRequired
+  hideErrorModal: PropTypes.func.isRequired,
+  persistState: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {

client/persistState.js

@@ -0,0 +1,28 @@
+/*
+  Saves and loads a snapshot of the Redux store
+  state to session storage
+*/
+const key = 'p5js-editor';
+const storage = sessionStorage;
+
+export const saveState = (state) => {
+  console.warn('save');
+  try {
+    storage.setItem(key, JSON.stringify(state));
+  } catch (error) {
+    console.warn('Unable to persist state to storage:', error);
+  }
+};
+
+export const loadState = () => {
+  try {
+    return JSON.parse(storage.getItem(key));
+  } catch (error) {
+    console.warn('Failed to retrieve initialize state from storage:', error);
+    return null;
+  }
+};
+
+export const clearState = () => {
+  storage.removeItem(key);
+};

client/store.js

@@ -2,6 +2,7 @@ import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import DevTools from './modules/App/components/DevTools';
 import rootReducer from './reducers';
+import { clearState, loadState } from './persistState';
 
 export default function configureStore(initialState) {
   const enhancers = [
@@ -13,9 +14,12 @@ export default function configureStore(initialState) {
     enhancers.push(window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument());
   }
 
+  const savedState = loadState();
+  clearState();
+
   const store = createStore(
     rootReducer,
-    initialState,
+    savedState != null ? savedState : initialState,
     compose(...enhancers)
   );