fix quickopen, remove store and fix linting and typechecks

Author: christianalfoni

packages/app/package.json

@@ -67,8 +67,6 @@
     "@apollo/react-hooks": "^0.1.0-beta.2",
     "@babel/plugin-transform-destructuring": "^7.5.0",
     "@babel/preset-env": "^7.5.5",
-    "@cerebral/http": "^4.0.0",
-    "@cerebral/mobx-state-tree": "^3.0.0",
     "@codesandbox/executors": "^0.1.0",
     "@codesandbox/template-icons": "^1.0.1",
     "@emmetio/codemirror-plugin": "^0.3.5",
@@ -96,7 +94,6 @@
     "base64-loader": "^1.0.0",
     "browser-detect": "^0.2.28",
     "browser-resolve": "CompuIves/node-browser-resolve",
-    "cerebral": "^4.0.0",
     "circular-json": "^0.4.0",
     "codemirror": "^5.27.4",
     "codesandbox-api": "^0.0.22",

packages/app/src/app/components/CodeEditor/Monaco/MonacoReactComponent.js

@@ -35,10 +35,9 @@ class MonacoEditor extends React.PureComponent {
     }
 
     // eslint-disable-next-line global-require
-    require('app/overmind/effects/vscode/manager/dev-bootstrap').default(
-      false,
-      ['vs/editor/editor.main']
-    )(() => {
+    require('app/overmind/effects/vscode/vscode-script-loader').default(false, [
+      'vs/editor/editor.main',
+    ])(() => {
       this.initMonaco();
     });
   };

packages/app/src/app/components/CodeEditor/VSCode/Configuration/index.tsx

@@ -2,22 +2,21 @@ import { ConfigurationFile } from '@codesandbox/common/lib/templates/configurati
 import getUI from '@codesandbox/common/lib/templates/configuration/ui';
 import theme from '@codesandbox/common/lib/theme';
 import { Module } from '@codesandbox/common/lib/types';
-import { TextOperation } from 'ot';
-import React from 'react';
-
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
 import getType from 'app/utils/get-type';
+import { TextOperation } from 'ot';
+import React from 'react';
 
-import { Props as EditorProps, Editor } from '../../types'; // eslint-disable-line
-
-import { Container, Title, Description } from './elements';
+import { Editor, Props as EditorProps } from '../../types'; // eslint-disable-line
+import { Container, Description, Title } from './elements';
 
 type Disposable = {
   dispose: () => void;
 };
 
 type Props = EditorProps & {
   config: ConfigurationFile;
+  onChange: (code: string, moduleShortid: string) => void;
   toggleConfigUI: () => void;
   onDidChangeDirty: (cb: () => void) => Disposable;
   getCode: () => string;

packages/app/src/app/components/CodeEditor/VSCode/MonacoReactComponent.js

@@ -2,6 +2,7 @@ import getTemplate from '@codesandbox/common/lib/templates';
 import getUI from '@codesandbox/common/lib/templates/configuration/ui';
 import theme from '@codesandbox/common/lib/theme';
 import { useOvermind } from 'app/overmind';
+import { json } from 'overmind';
 import React, { useEffect, useRef } from 'react';
 import { render } from 'react-dom';
 import { ThemeProvider } from 'styled-components';
@@ -10,7 +11,7 @@ import { Configuration } from './Configuration';
 import { Container, GlobalStyles } from './elements';
 
 export const VSCode: React.FunctionComponent = () => {
-  const { state, effects } = useOvermind();
+  const { state, actions, effects } = useOvermind();
   const containerEl = useRef(null);
 
   useEffect(() => {
@@ -28,14 +29,14 @@ export const VSCode: React.FunctionComponent = () => {
             render(
               <ThemeProvider theme={theme}>
                 <Configuration
-                /*
-                    onChange={this.props.onChange}
-                    // Copy the object, we don't want mutations in the component
-                    currentModule={json(state.editor.currentModule)}
-                    config={config}
-                    sandbox={this.sandbox}
-                    {...extraProps}
-                    */
+                  onChange={(code, moduleShortid) =>
+                    actions.editor.codeChanged({ code, moduleShortid })
+                  }
+                  // Copy the object, we don't want mutations in the component
+                  currentModule={json(state.editor.currentModule)}
+                  config={config}
+                  sandbox={state.editor.currentSandbox}
+                  {...(extraProps as any)}
                 />
               </ThemeProvider>,
               container
@@ -48,14 +49,18 @@ export const VSCode: React.FunctionComponent = () => {
     const { width, height } = rootEl.getBoundingClientRect();
     effects.vscode.updateLayout(width, height);
 
+    document.getElementById('root').classList.add('monaco-shell');
+
     return () => {
-      document.getElementById('root').className = document
-        .getElementById('root')
-        .className.split(' ')
-        .filter(x => !['monaco-shell', 'vs-dark'].includes(x))
-        .join(' ');
+      document.getElementById('root').classList.remove('monaco-shell');
     };
-  }, [effects.vscode, state.editor.currentSandbox.template]);
+  }, [
+    actions.editor,
+    effects.vscode,
+    state.editor.currentModule,
+    state.editor.currentSandbox,
+    state.editor.currentSandbox.template,
+  ]);
 
   return (
     <Container ref={containerEl}>