Different confirm

Ives van Hoorne · Ives van Hoorne · commit 0f5803bc3293 · 2017-04-05T00:13:55.000+02:00
diff --git a/src/app/components/ConfirmLink.js b/src/app/components/ConfirmLink.js
@@ -0,0 +1,29 @@
+// @flow
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+type Props = {
+  enabled: boolean,
+  message: string,
+};
+
+export default class ConfirmLink extends React.PureComponent {
+  props: Props;
+  confirm = (e: Event) => {
+    const { enabled, message } = this.props;
+
+    if (enabled) {
+      const yes = confirm(message);
+
+      if (!yes) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }
+  };
+
+  render() {
+    const { enabled, message, ...props } = this.props;
+    return <Link onClick={this.confirm} {...props} />;
+  }
+}
diff --git a/src/app/pages/Sandbox/Editor/Content/index.js b/src/app/pages/Sandbox/Editor/Content/index.js
@@ -161,11 +161,6 @@ class EditorPreview extends React.PureComponent {
 
     return (
       <FullSize>
-        <Prompt
-          when={notSynced}
-          message={() =>
-            'You have not saved this sandbox, are you sure you want to navigate away?'}
-        />
         <Header
           sandbox={sandbox}
           sandboxActions={sandboxActions}
diff --git a/src/app/pages/Sandbox/Editor/Workspace/Project/index.js b/src/app/pages/Sandbox/Editor/Workspace/Project/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
+import ConfirmLink from 'app/components/ConfirmLink';
 import WorkspaceSubtitle from '../WorkspaceSubtitle';
 import WorkspaceInputContainer from '../WorkspaceInputContainer';
 import { sandboxUrl } from '../../../../../utils/url-generator';
@@ -58,7 +58,7 @@ export default class Project extends React.PureComponent {
   };
 
   render() {
-    const { forkedSandbox } = this.props;
+    const { forkedSandbox, preventTransition } = this.props;
     const { title, description } = this.state;
     return (
       <div>
@@ -88,9 +88,13 @@ export default class Project extends React.PureComponent {
             <WorkspaceSubtitle>Forked from</WorkspaceSubtitle>
 
             <Item>
-              <Link to={sandboxUrl(forkedSandbox)}>
+              <ConfirmLink
+                enabled={preventTransition}
+                message="You have unsaved changes. Are you sure you want to navigate away?"
+                to={sandboxUrl(forkedSandbox)}
+              >
                 {forkedSandbox.title || forkedSandbox.id}
-              </Link>
+              </ConfirmLink>
             </Item>
           </div>}
       </div>
diff --git a/src/app/pages/Sandbox/Editor/Workspace/index.js b/src/app/pages/Sandbox/Editor/Workspace/index.js
@@ -45,6 +45,7 @@ const Workspace = ({ sandbox, sandboxActions }: Props) => (
         title={sandbox.title}
         description={sandbox.description}
         forkedSandbox={sandbox.forkedFromSandbox}
+        preventTransition={sandbox.modules.some(m => m.isNotSynced)}
       />
     </WorkspaceItem>
 
