Fix stackbit modal closing

CompuIves · CompuIves · commit d12bf63453ab · 2019-12-12T15:37:49.000+01:00
diff --git a/packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Import/Import.tsx b/packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Import/Import.tsx
@@ -44,7 +44,7 @@ const copyToClipboard = (str: string) => {
 };
 
 export const Import = () => {
-  const { state } = useOvermind();
+  const { state, actions } = useOvermind();
   const [error, setError] = useState(null);
   const [transformedUrl, setTransformedUrl] = useState('');
   const [url, setUrl] = useState('');
@@ -161,6 +161,7 @@ export const Import = () => {
               <StackbitButton
                 style={{ fontSize: 11 }}
                 username={state.user.username}
+                closeModal={() => actions.modalClosed()}
               />
             )}
           </Column>
diff --git a/packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Import/Stackbit.tsx b/packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Import/Stackbit.tsx
@@ -3,42 +3,47 @@ import history from 'app/utils/history';
 import { Button } from '@codesandbox/common/lib/components/Button';
 import { gitHubToSandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 
-window.addEventListener('message', receiveMessage, false);
+function openStackbit(username: string, closeModal: () => void) {
+  const stackbitWindow = window.open(
+    `https://app.stackbit.com/wizard?ref=codesandbox&githubUser=${username}&ssgExclusive=1&ssg=gatsby&cmsExclusive=netlifycms,forestry,nocms`,
+    '_blank',
+    'width=1210,height=800'
+  );
+
+  window.addEventListener('message', receiveMessage, false);
 
-function receiveMessage(event) {
-  if (event.origin === 'https://app.stackbit.com' && event.data) {
-    const data = JSON.parse(event.data);
+  function receiveMessage(event) {
+    if (event.origin === 'https://app.stackbit.com' && event.data) {
+      const data = JSON.parse(event.data);
 
-    if (
-      data.type === 'project-update' &&
-      data.project &&
-      data.project.repository &&
-      data.project.repository.url
-    ) {
-      // @ts-ignore
-      window.stackbitWindow.close();
+      if (
+        data.type === 'project-update' &&
+        data.project &&
+        data.project.repository &&
+        data.project.repository.url
+      ) {
+        stackbitWindow.close();
 
-      history.push(gitHubToSandboxUrl(data.project.repository.url));
+        closeModal();
+        history.push(gitHubToSandboxUrl(data.project.repository.url));
+        window.removeEventListener('message', receiveMessage, false);
+      }
     }
   }
 }
 
-function openStackbit(username: string) {
-  // @ts-ignore
-  window.stackbitWindow = window.open(
-    `https://app.stackbit.com/wizard?ref=codesandbox&githubUser=${username}&ssgExclusive=1&ssg=gatsby&cmsExclusive=netlifycms,forestry,nocms`,
-    '_blank',
-    'width=1210,height=800'
-  );
-}
-
 interface Props {
   username: string;
+  closeModal: () => void;
   style?: React.CSSProperties;
 }
 
-export const StackbitButton = ({ username, style }: Props) => (
-  <Button style={style} small onClick={() => openStackbit(username)}>
+export const StackbitButton = ({ username, style, closeModal }: Props) => (
+  <Button
+    style={style}
+    small
+    onClick={() => openStackbit(username, closeModal)}
+  >
     Generate Sandbox
   </Button>
 );
