Skip to content

Commit 0a8343b

Browse files
christianalfonichristianalfoni
authored
Merge branch 'master' into better-mrakdown-replies
2 parents ed9bbe6 + 8ab6646 commit 0a8343b

File tree

17 files changed

+188
-179
lines changed

17 files changed

+188
-179
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<p align="center">
22
<a href="https://codesandbox.io">
3-
<img src="https://codesandbox.io/static/img/banner.png" height="200px">
3+
<img src="https://codesandbox.io/static/img/banner.png?v=2" height="300px">
44
</a>
55
</p>
66

‎packages/app/src/app/overmind/effects/live/index.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,20 @@ export default new (class Live {
8484
},
8585
});
8686

87+
_socket.onClose(e => {
88+
if (e.code === 1006) {
89+
// This is an abrupt close, the server probably restarted or carshed. We don't want to overload
90+
// the server, so we manually wait and try to connect;
91+
_socket.disconnect();
92+
93+
const waitTime = 500 + 5000 * Math.random();
94+
95+
setTimeout(() => {
96+
_socket.connect();
97+
}, waitTime);
98+
}
99+
});
100+
87101
_socket.connect();
88102
window.socket = _socket;
89103
debug('Connecting to socket', _socket);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
8686
);
8787

8888
state.editor.isForkingSandbox = false;
89+
return;
8990
}
9091

9192
await effects.vscode.closeAllTabs();
@@ -156,6 +157,7 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
156157
}
157158
state.editor.error = detail || error.message;
158159
state.editor.isLoading = false;
160+
return;
159161
}
160162

161163
const sandbox = state.editor.currentSandbox!;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export const createLiveClicked: AsyncAction<string> = async (
9797
effects.live.sendModuleStateSyncRequest();
9898
};
9999

