notify user when abandoning publish; clear form

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?';

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 {
           <SpaceAround>
             <ButtonTertiary
               value={'Cancel'}
-              onClickHandler={this.props.clearFile}
+              onClickHandler={this.onCancel}
             />
           </SpaceAround>
         </Row>

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 {
             <PublishStatus />
           );
         } else {
-          return <PublishPreview isUpdate={isUpdate} />;
+          return (
+            <React.Fragment>
+              <Prompt
+                message={SAVE}
+              />
+              <PublishPreview isUpdate={isUpdate} />
+            </React.Fragment>
+          );
         }
       }
       return <Dropzone />;
@@ -26,4 +35,4 @@ class PublishTool extends React.Component {
   }
 };
 
-export default PublishTool;
+export default withRouter(PublishTool);

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);

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

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);

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;