Skip to content

Commit f34a72d

Browse files
MichaelDeBoeySaraVieira
MichaelDeBoey
authored and
SaraVieira
committed
🔨 Switch Server to use useOvermind (codesandbox#2535)
* 🔨 Switch Server to use useOvermind * Fix types
1 parent 1d84d33 commit f34a72d

File tree

1 file changed

+143
-128
lines changed
  • packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server

1 file changed

+143
-128
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/index.tsx‎

Lines changed: 143 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import React from 'react';
2-
import { inject, hooksObserver } from 'app/componentConnectors';
3-
import BrowserIcon from 'react-icons/lib/go/browser';
41
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
2+
import React, { FunctionComponent } from 'react';
3+
import BrowserIcon from 'react-icons/lib/go/browser';
4+
5+
import { useOvermind } from 'app/overmind';
56

67
import {
78
Description,
89
WorkspaceInputContainer,
910
EntryContainer,
1011
} from '../../elements';
1112

12-
import { Status } from './Status';
13-
import { Tasks } from './Tasks';
14-
import { EnvironmentVariables } from './EnvVars';
1513
import {
1614
SubTitle,
1715
TasksContainer,
@@ -20,6 +18,9 @@ import {
2018
ActionButton,
2119
Power as PowerIcon,
2220
} from './elements';
21+
import { EnvironmentVariables } from './EnvVars';
22+
import { Status } from './Status';
23+
import { Tasks } from './Tasks';
2324

2425
type Port = {
2526
main: boolean;
@@ -28,143 +29,157 @@ type Port = {
2829
name?: string;
2930
};
3031

31-
export const Server = inject('store', 'signals')(
32-
hooksObserver(({ store: { server, editor }, signals }) => {
33-
const disconnected = server.status !== 'connected';
34-
const sandbox = editor.currentSandbox;
35-
36-
const openPort = (port: {
37-
main: boolean;
38-
port: number;
39-
hostname: string;
40-
}) => {
41-
signals.server.onBrowserFromPortOpened({ port });
42-
};
43-
44-
return (
45-
<div>
46-
<Description>
47-
This sandbox is executed on a server. You can control the server from
48-
this panel.
49-
</Description>
32+
export const Server: FunctionComponent = () => {
33+
const {
34+
actions: {
35+
server: {
36+
onBrowserFromPortOpened,
37+
onBrowserTabOpened,
38+
restartContainer,
39+
restartSandbox,
40+
},
41+
},
42+
state: {
43+
server,
44+
editor: { currentSandbox: sandbox, parsedConfigurations },
45+
},
46+
} = useOvermind();
47+
48+
const disconnected = server.status !== 'connected';
49+
50+
const openPort = (port: Port) => {
51+
onBrowserFromPortOpened({ port });
52+
};
53+
54+
return (
55+
<div>
56+
<Description>
57+
This sandbox is executed on a server. You can control the server from
58+
this panel.
59+
</Description>
60+
61+
<Margin top={1}>
62+
<SubTitle>Status</SubTitle>
63+
64+
<WorkspaceInputContainer>
65+
<Status
66+
managerStatus={server.status}
67+
containerStatus={server.containerStatus}
68+
/>
69+
</WorkspaceInputContainer>
70+
</Margin>
5071

51-
<Margin top={1}>
52-
<SubTitle>Status</SubTitle>
53-
<WorkspaceInputContainer>
54-
<Status
55-
managerStatus={server.status}
56-
containerStatus={server.containerStatus}
72+
<Margin top={1.5}>
73+
<SubTitle>Run Scripts</SubTitle>
74+
<Margin top={0.5}>
75+
<TasksContainer disconnected={disconnected}>
76+
<Tasks
77+
package={
78+
parsedConfigurations.package &&
79+
parsedConfigurations.package.parsed
80+
}
5781
/>
58-
</WorkspaceInputContainer>
82+
</TasksContainer>
5983
</Margin>
84+
s
85+
</Margin>
6086

61-
<Margin top={1.5}>
62-
<SubTitle>Run Scripts</SubTitle>
63-
<Margin top={0.5}>
64-
<TasksContainer disconnected={disconnected}>
65-
<Tasks
66-
package={
67-
editor.parsedConfigurations.package &&
68-
editor.parsedConfigurations.package.parsed
69-
}
70-
/>
71-
</TasksContainer>
72-
</Margin>
73-
</Margin>
87+
<Margin top={1} bottom={0.5}>
88+
<SubTitle>Open Ports</SubTitle>
7489

75-
<Margin top={1} bottom={0.5}>
76-
<SubTitle>Open Ports</SubTitle>
77-
<Margin top={0.5}>
78-
{server.ports.length ? (
79-
server.ports.map((port: Port) => (
80-
<EntryContainer
81-
style={{ position: 'relative' }}
82-
onClick={() => openPort(port)}
83-
>
84-
<Port>
85-
<BrowserIcon />
86-
<div>{port.name || port.port}</div>
87-
</Port>
88-
{port.main && <MainBadge>main</MainBadge>}
89-
</EntryContainer>
90-
))
91-
) : (
92-
<Description>
93-
No ports are opened. Maybe the server is still starting or it
94-
doesn{"'"}t open any ports.
95-
</Description>
96-
)}
97-
{(sandbox.template === 'gatsby' ||
98-
sandbox.template === 'gridsome') &&
99-
server.ports.length ? (
90+
<Margin top={0.5}>
91+
{server.ports.length ? (
92+
server.ports.map((port: Port) => (
10093
<EntryContainer
10194
style={{ position: 'relative' }}
102-
onClick={() =>
103-
signals.server.onBrowserTabOpened({
104-
port: {
105-
url:
106-
sandbox.template === 'gridsome'
107-
? '/___explore'
108-
: '/___graphql',
109-
title: 'GraphiQL',
110-
},
111-
})
112-
}
95+
onClick={() => openPort(port)}
11396
>
11497
<Port>
11598
<BrowserIcon />
116-
<div>GraphiQL</div>
99+
100+
<div>{port.name || port.port}</div>
117101
</Port>
102+
103+
{port.main && <MainBadge>main</MainBadge>}
118104
</EntryContainer>
119-
) : null}
120-
</Margin>
121-
</Margin>
105+
))
106+
) : (
107+
<Description>
108+
No ports are opened. Maybe the server is still starting or it
109+
doesn{"'"}t open any ports.
110+
</Description>
111+
)}
122112

123-
<Margin top={1} bottom={0.5}>
124-
<SubTitle style={{ marginBottom: '.5rem' }}>
125-
Control Container
126-
</SubTitle>
127-
<WorkspaceInputContainer>
128-
<ActionButton
129-
small
130-
block
131-
disabled={
132-
disconnected || server.containerStatus !== 'sandbox-started'
133-
}
134-
onClick={() => signals.server.restartSandbox({})}
135-
>
136-
<>
137-
<PowerIcon /> Restart Sandbox
138-
</>
139-
</ActionButton>
140-
</WorkspaceInputContainer>
141-
<WorkspaceInputContainer>
142-
<ActionButton
143-
small
144-
block
145-
disabled={
146-
disconnected || server.containerStatus === 'initializing'
113+
{['gatsby', 'gridsome'].includes(sandbox.template) &&
114+
server.ports.length ? (
115+
<EntryContainer
116+
style={{ position: 'relative' }}
117+
onClick={() =>
118+
onBrowserTabOpened({
119+
port: {
120+
url:
121+
sandbox.template === 'gridsome'
122+
? '/___explore'
123+
: '/___graphql',
124+
title: 'GraphiQL',
125+
},
126+
})
147127
}
148-
onClick={() => signals.server.restartContainer({})}
149128
>
150-
<>
151-
<PowerIcon /> Restart Server
152-
</>
153-
</ActionButton>
154-
</WorkspaceInputContainer>
129+
<Port>
130+
<BrowserIcon />
131+
132+
<div>GraphiQL</div>
133+
</Port>
134+
</EntryContainer>
135+
) : null}
155136
</Margin>
137+
</Margin>
156138

157-
<Margin top={1}>
158-
<SubTitle>Secret Keys</SubTitle>
159-
<Description>
160-
Secrets are available as environment variables. They are kept
161-
private and will not be transferred between forks.
162-
</Description>
163-
<Margin top={0.5}>
164-
<EnvironmentVariables />
165-
</Margin>
139+
<Margin top={1} bottom={0.5}>
140+
<SubTitle style={{ marginBottom: '.5rem' }}>Control Container</SubTitle>
141+
142+
<WorkspaceInputContainer>
143+
<ActionButton
144+
small
145+
block
146+
disabled={
147+
disconnected || server.containerStatus !== 'sandbox-started'
148+
}
149+
onClick={() => restartSandbox()}
150+
>
151+
<>
152+
<PowerIcon /> Restart Sandbox
153+
</>
154+
</ActionButton>
155+
</WorkspaceInputContainer>
156+
157+
<WorkspaceInputContainer>
158+
<ActionButton
159+
small
160+
block
161+
disabled={disconnected || server.containerStatus === 'initializing'}
162+
onClick={() => restartContainer()}
163+
>
164+
<>
165+
<PowerIcon /> Restart Server
166+
</>
167+
</ActionButton>
168+
</WorkspaceInputContainer>
169+
</Margin>
170+
171+
<Margin top={1}>
172+
<SubTitle>Secret Keys</SubTitle>
173+
174+
<Description>
175+
Secrets are available as environment variables. They are kept private
176+
and will not be transferred between forks.
177+
</Description>
178+
179+
<Margin top={0.5}>
180+
<EnvironmentVariables />
166181
</Margin>
167-
</div>
168-
);
169-
})
170-
);
182+
</Margin>
183+
</div>
184+
);
185+
};

0 commit comments

Comments
 (0)