From 24626bcb02edef24df15696c20d405c185aa86b5 Mon Sep 17 00:00:00 2001 From: Travis Eden Date: Mon, 15 Oct 2018 17:11:59 -0400 Subject: [PATCH] notify user when abandoning publish; clear form --- client/src/constants/confirmation_messages.js | 1 + client/src/containers/PublishDetails/view.jsx | 14 +++++++++++++- client/src/containers/PublishTool/view.jsx | 13 +++++++++++-- client/src/pages/AboutPage/index.jsx | 3 ++- client/src/pages/EditPage/view.jsx | 16 ++++++++-------- client/src/pages/HomePage/index.js | 2 ++ client/src/pages/HomePage/view.jsx | 6 ++---- 7 files changed, 39 insertions(+), 16 deletions(-) create mode 100644 client/src/constants/confirmation_messages.js diff --git a/client/src/constants/confirmation_messages.js b/client/src/constants/confirmation_messages.js new file mode 100644 index 00000000..3ec79818 --- /dev/null +++ b/client/src/constants/confirmation_messages.js @@ -0,0 +1 @@ +export const SAVE = 'Everything not saved will be lost. Are you sure you want to leave this page?'; diff --git a/client/src/containers/PublishDetails/view.jsx b/client/src/containers/PublishDetails/view.jsx index 42d37c77..eb56b3b9 100644 --- a/client/src/containers/PublishDetails/view.jsx +++ b/client/src/containers/PublishDetails/view.jsx @@ -12,12 +12,14 @@ import ButtonTertiary from '@components/ButtonTertiary'; import ButtonSecondary from '@components/ButtonSecondary'; import SpaceAround from '@components/SpaceAround'; import PublishFinePrint from '@components/PublishFinePrint'; +import { SAVE } from '../../constants/confirmation_messages'; class PublishDetails extends React.Component { constructor (props) { super(props); this.onPublishSubmit = this.onPublishSubmit.bind(this); this.abandonClaim = this.abandonClaim.bind(this); + this.onCancel = this.onCancel.bind(this); } onPublishSubmit () { this.props.startPublish(this.props.history); @@ -29,6 +31,16 @@ class PublishDetails extends React.Component { this.props.abandonClaim({claimData, history}); } } + onCancel () { + const { isUpdate, clearFile, history } = this.props; + if (isUpdate) { + history.push('/'); + } else { + if (confirm(SAVE)) { + clearFile(); + } + } + } render () { const {file, isUpdate, asset} = this.props; return ( @@ -104,7 +116,7 @@ class PublishDetails extends React.Component { diff --git a/client/src/containers/PublishTool/view.jsx b/client/src/containers/PublishTool/view.jsx index e9869a22..6ba957fe 100644 --- a/client/src/containers/PublishTool/view.jsx +++ b/client/src/containers/PublishTool/view.jsx @@ -1,8 +1,10 @@ import React from 'react'; +import { withRouter, Prompt } from 'react-router'; import Dropzone from '@containers/Dropzone'; import PublishPreview from '@components/PublishPreview'; import PublishStatus from '@containers/PublishStatus'; import PublishDisabledMessage from '@containers/PublishDisabledMessage'; +import { SAVE } from '../../constants/confirmation_messages'; class PublishTool extends React.Component { render () { @@ -18,7 +20,14 @@ class PublishTool extends React.Component { ); } else { - return ; + return ( + + + + + ); } } return ; @@ -26,4 +35,4 @@ class PublishTool extends React.Component { } }; -export default PublishTool; +export default withRouter(PublishTool); diff --git a/client/src/pages/AboutPage/index.jsx b/client/src/pages/AboutPage/index.jsx index 887e17f9..621f27b7 100644 --- a/client/src/pages/AboutPage/index.jsx +++ b/client/src/pages/AboutPage/index.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { withRouter } from 'react-router'; import PageLayout from '@components/PageLayout'; import HorizontalSplit from '@components/HorizontalSplit'; import AboutSpeechOverview from '@components/AboutSpeechOverview'; @@ -20,4 +21,4 @@ class AboutPage extends React.Component { } } -export default AboutPage; +export default withRouter(AboutPage); diff --git a/client/src/pages/EditPage/view.jsx b/client/src/pages/EditPage/view.jsx index 7a605e69..d60ffbbc 100644 --- a/client/src/pages/EditPage/view.jsx +++ b/client/src/pages/EditPage/view.jsx @@ -5,16 +5,16 @@ import PublishTool from '@containers/PublishTool'; class EditPage extends React.Component { componentDidMount () { - const {asset, isUpdate, match, onHandleShowPageUri, clearFile, setUpdateTrue, updateMetadata} = this.props; - if (!isUpdate) { - clearFile(); - onHandleShowPageUri(match.params); - setUpdateTrue(); - if (asset) { - ['title', 'description', 'license', 'nsfw'].forEach(meta => updateMetadata(meta, asset.claimData[meta])); - } + const {asset, match, onHandleShowPageUri, clearFile, setUpdateTrue, updateMetadata} = this.props; + onHandleShowPageUri(match.params); + setUpdateTrue(); + if (asset) { + ['title', 'description', 'license', 'nsfw'].forEach(meta => updateMetadata(meta, asset.claimData[meta])); } } + componentWillUnmount () { + this.props.clearFile(); + } render () { const { myChannel, asset } = this.props; // redirect if user does not own this claim diff --git a/client/src/pages/HomePage/index.js b/client/src/pages/HomePage/index.js index cd32268b..4695ef62 100644 --- a/client/src/pages/HomePage/index.js +++ b/client/src/pages/HomePage/index.js @@ -1,5 +1,6 @@ import { connect } from 'react-redux'; import { onHandleShowHomepage } from '../../actions/show'; +import { clearFile } from '../../actions/publish'; import View from './view'; const mapStateToProps = ({ show, site, channel, publish }) => { @@ -13,6 +14,7 @@ const mapStateToProps = ({ show, site, channel, publish }) => { const mapDispatchToProps = { onHandleShowHomepage, + clearFile, }; export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/client/src/pages/HomePage/view.jsx b/client/src/pages/HomePage/view.jsx index 4b163ec5..36b8a78e 100644 --- a/client/src/pages/HomePage/view.jsx +++ b/client/src/pages/HomePage/view.jsx @@ -4,10 +4,8 @@ import PublishTool from '@containers/PublishTool'; import ContentPageWrapper from '@pages/ContentPageWrapper'; class HomePage extends React.Component { - componentDidMount () { - if (this.props.isUpdate) { - this.props.clearFile(); - } + componentWillUnmount () { + this.props.clearFile(); } render () { const { homeChannel } = this.props;