100-
export const liveMessageReceived: Operator<LiveMessage> = pipe(
100+
export const liveMessageReceived: Operator<LiveMessage, any> = pipe(
101101
filter((_, payload) =>
102102
Object.values(LiveMessageEvent).includes(payload.event)
103103
),

‎packages/app/src/app/pages/Dashboard/Content/Sandboxes/utils.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@ import getDefinition from '@codesandbox/common/lib/templates';
44
export function getPossibleTemplates(sandboxes: any[]) {
55
return uniqBy(
66
sandboxes.map(x => {
7-
const template = getDefinition(x.source.template);
7+
const templateId = x.source?.template;
8+
const template = getDefinition(templateId);
89

910
return {
10-
id: x.source.template,
11+
id: templateId,
1112
color: template.color,
1213
name: template.name,
1314
niceName: template.niceName,

‎packages/app/src/app/pages/Live/index.tsx‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Fullscreen from '@codesandbox/common/lib/components/flex/Fullscreen';
44
import Row from '@codesandbox/common/lib/components/flex/Row';
55
import Padding from '@codesandbox/common/lib/components/spacing/Padding';
66
import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
7-
import { Skeleton } from 'app/components/Skeleton';
87
import { SubTitle } from 'app/components/SubTitle';
98
import { Title } from 'app/components/Title';
109
import { useOvermind } from 'app/overmind';
@@ -15,7 +14,6 @@ import GithubIcon from 'react-icons/lib/go/mark-github';
1514
import { Link } from 'react-router-dom';
1615

1716
import Editor from '../Sandbox/Editor';
18-
import { BlinkingDot } from './BlinkingDot';
1917

2018
interface Props {
2119
match: {
@@ -109,30 +107,6 @@ export const LivePage: React.FC<Props> = ({ match }) => {
109107
);
110108
}
111109

112-
if (
113-
state.isAuthenticating ||
114-
state.editor.isLoading ||
115-
state.live.isLoading ||
116-
!state.editor.currentSandbox
117-
) {
118-
return (
119-
<>
120-
<Skeleton
121-
titles={[
122-
{
123-
content: <BlinkingDot />,
124-
delay: 0,
125-
},
126-
{
127-
content: 'Joining Live Session...',
128-
delay: 0.5,
129-
},
130-
]}
131-
/>
132-
</>
133-
);
134-
}
135-
136110
return null;
137111
}
138112

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Code.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import Highlight, { defaultProps } from 'prism-react-renderer';
3+
import { Element } from '@codesandbox/components';
4+
import nightOwlLight from 'prism-react-renderer/themes/nightOwlLight';
5+
6+
export const Code = props => (
7+
<>
8+
<Highlight
9+
{...defaultProps}
10+
code={props.value}
11+
language={props.language || 'js'}
12+
theme={nightOwlLight}
13+
>
14+
{({ className, style, tokens, getLineProps, getTokenProps }) => (
15+
<Element
16+
as="pre"
17+
paddingX={4}
18+
paddingY={2}
19+
marginY={2}
20+
className={className}
21+
style={style}
22+
>
23+
{tokens.map((line, i) => (
24+
<Element {...getLineProps({ line, key: i })}>
25+
{line.map((token, key) => (
26+
<Element as="span" {...getTokenProps({ token, key })} />
27+
))}
28+
</Element>
29+
))}
30+
</Element>
31+
)}
32+
</Highlight>
33+
</>
34+
);

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ export const Comments: React.FC = () => {
7272
css={css({
7373
borderBottom: '1px solid',
7474
borderColor: 'sideBar.border',
75+
minHeight: '35px',
7576
})}
7677
>
7778
<Text>Comments</Text>

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/Dependency/index.tsx‎

Lines changed: 82 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,13 @@ interface Props {
3131
}
3232

3333
interface State {
34-
hovering: boolean;
3534
version: null | string;
3635
open: boolean;
3736
versions: string[];
3837
}
3938

4039
export class Dependency extends React.PureComponent<Props, State> {
4140
state: State = {
42-
hovering: false,
4341
version: null,
4442
open: false,
4543
versions: [],
@@ -106,10 +104,6 @@ export class Dependency extends React.PureComponent<Props, State> {
106104
this.props.onRefresh(this.props.dependency);
107105
};
108106

109-
onMouseEnter = () => this.setState({ hovering: true });
110-
111-
onMouseLeave = () => this.setState({ hovering: false });
112-
113107
handleOpen = () => this.setState(({ open }) => ({ open: !open }));
114108

115109
render() {
@@ -119,18 +113,22 @@ export class Dependency extends React.PureComponent<Props, State> {
119113
return null;
120114
}
121115

122-
const { hovering, version, open, versions } = this.state;
116+
const { version, open, versions } = this.state;
123117
return (
124118
<>
125119
<ListAction
126120
justify="space-between"
127121
align="center"
128-
onMouseEnter={this.onMouseEnter}
129-
onMouseLeave={this.onMouseLeave}
130122
css={css({
131123
position: 'relative',
132-
'.actions': { backgroundColor: 'sideBar.background' },
133-
':hover .actions': { backgroundColor: 'list.hoverBackground' },
124+
'.actions': {
125+
backgroundColor: 'sideBar.background',
126+
display: 'none',
127+
},
128+
':hover .actions': {
129+
backgroundColor: 'list.hoverBackground',
130+
display: 'flex',
131+
},
134132
})}
135133
>
136134
<Link
@@ -141,28 +139,22 @@ export class Dependency extends React.PureComponent<Props, State> {
141139
{dependency}
142140
</Link>
143141

144-
{!hovering && (
145-
<Stack
146-
align="center"
147-
justify="flex-end"
148-
css={css({
149-
position: 'absolute',
150-
right: 2,
151-
flexGrow: 0,
152-
flexShrink: 1,
153-
width: '100%',
154-
})}
155-
>
156-
<Text
157-
variant="muted"
158-
maxWidth="30%"
159-
css={{ display: hovering ? 'none' : 'block' }}
160-
>
161-
{formatVersion(dependencies[dependency])}{' '}
162-
{version && <span>({formatVersion(version)})</span>}
163-
</Text>
164-
</Stack>
165-
)}
142+
<Stack
143+
align="center"
144+
justify="flex-end"
145+
css={css({
146+
position: 'absolute',
147+
right: 2,
148+
flexGrow: 0,
149+
flexShrink: 1,
150+
width: '100%',
151+
})}
152+
>
153+
<Text variant="muted" maxWidth="30%">
154+
{formatVersion(dependencies[dependency])}{' '}
155+
{version && <span>({formatVersion(version)})</span>}
156+
</Text>
157+
</Stack>
166158

167159
<Stack
168160
className="actions"
@@ -174,70 +166,63 @@ export class Dependency extends React.PureComponent<Props, State> {
174166
width: '150px', // overlay on text
175167
})}
176168
>
177-
{hovering && (
178-
<>
179-
<Select
180-
css={{ width: '80px' }}
181-
defaultValue={versions.find(
182-
v => v === dependencies[dependency]
183-
)}
184-
onChange={e => {
185-
this.props.onRefresh(dependency, e.target.value);
186-
this.setState({ hovering: false });
187-
}}
188-
>
189-
{versions.map(a => (
190-
<option key={a}>{a}</option>
191-
))}
192-
</Select>
193-
194-
<SingletonTooltip>
195-
{singleton => (
196-
<>
197-
<Tooltip
198-
content={open ? 'Hide sizes' : 'Show sizes'}
199-
style={{ outline: 'none' }}
200-
singleton={singleton}
201-
>
202-
<Button
203-
variant="link"
204-
onClick={this.handleOpen}
205-
css={css({ minWidth: 5 })}
206-
>
207-
{open ? <ArrowDropUp /> : <ArrowDropDown />}
208-
</Button>
209-
</Tooltip>
210-
<Tooltip
211-
content="Update to latest"
212-
style={{ outline: 'none' }}
213-
singleton={singleton}
214-
>
215-
<Button
216-
variant="link"
217-
onClick={this.handleRefresh}
218-
css={css({ minWidth: 5 })}
219-
>
220-
<RefreshIcon />
221-
</Button>
222-
</Tooltip>
223-
<Tooltip
224-
content="Remove"
225-
style={{ outline: 'none' }}
226-
singleton={singleton}
227-
>
228-
<Button
229-
variant="link"
230-
onClick={this.handleRemove}
231-
css={css({ minWidth: 5 })}
232-
>
233-
<CrossIcon />
234-
</Button>
235-
</Tooltip>
236-
</>
237-
)}
238-
</SingletonTooltip>
239-
</>
240-
)}
169+
<Select
170+
css={{ width: '80px' }}
171+
defaultValue={versions.find(v => v === dependencies[dependency])}
172+
onChange={e => {
173+
this.props.onRefresh(dependency, e.target.value);
174+
}}
175+
>
176+
{versions.map(a => (
177+
<option key={a}>{a}</option>
178+
))}
179+
</Select>
180+
181+
<SingletonTooltip>
182+
{singleton => (
183+
<>
184+
<Tooltip
185+
content={open ? 'Hide sizes' : 'Show sizes'}
186+
style={{ outline: 'none' }}
187+
singleton={singleton}
188+
>
189+
<Button
190+
variant="link"
191+
onClick={this.handleOpen}
192+
css={css({ minWidth: 5 })}
193+
>
194+
{open ? <ArrowDropUp /> : <ArrowDropDown />}
195+
</Button>
196+
</Tooltip>
197+
<Tooltip
198+
content="Update to latest"
199+
style={{ outline: 'none' }}
200+
singleton={singleton}
201+
>
202+
<Button
203+
variant="link"
204+
onClick={this.handleRefresh}
205+
css={css({ minWidth: 5 })}
206+
>
207+
<RefreshIcon />
208+
</Button>
209+
</Tooltip>
210+
<Tooltip
211+
content="Remove"
212+
style={{ outline: 'none' }}
213+
singleton={singleton}
214+
>
215+
<Button
216+
variant="link"
217+
onClick={this.handleRemove}
218+
css={css({ minWidth: 5 })}
219+
>
220+
<CrossIcon />
221+
</Button>
222+
</Tooltip>
223+
</>
224+
)}
225+
</SingletonTooltip>
241226
</Stack>
242227
</ListAction>
243228
{open ? (

0 commit comments

Comments
 (0)