Show modal instead of alert (codesandbox#216)

* Show modal instead of alert

* Delete sandbox instead of Delete File

* Close sandbox, remove async, fix prop-types

Author: jseminck

src/app/pages/Profile/Sandboxes/index.js

@@ -7,6 +7,9 @@ import { connect } from 'react-redux';
 import Button from 'app/components/buttons/Button';
 import type { PaginatedSandboxes } from 'common/types';
 
+import modalActionCreators from 'app/store/modal/actions';
+import Alert from 'app/components/Alert';
+
 import SandboxList from 'app/components/sandbox/SandboxList';
 import sandboxActionCreators from 'app/store/entities/sandboxes/actions';
 
@@ -36,6 +39,7 @@ type Props = {
   fetchSandboxes: Function,
   sandboxes: PaginatedSandboxes,
   sandboxActions: typeof sandboxActionCreators,
+  modalActions: typeof modalActionCreators,
   isCurrentUser: boolean,
 };
 
@@ -66,13 +70,23 @@ class Sandboxes extends React.PureComponent<Props> {
     return Math.ceil(sandboxCount / PER_PAGE_COUNT);
   };
 
-  deleteSandbox = async (id: string) => {
-    // eslint-disable-next-line no-alert
-    const really = confirm(`Are you sure you want to delete this sandbox?`); // TODO: confirm???
-    if (really) {
-      await this.props.sandboxActions.deleteSandbox(id);
-      this.fetch(true);
-    }
+  deleteSandbox = (id: string) => {
+    const { modalActions } = this.props;
+
+    modalActions.openModal({
+      Body: (
+        <Alert
+          title="Delete Sandbox"
+          body={<span>Are you sure you want to delete this sandbox?</span>}
+          onCancel={modalActions.closeModal}
+          onDelete={async () => {
+            await this.props.sandboxActions.deleteSandbox(id);
+            this.fetch(true);
+            modalActions.closeModal();
+          }}
+        />
+      ),
+    });
   };
 
   render() {
@@ -118,10 +132,9 @@ class Sandboxes extends React.PureComponent<Props> {
   }
 }
 
-const mapStateToProps = () => ({});
-
 const mapDispatchToProps = dispatch => ({
   sandboxActions: bindActionCreators(sandboxActionCreators, dispatch),
+  modalActions: bindActionCreators(modalActionCreators, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(Sandboxes);
+export default connect(undefined, mapDispatchToProps)(Sandboxes);

src/app/pages/Sandbox/Editor/Workspace/SandboxActions/index.js

@@ -50,7 +50,7 @@ class SandboxSettings extends React.PureComponent {
     modalActions.openModal({
       Body: (
         <Alert
-          title="Delete File"
+          title="Delete Sandbox"
           body={<span>Are you sure you want to delete this sandbox?</span>}
           onCancel={modalActions.closeModal}
           onDelete={() => {