Merge pull request #285 from Benaiah/confirm-navigation-while-changes-unsaved

Confirm navigation when it would discard unsaved changes

src/containers/EntryPage.js

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
+import history from '../routing/history';
 import {
   loadEntry,
   createDraftFromEntry,
@@ -49,6 +50,13 @@ class EntryPage extends React.Component {
     } else {
       loadEntry(collection, slug);
     }
+
+    this.unlisten = history.listenBefore((location) => {
+      if (this.props.entryDraft.get('hasChanged')) {
+        return "Are you sure you want to leave this page?";
+      }
+      return true;
+    });
   }
 
   componentWillReceiveProps(nextProps) {
@@ -63,6 +71,7 @@ class EntryPage extends React.Component {
 
   componentWillUnmount() {
     this.props.discardDraft();
+    this.unlisten();
   }
 
   createDraft = (entry) => {

src/reducers/__tests__/entryDraft.spec.js

@@ -2,7 +2,13 @@ import { Map, List, fromJS } from 'immutable';
 import * as actions from '../../actions/entries';
 import reducer from '../entryDraft';
 
-let initialState = Map({ entry: Map(), mediaFiles: List(), fieldsMetaData: Map(), fieldsErrors: Map() });
+let initialState = Map({
+  entry: Map(),
+  mediaFiles: List(),
+  fieldsMetaData: Map(),
+  fieldsErrors: Map(),
+  hasChanged: false,
+});
 
 const entry = {
   collection: 'posts',
@@ -31,6 +37,7 @@ describe('entryDraft reducer', () => {
           mediaFiles: [],
           fieldsMetaData: Map(),
           fieldsErrors: Map(),
+          hasChanged: false,
         })
       );
     });
@@ -52,6 +59,7 @@ describe('entryDraft reducer', () => {
           mediaFiles: [],
           fieldsMetaData: Map(),
           fieldsErrors: Map(),
+          hasChanged: false,
         })
       );
     });
@@ -77,6 +85,7 @@ describe('entryDraft reducer', () => {
             raw: 'updated',
           },
           mediaFiles: [],
+          hasChanged: true,
         }));
     });
   });

src/reducers/entryDraft.js

@@ -19,7 +19,13 @@ import {
   REMOVE_ASSET,
 } from '../actions/media';
 
-const initialState = Map({ entry: Map(), mediaFiles: List(), fieldsMetaData: Map(), fieldsErrors: Map() });
+const initialState = Map({
+  entry: Map(),
+  mediaFiles: List(),
+  fieldsMetaData: Map(),
+  fieldsErrors: Map(),
+  hasChanged: false,
+});
 
 const entryDraftReducer = (state = Map(), action) => {
   switch (action.type) {
@@ -47,6 +53,7 @@ const entryDraftReducer = (state = Map(), action) => {
       return state.withMutations((state) => {
         state.setIn(['entry', 'data', action.payload.field], action.payload.value);
         state.mergeIn(['fieldsMetaData'], fromJS(action.payload.metadata));
+        state.set('hasChanged', true);
       });
     
     case DRAFT_VALIDATION_ERRORS: