Skip to content

Commit c1e1afd

Browse files
christianalfoniCompuIves
authored andcommitted
refactored sandboxPageMounted with related stuff (codesandbox#1919)
* refactored sandboxPageMounted with related stuff * fixed yarn lock
1 parent 8b43c4d commit c1e1afd

File tree

28 files changed

+1038
-203
lines changed

28 files changed

+1038
-203
lines changed

package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"build:common": "lerna run build:dev --scope @codesandbox/common --stream",
1313
"build:dynamic": "lerna run build --scope dynamic-pages --stream",
1414
"start": "yarn build:deps && lerna run start --scope app --stream",
15+
"start:overmind": "yarn build:deps && concurrently \"lerna run start --scope app --stream\" \"overmind-devtools\"",
1516
"start:fast": "lerna run start --scope app --stream",
1617
"start:vscode": "VSCODE=1 yarn start:fast & cd standalone-packages/monaco-editor && yarn simpleserver & cd standalone-packages/vscode && yarn watch",
1718
"start:dynamic": "lerna run dev --scope dynamic-pages --stream",
@@ -55,6 +56,7 @@
5556
"@types/react": "^16.8.12",
5657
"all-contributors-cli": "^5.4.0",
5758
"babel-eslint": "codesandbox/babel-eslint#v10.0.2",
59+
"concurrently": "^4.1.0",
5860
"eslint": "5.16.0",
5961
"eslint-config-airbnb": "^15.0.1",
6062
"eslint-config-prettier": "^4.2.0",
@@ -71,7 +73,7 @@
7173
"lerna": "^2.5.1",
7274
"prettier": "1.17.0",
7375
"pretty-quick": "^1.10.0",
74-
"typescript": "3.3.4000"
76+
"typescript": "3.4.5"
7577
},
7678
"dependencies": {
7779
"@typescript-eslint/eslint-plugin": "^1.9.0",

packages/app/package.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,13 @@
3434
"@babel/polyfill": "^7.0.0",
3535
"@babel/preset-flow": "^7.0.0",
3636
"@babel/preset-react": "^7.0.0",
37-
"@babel/preset-typescript": "^7.1.0",
37+
"@babel/preset-typescript": "^7.3.3",
3838
"@types/codemirror": "^0.0.72",
3939
"@types/debug": "^4.1.1",
4040
"@types/gsap": "^1.20.1",
4141
"@types/jest": "^24.0.11",
4242
"@types/lodash-es": "^4.17.2",
43+
"@types/phoenix": "^1.4.0",
4344
"@types/prop-types": "^15.7.0",
4445
"@types/react": "^16.8.12",
4546
"@types/react-dom": "^16.8.3",
@@ -213,9 +214,9 @@
213214
"normalizr": "^3.2.3",
214215
"onigasm": "^2.2.1",
215216
"ot": "^0.0.15",
216-
"overmind": "^17.1.0",
217-
"overmind-devtools": "^18.1.0",
218-
"overmind-react": "^18.1.0",
217+
"overmind": "^18.0.0-1557824735814",
218+
"overmind-devtools": "^19.0.0-1557824735814",
219+
"overmind-react": "^19.0.0-1557824735814",
219220
"phoenix": "^1.3.0",
220221
"postcss": "^6.0.9",
221222
"postcss-selector-parser": "^2.2.3",

packages/app/src/app/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,17 @@ window.addEventListener('unhandledrejection', e => {
5454
e.preventDefault();
5555
}
5656
});
57+
/*
58+
OVERMIND REFACTOR
59+
*/
60+
if (process.env.NODE_ENV === 'development') {
61+
Promise.all([import('overmind'), import('./overmind')]).then(modules => {
62+
const createOvermind = modules[0].createOvermind;
63+
const config = modules[1].config;
64+
65+
createOvermind(config);
66+
});
67+
}
5768

