Confirm navigation when it would discard unsaved changes

- New state field: `state.entryDraft.hasChanged`, initialized to
  `false`.

- `state.entryDraft.hasChanged` set to `true` in `entryDraft` reducer
  for `DRAFT_CHANGE_FIELD`.

- `EntryPage` adds a `listenBefore` listener to `history` on
  `componentDidMount` that checks `this.props.entryDraft.hasChanged`
  and, if that is true, asks the user to confirm the navigation.

- `EntryPage` removes its listener on `componentWillUnmount`.
This commit is contained in:
Benaiah Mischenko
2017-03-15 10:47:03 -07:00
parent e7dc2c4e84
commit a88b2d6c9f
3 changed files with 27 additions and 2 deletions

View File

@ -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) => {