Merge pull request #858 from ajgreenb/save-editor-state

Add a grace period during which a closed workspace can be reloaded

Author: outoftime

locales/en/translation.json

@@ -51,7 +51,6 @@
   },
   "workspace": {
     "confirmations": {
-      "unload-unsaved": "If you leave the page, you will lose your work. To save your work, you must log in using your GitHub account.",
       "anonymous-gist-export": "Are you sure you want to export this gist anonymously? If you sign in before exporting, the gist will be added to your GitHub account."
     },
     "loading": "Loading…",

src/actions/clients.js

@@ -18,3 +18,5 @@ export const repoExportError = createAction('REPO_EXPORT_ERROR');
 export const repoExportDisplayed = createAction('REPO_EXPORT_DISPLAYED');
 export const repoExportNotDisplayed =
   createAction('REPO_EXPORT_NOT_DISPLAYED');
+export const projectRestoredFromLastSession =
+  createAction('PROJECT_RESTORED_FROM_LAST_SESSION');

src/clients/localStorage.js

@@ -0,0 +1,21 @@
+const PROJECT_STORAGE_KEY = 'last-closed-session-project-state';
+const GRACE_PERIOD = 5 * 60 * 1000;
+
+export function dehydrateProject(project) {
+  localStorage.setItem(PROJECT_STORAGE_KEY, JSON.stringify({
+    dehydratedAt: Date.now(),
+    project,
+  }));
+}
+
+export function rehydrateProject() {
+  const dehydrated = localStorage.getItem(PROJECT_STORAGE_KEY);
+  localStorage.removeItem(PROJECT_STORAGE_KEY);
+  if (dehydrated) {
+    const rehydrated = JSON.parse(dehydrated);
+    if (Date.now() - rehydrated.dehydratedAt <= GRACE_PERIOD) {
+      return rehydrated.project;
+    }
+  }
+  return null;
+}

src/components/Workspace.jsx

@@ -16,6 +16,7 @@ import {
   onSignedOut,
   startSessionHeartbeat,
 } from '../clients/firebase';
+import {dehydrateProject, rehydrateProject} from '../clients/localStorage';
 
 import {
   updateProjectSource,
@@ -53,7 +54,6 @@ function mapStateToProps(state) {
     isUserTyping: state.getIn(['ui', 'editors', 'typing']),
     editorsFlex: state.getIn(['ui', 'workspace', 'columnFlex']).toJS(),
     rowsFlex: state.getIn(['ui', 'workspace', 'rowFlex']).toJS(),
-    currentUser: state.get('user').toJS(),
     ui: state.get('ui').toJS(),
   };
 }
@@ -63,7 +63,7 @@ class Workspace extends React.Component {
     super();
     bindAll(
       this,
-      '_confirmUnload',
+      '_handleUnload',
       '_handleComponentUnhide',
       '_handleComponentHide',
       '_handleDividerDrag',
@@ -94,30 +94,30 @@ class Workspace extends React.Component {
       }
       isExperimental = Object.keys(query).includes('experimental');
     }
+    const rehydratedProject = rehydrateProject();
     history.replaceState({}, '', location.pathname);
     this.props.dispatch(applicationLoaded({
       snapshotKey,
       gistId,
       isExperimental,
+      rehydratedProject,
     }));
     this._listenForAuthChange();
     startSessionHeartbeat();
   }
 
   componentDidMount() {
-    addEventListener('beforeunload', this._confirmUnload);
+    addEventListener('beforeunload', this._handleUnload);
   }
 
   componentWillUnmount() {
-    removeEventListener('beforeunload', this._confirmUnload);
+    removeEventListener('beforeunload', this._handleUnload);
   }
 
-  _confirmUnload(event) {
-    const {currentUser, currentProject} = this.props;
-    if (!currentUser.authenticated) {
-      if (!isNull(currentProject) && !isPristineProject(currentProject)) {
-        event.returnValue = t('workspace.confirmations.unload-unsaved');
-      }
+  _handleUnload() {
+    const {currentProject} = this.props;
+    if (!isNull(currentProject) && !isPristineProject(currentProject)) {
+      dehydrateProject(currentProject);
     }
   }
 
@@ -303,7 +303,6 @@ class Workspace extends React.Component {
 
 Workspace.propTypes = {
   currentProject: PropTypes.object,
-  currentUser: PropTypes.object.isRequired,
   dispatch: PropTypes.func.isRequired,
   editorsFlex: PropTypes.array.isRequired,
   errors: PropTypes.object.isRequired,

src/reducers/currentProject.js

@@ -19,6 +19,8 @@ function currentProject(stateIn, action) {
       return state.set('projectKey', action.payload.projectKey);
     case 'GIST_IMPORTED':
       return state.set('projectKey', action.payload.projectKey);
+    case 'PROJECT_RESTORED_FROM_LAST_SESSION':
+      return state.set('projectKey', action.payload.projectKey);
     default:
       return state;
   }

src/reducers/projects.js

@@ -127,6 +127,9 @@ export default function reduceProjects(stateIn, action) {
         action.payload.gistData,
       );
 
+    case 'PROJECT_RESTORED_FROM_LAST_SESSION':
+      return addProject(state, action.payload);
+
     case 'TOGGLE_LIBRARY':
       return state.updateIn(
         [action.payload.projectKey, 'enabledLibraries'],

src/sagas/errors.js

@@ -63,6 +63,11 @@ export default function* () {
     takeEvery('CHANGE_CURRENT_PROJECT', validateCurrentProject, tasks),
     takeEvery('GIST_IMPORTED', validateCurrentProject, tasks),
     takeEvery('SNAPSHOT_IMPORTED', validateCurrentProject, tasks),
+    takeEvery(
+      'PROJECT_RESTORED_FROM_LAST_SESSION',
+      validateCurrentProject,
+      tasks,
+    ),
     takeEvery('UPDATE_PROJECT_SOURCE', updateProjectSource, tasks),
     takeEvery('TOGGLE_LIBRARY', toggleLibrary, tasks),
   ]);

src/sagas/projects.js

@@ -21,6 +21,7 @@ import {
   snapshotImported,
   snapshotImportError,
   snapshotNotFound,
+  projectRestoredFromLastSession,
 } from '../actions/clients';
 import {saveCurrentProject} from '../util/projectUtils';
 import {loadGistFromId} from '../clients/github';
@@ -32,6 +33,10 @@ export function* applicationLoaded(action) {
     yield call(importGist, action);
   } else if (isString(action.payload.snapshotKey)) {
     yield call(importSnapshot, action);
+  } else if (action.payload.rehydratedProject) {
+    yield put(
+      projectRestoredFromLastSession(action.payload.rehydratedProject),
+    );
   } else {
     yield call(createProject);
   }

test/unit/reducers/currentProject.js

@@ -10,6 +10,7 @@ import {
 } from '../../../src/actions/projects';
 import {
   snapshotImported,
+  projectRestoredFromLastSession,
 } from '../../../src/actions/clients';
 import {gistData} from '../../helpers/factory';
 
@@ -39,6 +40,13 @@ test('snapshotImported', reducerTest(
   Immutable.fromJS({projectKey}),
 ));
 
+test('projectRestoredFromLastSession', reducerTest(
+  reducer,
+  initialState,
+  partial(projectRestoredFromLastSession, {projectKey}),
+  Immutable.fromJS({projectKey}),
+));
+
 test('gistImported', reducerTest(
   reducer,
   initialState,

test/unit/reducers/projects.js

@@ -22,6 +22,7 @@ import {
 } from '../../../src/actions/projects';
 import {
   snapshotImported,
+  projectRestoredFromLastSession,
 } from '../../../src/actions/clients';
 import {
   focusLine,
@@ -103,6 +104,21 @@ tap(project(), importedProject =>
   )),
 );
 
+tap(project(), rehydratedProject =>
+  test('projectRestoredFromLastSession', reducerTest(
+    reducer,
+    states.initial,
+    partial(
+      projectRestoredFromLastSession,
+      rehydratedProject,
+    ),
+    states.initial.set(
+      rehydratedProject.projectKey,
+      Project.fromJS(rehydratedProject),
+    ),
+  )),
+);
+
 test('gistImported', (t) => {
   t.test('HTML and CSS, no JSON', reducerTest(
     reducer,