Skip to content

Commit 0f2bf6d

Browse files
SaerisSaraVieira
Saeris
authored and
SaraVieira
committed
🔨 Switch CodeSadbox to useOvermind, Remove title, add label to… (codesandbox#2498)
* 🔨 Switch CodeSadbox to useOvermind, Remove title, add label to Report 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. * fix mounting logic for codesadbox * fix types
1 parent 2ed733f commit 0f2bf6d

File tree

3 files changed

+97
-80
lines changed

3 files changed

+97
-80
lines changed

‎packages/app/src/app/overmind/actions.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ export const sandboxPageMounted: AsyncAction = withLoadApp();
1717

1818
export const searchMounted: AsyncAction = withLoadApp();
1919

20+
export const codesadboxMounted: AsyncAction = withLoadApp();
21+
2022
export const cliMounted: AsyncAction = withLoadApp(
2123
async ({ state, actions }) => {
2224
if (state.user) {

‎packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/CodeSadbox.tsx‎

Lines changed: 65 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,82 @@
1-
import React from 'react';
2-
import GoHome from 'react-icons/lib/go/home';
3-
import GoIssueOpened from 'react-icons/lib/go/issue-opened';
4-
import { inject, hooksObserver } from 'app/componentConnectors';
51
import { Button } from '@codesandbox/common/lib/components/Button';
62
import { dashboardUrl } from '@codesandbox/common/lib/utils/url-generator';
3+
import { useOvermind } from 'app/overmind';
74
import { Navigation } from 'app/pages/common/Navigation';
5+
import React, { useEffect } from 'react';
6+
import GoHome from 'react-icons/lib/go/home';
7+
import GoIssueOpened from 'react-icons/lib/go/issue-opened';
88
// @ts-ignore
99
import Dashboard from '-!svg-react-loader!@codesandbox/common/lib/icons/dashboard.svg';
10-
import { Sadbox } from './Sadbox';
10+
1111
import { IFallbackComponentProps } from '../types';
1212
import { buildCrashReport } from './buildCrashReport';
1313
import {
14+
Actions,
15+
ButtonIcon,
1416
Container,
17+
Content,
1518
Header,
1619
Nav,
17-
Content,
18-
Title,
1920
Subtitle,
20-
Actions,
21-
ButtonIcon,
21+
Title,
2222
} from './elements';
23+
import { Sadbox } from './Sadbox';
2324

24-
export const CodeSadbox = inject('store')(
25-
hooksObserver(
26-
({ error, trace, store }: IFallbackComponentProps & { store: any }) => (
27-
<Container>
28-
<Header>
29-
<Nav>
30-
<Navigation title="CodeSadbox" />
31-
</Nav>
32-
</Header>
33-
<Content>
34-
<Title>Oh no! Something broke!</Title>
35-
<Sadbox scale={3} />
36-
<Subtitle>CodeSadbox</Subtitle>
37-
<Actions>
38-
{store.isLoggedIn ? (
39-
<Button small secondary href={dashboardUrl()}>
40-
<ButtonIcon>
41-
<Dashboard />
42-
</ButtonIcon>
43-
Go to Dashboard
44-
</Button>
45-
) : (
46-
<Button small secondary href="/">
47-
<ButtonIcon>
48-
<GoHome />
49-
</ButtonIcon>
50-
Back to Home
51-
</Button>
52-
)}
53-
{/*
54-
// @ts-ignore */}
55-
<Button
56-
small
57-
target="_blank"
58-
rel="noopener"
59-
href={buildCrashReport({ error, trace })}
60-
>
25+
export const CodeSadbox: React.FC<IFallbackComponentProps> = ({
26+
error,
27+
trace,
28+
}) => {
29+
const {
30+
actions: { codesadboxMounted },
31+
state: { isLoggedIn },
32+
} = useOvermind();
33+
34+
useEffect(() => {
35+
codesadboxMounted();
36+
}, [codesadboxMounted]);
37+
38+
return (
39+
<Container>
40+
<Header>
41+
<Nav>
42+
<Navigation title="CodeSadbox" />
43+
</Nav>
44+
</Header>
45+
<Content>
46+
<Title>Oh no! Something broke!</Title>
47+
<Sadbox scale={3} />
48+
<Subtitle>CodeSadbox</Subtitle>
49+
<Actions>
50+
{isLoggedIn ? (
51+
<Button small secondary href={dashboardUrl()}>
52+
<ButtonIcon>
53+
<Dashboard />
54+
</ButtonIcon>
55+
Go to Dashboard
56+
</Button>
57+
) : (
58+
<Button small secondary href="/">
6159
<ButtonIcon>
62-
<GoIssueOpened />
60+
<GoHome />
6361
</ButtonIcon>
64-
Report Crash
62+
Back to Home
6563
</Button>
66-
</Actions>
67-
</Content>
68-
</Container>
69-
)
70-
)
71-
);
64+
)}
65+
{/*
66+
// @ts-ignore */}
67+
<Button
68+
small
69+
target="_blank"
70+
rel="noopener"
71+
href={buildCrashReport({ error, trace })}
72+
>
73+
<ButtonIcon>
74+
<GoIssueOpened />
75+
</ButtonIcon>
76+
Report Crash
77+
</Button>
78+
</Actions>
79+
</Content>
80+
</Container>
81+
);
82+
};

‎packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/buildCrashReport.ts‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,45 +9,49 @@ export const buildCrashReport = ({
99
error,
1010
trace,
1111
}: IbuildCrashReport): string => {
12+
const url = new URL(
13+
`https://github.com/codesandbox/codesandbox-client/issues/new`
14+
);
1215
const { name, version, os } = browser();
1316

14-
const title = `💥 Crash Report: <Please Add a Short Description of Crash Circumstances>`;
17+
url.searchParams.set(
18+
`body`,
19+
`<h1>💥 Crash Report</h1>
1520
16-
const body = `<h1>💥 Crash Report</h1>
21+
<h2>What were you trying to accomplish when the crash occurred?</h2>
1722
18-
<h2>What were you trying to accomplish when the crash occurred?</h2>
23+
> 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!
1924
20-
> 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!
25+
<h3>Link to sandbox: [link]() (optional)</h3>
2126
22-
<h3>Link to sandbox: [link]() (optional)</h3>
27+
<h3>Crash Details</h3>
2328
24-
<h3>Crash Details</h3>
29+
<details>
30+
<summary>Environment</summary>
2531
26-
<details>
27-
<summary>Environment</summary>
32+
| Browser | Version | Operating System |
33+
| ------- | --------- | ---------------- |
34+
| ${name} | ${version} | ${os} |
2835
29-
| Browser | Version | Operating System |
30-
| ------- | --------- | ---------------- |
31-
| ${name} | ${version} | ${os} |
36+
**Route:**
37+
${window.location.href}
3238
33-
**Route:**
34-
${window.location.href}
39+
</details>
3540
36-
</details>
41+
<details>
42+
<summary>Error Message</summary>
3743
38-
<details>
39-
<summary>Error Message</summary>
44+
${'```'}bash
45+
${error}
46+
${error.stack}
47+
${trace}
48+
${'```'}
4049
41-
${'```'}bash
42-
${error}
43-
${error.stack}
44-
${trace}
45-
${'```'}
50+
</details>
51+
`
52+
);
4653

47-
</details>
48-
`;
54+
url.searchParams.set(`labels`, `💥 Crash Report`);
4955

50-
return `https://github.com/codesandbox/codesandbox-client/issues/new?title=${encodeURI(
51-
title
52-
)}&body=${encodeURI(body)}`;
56+
return url.toString();
5357
};

0 commit comments

Comments
 (0)