From 6baa66923762e9888668385eca755dd5ccf11ab5 Mon Sep 17 00:00:00 2001
From: Drake Costa <drake@saeris.io>
Date: Mon, 23 Sep 2019 22:45:59 -0700
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=94=A8=20Switch=20CodeSadbox=20to=20u?=
 =?UTF-8?q?seOvermind,=20Remove=20title,=20add=20label=20to=20Report?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Small refactor to make the switch to Overmind.

Removed the title from the generated crash report, which will now require users to enter their own in order to be able to submit the report. Hopefully this makes crash reports more descriptive. Crash Reports now include the proper label automatically when they are generated.

@christianalfoni there appears to be an issue with Overmind in this component, as isLoggedIn returns false even when the user is in fact logged in (test this by running locally and navigating to http://localhost:3000/codesadbox from another page). Not quite sure how to solve this one, so I'd appreciate it if you can investigate! Probably has something to do with the error boundary.
---
 .../ErrorBoundary/CodeSadbox/CodeSadbox.tsx   | 97 ++++++++++---------
 .../CodeSadbox/buildCrashReport.ts            | 56 ++++++-----
 2 files changed, 81 insertions(+), 72 deletions(-)

diff --git a/packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/CodeSadbox.tsx b/packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/CodeSadbox.tsx
index ac20f8c2d87..0011822deb3 100644
--- a/packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/CodeSadbox.tsx
+++ b/packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/CodeSadbox.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import GoHome from 'react-icons/lib/go/home';
 import GoIssueOpened from 'react-icons/lib/go/issue-opened';
-import { inject, hooksObserver } from 'app/componentConnectors';
+import { useOvermind } from 'app/overmind';
 import { Button } from '@codesandbox/common/lib/components/Button';
 import { dashboardUrl } from '@codesandbox/common/lib/utils/url-generator';
 import { Navigation } from 'app/pages/common/Navigation';
@@ -21,51 +21,56 @@ import {
   ButtonIcon,
 } from './elements';
 
-export const CodeSadbox = inject('store')(
-  hooksObserver(
-    ({ error, trace, store }: IFallbackComponentProps & { store: any }) => (
-      <Container>
-        <Header>
-          <Nav>
-            <Navigation title="CodeSadbox" />
-          </Nav>
-        </Header>
-        <Content>
-          <Title>Oh no! Something broke!</Title>
-          <Sadbox scale={3} />
-          <Subtitle>CodeSadbox</Subtitle>
-          <Actions>
-            {store.isLoggedIn ? (
-              <Button small secondary href={dashboardUrl()}>
-                <ButtonIcon>
-                  <Dashboard />
-                </ButtonIcon>
-                Go to Dashboard
-              </Button>
-            ) : (
-              <Button small secondary href="/">
-                <ButtonIcon>
-                  <GoHome />
-                </ButtonIcon>
-                Back to Home
-              </Button>
-            )}
-            {/*
-          // @ts-ignore */}
-            <Button
-              small
-              target="_blank"
-              rel="noopener"
-              href={buildCrashReport({ error, trace })}
-            >
+export const CodeSadbox: React.FC<IFallbackComponentProps> = ({
+  error,
+  trace,
+}) => {
+  const {
+    state: { isLoggedIn },
+  } = useOvermind();
+
+  return (
+    <Container>
+      <Header>
+        <Nav>
+          <Navigation title="CodeSadbox" />
+        </Nav>
+      </Header>
+      <Content>
+        <Title>Oh no! Something broke!</Title>
+        <Sadbox scale={3} />
+        <Subtitle>CodeSadbox</Subtitle>
+        <Actions>
+          {isLoggedIn ? (
+            <Button small secondary href={dashboardUrl()}>
+              <ButtonIcon>
+                <Dashboard />
+              </ButtonIcon>
+              Go to Dashboard
+            </Button>
+          ) : (
+            <Button small secondary href="/">
               <ButtonIcon>
-                <GoIssueOpened />
+                <GoHome />
               </ButtonIcon>
-              Report Crash
+              Back to Home
             </Button>
-          </Actions>
-        </Content>
-      </Container>
-    )
-  )
-);
+          )}
+          {/*
+              // @ts-ignore */}
+          <Button
+            small
+            target="_blank"
+            rel="noopener"
+            href={buildCrashReport({ error, trace })}
+          >
+            <ButtonIcon>
+              <GoIssueOpened />
+            </ButtonIcon>
+            Report Crash
+          </Button>
+        </Actions>
+      </Content>
+    </Container>
+  );
+};
diff --git a/packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/buildCrashReport.ts b/packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/buildCrashReport.ts
index f405244c216..474b50dddd2 100644
--- a/packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/buildCrashReport.ts
+++ b/packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/buildCrashReport.ts
@@ -9,45 +9,49 @@ export const buildCrashReport = ({
   error,
   trace,
 }: IbuildCrashReport): string => {
+  const url = new URL(
+    `https://github.com/codesandbox/codesandbox-client/issues/new`
+  );
   const { name, version, os } = browser();
 
-  const title = `💥 Crash Report: <Please Add a Short Description of Crash Circumstances>`;
+  url.searchParams.set(
+    `body`,
+    `<h1>💥 Crash Report</h1>
 
-  const body = `<h1>💥 Crash Report</h1>
+  <h2>What were you trying to accomplish when the crash occurred?</h2>
 
-<h2>What were you trying to accomplish when the crash occurred?</h2>
+  > Please use this issue template to describe what you were doing when you encountered this crash. While we are able to fill in some details automatically, it's not always enough to reproduce!
 
-> Please use this issue template to describe what you were doing when you encountered this crash. While we are able to fill in some details automatically, it's not always enough to reproduce!
+  <h3>Link to sandbox: [link]() (optional)</h3>
 
-<h3>Link to sandbox: [link]() (optional)</h3>
+  <h3>Crash Details</h3>
 
-<h3>Crash Details</h3>
+  <details>
+  <summary>Environment</summary>
 
-<details>
-<summary>Environment</summary>
+  | Browser |  Version  | Operating System |
+  | ------- | --------- | ---------------- |
+  | ${name} | ${version} | ${os}           |
 
-| Browser |  Version  | Operating System |
-| ------- | --------- | ---------------- |
-| ${name} | ${version} | ${os}           |
+  **Route:**
+  ${window.location.href}
 
-**Route:**
-${window.location.href}
+  </details>
 
-</details>
+  <details>
+  <summary>Error Message</summary>
 
-<details>
-<summary>Error Message</summary>
+  ${'```'}bash
+  ${error}
+  ${error.stack}
+  ${trace}
+  ${'```'}
 
-${'```'}bash
-${error}
-${error.stack}
-${trace}
-${'```'}
+  </details>
+  `
+  );
 
-</details>
-`;
+  url.searchParams.set(`labels`, `💥 Crash Report`);
 
-  return `https://github.com/codesandbox/codesandbox-client/issues/new?title=${encodeURI(
-    title
-  )}&body=${encodeURI(body)}`;
+  return url.toString();
 };

From b7cef9dd33b7dced9281aa44840749dd2cffeb0f Mon Sep 17 00:00:00 2001
From: Christian Alfoni <christianalfoni@gmail.com>
Date: Tue, 24 Sep 2019 11:04:47 +0200
Subject: [PATCH 2/3] fix mounting logic for codesadbox

---
 packages/app/src/app/overmind/actions.ts      |  7 +++--
 .../ErrorBoundary/CodeSadbox/CodeSadbox.tsx   | 26 ++++++++++++-------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/app/src/app/overmind/actions.ts b/packages/app/src/app/overmind/actions.ts
index 677c8f7283a..75cfc9782cd 100755
--- a/packages/app/src/app/overmind/actions.ts
+++ b/packages/app/src/app/overmind/actions.ts
@@ -2,9 +2,10 @@ import {
   NotificationType,
   convertTypeToStatus,
 } from '@codesandbox/common/lib/utils/notifications';
-import { Action, AsyncAction } from '.';
-import * as internalActions from './internalActions';
+
 import { withLoadApp } from './factories';
+import * as internalActions from './internalActions';
+import { Action, AsyncAction } from '.';
 
 export const internal = internalActions;
 
@@ -16,6 +17,8 @@ export const sandboxPageMounted: AsyncAction = withLoadApp();
 
 export const searchMounted: AsyncAction = withLoadApp();
 
+export const codesadboxMounted: AsyncAction = withLoadApp();
+
 export const cliMounted: AsyncAction = withLoadApp(
   async ({ state, actions }) => {
     if (state.user) {
diff --git a/packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/CodeSadbox.tsx b/packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/CodeSadbox.tsx
index 0011822deb3..7edb5e415e7 100644
--- a/packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/CodeSadbox.tsx
+++ b/packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/CodeSadbox.tsx
@@ -1,34 +1,40 @@
-import React from 'react';
-import GoHome from 'react-icons/lib/go/home';
-import GoIssueOpened from 'react-icons/lib/go/issue-opened';
-import { useOvermind } from 'app/overmind';
+// @ts-ignore
 import { Button } from '@codesandbox/common/lib/components/Button';
 import { dashboardUrl } from '@codesandbox/common/lib/utils/url-generator';
+import { useOvermind } from 'app/overmind';
 import { Navigation } from 'app/pages/common/Navigation';
-// @ts-ignore
+import React, { useEffect } from 'react';
+import GoHome from 'react-icons/lib/go/home';
+import GoIssueOpened from 'react-icons/lib/go/issue-opened';
 import Dashboard from '-!svg-react-loader!@codesandbox/common/lib/icons/dashboard.svg';
-import { Sadbox } from './Sadbox';
+
 import { IFallbackComponentProps } from '../types';
 import { buildCrashReport } from './buildCrashReport';
 import {
+  Actions,
+  ButtonIcon,
   Container,
+  Content,
   Header,
   Nav,
-  Content,
-  Title,
   Subtitle,
-  Actions,
-  ButtonIcon,
+  Title,
 } from './elements';
+import { Sadbox } from './Sadbox';
 
 export const CodeSadbox: React.FC<IFallbackComponentProps> = ({
   error,
   trace,
 }) => {
   const {
+    actions: { codesadboxMounted },
     state: { isLoggedIn },
   } = useOvermind();
 
+  useEffect(() => {
+    codesadboxMounted();
+  }, [codesadboxMounted]);
+
   return (
     <Container>
       <Header>

From 9693803b51dbdd59f4ca174791acc4f1c96b99a8 Mon Sep 17 00:00:00 2001
From: Sara <hey@iamsaravieira.com>
Date: Fri, 27 Sep 2019 15:15:13 +0200
Subject: [PATCH 3/3] fix types

---
 .../app/pages/common/ErrorBoundary/CodeSadbox/CodeSadbox.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/CodeSadbox.tsx b/packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/CodeSadbox.tsx
index 7edb5e415e7..1698543f289 100644
--- a/packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/CodeSadbox.tsx
+++ b/packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/CodeSadbox.tsx
@@ -1,4 +1,3 @@
-// @ts-ignore
 import { Button } from '@codesandbox/common/lib/components/Button';
 import { dashboardUrl } from '@codesandbox/common/lib/utils/url-generator';
 import { useOvermind } from 'app/overmind';
@@ -6,6 +5,7 @@ import { Navigation } from 'app/pages/common/Navigation';
 import React, { useEffect } from 'react';
 import GoHome from 'react-icons/lib/go/home';
 import GoIssueOpened from 'react-icons/lib/go/issue-opened';
+// @ts-ignore
 import Dashboard from '-!svg-react-loader!@codesandbox/common/lib/icons/dashboard.svg';
 
 import { IFallbackComponentProps } from '../types';