5869
if (process.env.NODE_ENV === 'production') {
5970
try {
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Action } from '.';
2+
import * as internalActions from './internalActions';
3+
import { withLoadApp } from './factories';
4+
5+
export const internal = internalActions;
6+
7+
export const appUnmounted: Action = async ({ effects, actions }) => {
8+
effects.connection.removeListener(actions.internal.onConnectionChange);
9+
};
10+
11+
export const sandboxPageMounted: Action = withLoadApp(() => {});
Lines changed: 113 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,29 @@
1+
import axios, { AxiosResponse, AxiosError } from 'axios';
12
import { logError } from '@codesandbox/common/lib/utils/analytics';
23
import { values } from 'lodash-es';
34
import { camelizeKeys, decamelizeKeys } from 'humps';
4-
// import { addNotification } from '../factories';
55

6-
/*
7-
This effect needs to expose a "configure" method where jwt
8-
and error action is passed in
9-
*/
106
const API_ROOT = '/api/v1';
117

12-
function createHeaders({ state, jwt }) {
13-
const foundJwt = state.get('jwt') || jwt.get();
14-
15-
return foundJwt
16-
? {
17-
Authorization: `Bearer ${foundJwt}`,
18-
}
19-
: {};
20-
}
21-
22-
const getMessage = (error: Error & { response?: any }) => {
8+
const getMessage = (error: AxiosError) => {
239
const response = error.response;
2410

2511
if (!response || response.status >= 500) {
2612
logError(error);
2713
}
2814

29-
if (response && response.result) {
30-
if (response.result.errors) {
31-
const errors = values(response.result.errors)[0];
15+
if (response && response.data) {
16+
if (response.data.errors) {
17+
const errors = values(response.data.errors)[0];
3218
if (Array.isArray(errors)) {
3319
if (errors[0]) {
3420
error.message = errors[0]; // eslint-disable-line no-param-reassign
3521
}
3622
} else {
3723
error.message = errors; // eslint-disable-line no-param-reassign
3824
}
39-
} else if (response.result.error) {
40-
error.message = response.result.error; // eslint-disable-line no-param-reassign
25+
} else if (response.data.error) {
26+
error.message = response.data.error; // eslint-disable-line no-param-reassign
4127
} else if (response.status === 413) {
4228
return 'File too large, upload limit is 5MB.';
4329
}
@@ -46,34 +32,13 @@ const getMessage = (error: Error & { response?: any }) => {
4632
return error.message;
4733
};
4834

49-
const showError = (error, controller) => {
50-
const errorMessage = getMessage(error);
51-
52-
/*
53-
TODO: This needs to be handled differently!
54-
controller.runSignal(
55-
'showNotification',
56-
addNotification(errorMessage, 'error')
57-
);
58-
*/
59-
60-
error.apiMessage = errorMessage; // eslint-disable-line no-param-reassign
61-
};
62-
63-
const handleError = (error, controller) => {
64-
try {
65-
showError(error, controller);
66-
} catch (e) {
67-
console.error(e);
68-
}
69-
70-
throw error;
71-
};
72-
73-
function handleResponse(response, { shouldCamelize = true } = {}) {
35+
function handleResponse(
36+
response: AxiosResponse,
37+
{ shouldCamelize = true } = {}
38+
) {
7439
const camelizedData = shouldCamelize
75-
? camelizeKeys(response.result)
76-
: response.result;
40+
? camelizeKeys(response.data)
41+
: response.data;
7742

7843
// Quickfix to prevent underscored dependencies from being camelized.
7944
// Never store data as keys in the future.
@@ -82,63 +47,109 @@ function handleResponse(response, { shouldCamelize = true } = {}) {
8247
camelizedData.data &&
8348
camelizedData.data.npmDependencies
8449
) {
85-
camelizedData.data.npmDependencies = response.result.data.npm_dependencies;
50+
camelizedData.data.npmDependencies = response.data.data.npm_dependencies;
8651
}
8752

8853
return camelizedData.data ? camelizedData.data : camelizedData;
8954
}
9055

91-
export default {
92-
get(path, query, options) {
93-
return this.context.http
94-
.get(API_ROOT + path, query, {
95-
headers: createHeaders(this.context),
96-
})
97-
.then(response => handleResponse(response, options))
98-
.catch(e => handleError(e, this.context.controller));
99-
},
100-
post(path, body, options) {
101-
return this.context.http
102-
.post(API_ROOT + path, decamelizeKeys(body), {
103-
headers: createHeaders(this.context),
104-
})
105-
.then(response => handleResponse(response, options))
106-
.catch(e => handleError(e, this.context.controller));
107-
},
108-
patch(path, body, options) {
109-
return this.context.http
110-
.patch(API_ROOT + path, decamelizeKeys(body), {
111-
headers: createHeaders(this.context),
112-
})
113-
.then(response => handleResponse(response, options))
114-
.catch(e => handleError(e, this.context.controller));
115-
},
116-
put(path, body, options) {
117-
return this.context.http
118-
.put(API_ROOT + path, decamelizeKeys(body), {
119-
headers: createHeaders(this.context),
120-
})
121-
.then(response => handleResponse(response, options))
122-
.catch(e => handleError(e, this.context.controller));
123-
},
124-
delete(path, query, options) {
125-
return this.context.http
126-
.delete(API_ROOT + path, query, {
127-
headers: createHeaders(this.context),
128-
})
129-
.then(response => handleResponse(response, options))
130-
.catch(e => handleError(e, this.context.controller));
131-
},
132-
request(options) {
133-
return this.context.http
134-
.request(
135-
Object.assign(options, {
136-
url: API_ROOT + options.url,
137-
body: options.body ? camelizeKeys(options.body) : null,
138-
headers: createHeaders(this.context),
139-
})
140-
)
141-
.then(response => handleResponse(response, options))
142-
.catch(e => handleError(e, this.context.controller));
143-
},
56+
type Options = {
57+
provideJwtToken: () => string;
58+
onError: (error: string) => void;
14459
};
60+
61+
export default (() => {
62+
let _options: Options = {
63+
provideJwtToken() {
64+
throw new Error('Missing implementation');
65+
},
66+
onError() {
67+
throw new Error('Missing implementation');
68+
},
69+
};
70+
71+
function createHeaders(jwt: string) {
72+
return jwt
73+
? {
74+
Authorization: `Bearer ${jwt}`,
75+
}
76+
: {};
77+
}
78+
79+
const showError = error => {
80+
const errorMessage = getMessage(error);
81+
82+
_options.onError(errorMessage);
83+
error.apiMessage = errorMessage; // eslint-disable-line no-param-reassign
84+
};
85+
86+
const handleError = error => {
87+
try {
88+
showError(error);
89+
} catch (e) {
90+
console.error(e);
91+
}
92+
93+
throw error;
94+
};
95+
96+
return {
97+
initialize(options: Options) {
98+
_options = options;
99+
},
100+
get(path: string, params?: { [key: string]: string }, options?: {}) {
101+
return axios
102+
.get(API_ROOT + path, {
103+
params,
104+
headers: createHeaders(_options.provideJwtToken()),
105+
})
106+
.then(response => handleResponse(response, options))
107+
.catch(e => handleError(e));
108+
},
109+
post(path, body, options) {
110+
return axios
111+
.post(API_ROOT + path, decamelizeKeys(body), {
112+
headers: createHeaders(_options.provideJwtToken()),
113+
})
114+
.then(response => handleResponse(response, options))
115+
.catch(e => handleError(e));
116+
},
117+
patch(path, body, options) {
118+
return axios
119+
.patch(API_ROOT + path, decamelizeKeys(body), {
120+
headers: createHeaders(_options.provideJwtToken()),
121+
})
122+
.then(response => handleResponse(response, options))
123+
.catch(e => handleError(e));
124+
},
125+
put(path, body, options) {
126+
return axios
127+
.put(API_ROOT + path, decamelizeKeys(body), {
128+
headers: createHeaders(_options.provideJwtToken()),
129+
})
130+
.then(response => handleResponse(response, options))
131+
.catch(e => handleError(e));
132+
},
133+
delete(path, params, options) {
134+
return axios
135+
.delete(API_ROOT + path, {
136+
params,
137+
headers: createHeaders(_options.provideJwtToken()),
138+
})
139+
.then(response => handleResponse(response, options))
140+
.catch(e => handleError(e));
141+
},
142+
request(options) {
143+
return axios
144+
.request(
145+
Object.assign(options, {
146+
url: API_ROOT + options.url,
147+
body: options.body ? camelizeKeys(options.body) : null,
148+
headers: createHeaders(_options.provideJwtToken()),
149+
})
150+
)
151+
.then(response => handleResponse(response, options))
152+
.catch(e => handleError(e));
153+
},
154+
};
155+
})();
Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
import addListener from '@codesandbox/common/lib/connection-manager';
22

3-
const listeners = {};
3+
const listeners = new Map();
44

55
export default {
6-
addListener(signalPath) {
7-
const listener = connection =>
8-
this.context.controller.getSignal(signalPath)({ connection });
9-
10-
listeners[signalPath] = addListener(listener);
6+
addListener(listener: (connected: boolean) => void) {
7+
const disposer = addListener(listener ? listener : () => {});
8+
listeners.set(listener, disposer);
119
},
12-
removeListener(signalPath) {
13-
listeners[signalPath]();
14-
15-
delete listeners[signalPath];
10+
removeListener(listener: (connected: boolean) => void) {
11+
listeners.get(listener)();
12+
listeners.delete(listener);
1613
},
1714
};
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
get<T>(url: string): Promise<T> {
3+
return window.fetch(url).then(response => response.json());
4+
},
5+
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,4 @@ export { default as router } from './router';
1515
export { default as settingsStore } from './settingsStore';
1616
export { default as socket } from './socket';
1717
export { default as sse } from './sse';
18+
export { default as http } from './http';

packages/app/src/app/overmind/effects/keybindingManager.ts

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -290,15 +290,12 @@ export default {
290290
binding => binding.bindings && binding.bindings.filter(Boolean).length
291291
);
292292
},
293-
start() {
294-
if (
295-
isStarted ||
296-
this.context.controller.getState().preferences.settings.experimentVSCode
297-
) {
293+
start(onKeyDownListener: (event: KeyboardEvent) => void) {
294+
if (isStarted) {
298295
return;
299296
}
300297

301-
onKeyDown = handleKeyDown.bind(null, this.context.controller);
298+
onKeyDown = handleKeyDown.bind(null, onKeyDownListener);
302299
onKeyUp = handleKeyUp.bind(null);
303300
window.addEventListener('keydown', onKeyDown);
304301
window.addEventListener('keyup', onKeyUp);

0 commit comments

Comments
 (0)