Create modal

Author: Ives van Hoorne

src/app/containers/Deployment/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  background-color: ${props => props.theme.background};
+  padding: 1rem;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.8);
+`;
+
+export default class Deploy extends React.PureComponent {
+  render() {
+    return <Container>Deploy</Container>;
+  }
+}

src/app/pages/Sandbox/Editor/Content/Header/index.js

@@ -32,7 +32,7 @@ import UserMenu from 'app/containers/UserMenu';
 import Preferences from 'app/containers/Preferences';
 import NewSandbox from 'app/containers/modals/NewSandbox';
 
-import deploy from 'app/store/entities/sandboxes/utils/deploy';
+import Deployment from 'app/containers/Deployment';
 
 import Action from './Action';
 import FeedbackView from './FeedbackView';
@@ -109,6 +109,12 @@ export default class Header extends React.PureComponent<Props> {
 
   deploySandbox = () => {
     const { sandbox, sandboxActions } = this.props;
+
+    this.props.modalActions.openModal({
+      width: 600,
+      Body: <Deployment />,
+    });
+
     sandboxActions.deploy(sandbox.id);
   };
 

src/app/store/entities/sandboxes/actions/index.js

@@ -359,7 +359,7 @@ export default {
     const data = await res.json();
 
     if (!res.ok) {
-      dispatch(notificationActions.addNotification(data.err.mesage, 'error'));
+      dispatch(notificationActions.addNotification(data.err.message, 'error'));
       return;
     }
 

src/app/store/entities/sandboxes/utils/deploy/index.js

@@ -33,6 +33,9 @@ export default async function deploy(
   }
 
   apiData.package = JSON.parse(apiData['package.json']);
+  // We force the sandbox id, so ZEIT will always group the deployments to a
+  // single sandbox
+  apiData.package.name = sandbox.id;
   delete apiData['package.json'];
 
   const template = getTemplate(sandbox.template);