Overmind refactor round 3: Run with Overmind (codesandbox#2308)

* moved PR code

* Use localstorage for Overmind check and update Overmind

* fix typing

* fix types and executor on adding npm packages

* fix tabs and changed modules on saving code

* reactions and more editor namespace checks

* several fixes

* return object instead of null

* Take a path on getState

* more signals verified

* fixed some issues

* gone through profile, fixed other master related bugs as well

* fix linting and typing

* hide delete on liked sandboxes

* more namespaces tested

* preferences and other small fixes

* netlify working now

* Working on LIVE, still more to test

* More live fixes etc

* update overmind version

* fix typing and linting issues

* Update packages/app/src/app/overmind/factories.ts

Co-Authored-By: Michaël De Boey <[email protected]>

* bug fixes, more testing

* Update packages/app/src/app/index.js

Co-Authored-By: Michaël De Boey <[email protected]>

* cleanup and type fix

* add missing extensions

* fixing general actions

* fix updating payment details

* fix server issues

* Fix addedFileToSandbox

* show overmind logo when active

* Fixed some bugs

* fix typing issue

* Fix vscode import

* Remove usage of useStore and useSignals

* Fix linting issue

* Add commmit script

* Fixed joining live room

* Fixed live issues

* refactor

* Fix creating module

* Fix creating directory

Author: christianalfoni

package.json

@@ -8,6 +8,7 @@
     "url": "https://github.com/codesandbox/codesandbox-client"
   },
   "scripts": {
+    "commit": "concurrently \"yarn typecheck\" \"yarn lint\" && git commit -m",
     "build": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" yarn build:deps && yarn build:prod",
     "build:prod": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" lerna run build  --scope homepage --stream && lerna run build --scope app --stream && lerna run copy-assets --scope app --stream",
     "build:embed": "lerna run build:embed --scope app --stream && gulp",

packages/app/package.json

@@ -214,9 +214,9 @@
     "normalizr": "^3.2.3",
     "onigasm": "^2.2.1",
     "ot": "^0.0.15",
-    "overmind": "^19.0.1",
+    "overmind": "^19.1.1",
     "overmind-devtools": "^19.0.0",
-    "overmind-react": "^19.0.0",
+    "overmind-react": "^20.1.1",
     "phoenix": "^1.3.0",
     "postcss": "^6.0.9",
     "postcss-selector-parser": "^2.2.3",

packages/app/src/app/componentConnectors.ts

@@ -1,25 +1,38 @@
+import { json } from 'overmind';
 import { inject as mobxInject, observer as mobxObserver } from 'mobx-react';
 import { observer as mobxHooksObserver } from 'mobx-react-lite';
 import { connect } from './overmind';
 
-const isOvermind = location.search.includes('overmind=true');
+const isOvermind = localStorage.getItem('overmind') === 'true';
 
 export const inject: any = isOvermind
   ? () => component => component
-  : mobxInject;
+  : (...injects) => mobxInject('reaction', ...injects);
 
 export const observer: any = isOvermind ? connect : mobxObserver;
 
 export const hooksObserver: any = isOvermind ? connect : mobxHooksObserver;
 
 export const Observer = isOvermind
-  ? inject('store', 'signals')(
-      connect(({ store, signals, children }: any) =>
-        children({ store, signals })
-      )
+  ? connect(({ store, signals, reaction, children }: any) =>
+      children({ store, signals, reaction })
     )
   : inject('store', 'signals')(
-      observer(({ store, signals, children }: any) =>
-        children({ store, signals })
+      observer(({ store, signals, reaction, children }: any) =>
+        children({ store, signals, reaction })
       )
     );
+
+export const clone = isOvermind
+  ? json
+  : obj => {
+      if (obj.toJSON) {
+        return obj.toJSON();
+      }
+
+      if (obj.toJS) {
+        return obj.toJS();
+      }
+
+      return obj;
+    };

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

@@ -27,14 +27,15 @@ import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
 // @ts-ignore
 import LinterWorker from 'worker-loader?publicPath=/&name=monaco-linter.[hash:8].worker.js!../Monaco/workers/linter';
 /* eslint-enable import/no-webpack-loader-syntax */
-
+import { clone } from 'app/componentConnectors';
 import eventToTransform from '../Monaco/event-to-transform';
 import MonacoEditorComponent, { EditorAPI } from './MonacoReactComponent';
 import { Container, GlobalStyles } from './elements';
 import getSettings from '../Monaco/settings';
 
 import { Props, Editor } from '../types';
 import getMode from '../Monaco/mode';
+
 import {
   lineAndColumnToIndex,
   indexToLineAndColumn,
@@ -698,7 +699,7 @@ export class VSCode extends React.Component<Props> implements Editor {
   };
 
   applyOperations = (operations: { [moduleShortid: string]: any }) => {
-    const operationsJSON = operations.toJSON();
+    const operationsJSON = operations.toJSON ? operations.toJSON() : operations;
 
     Object.keys(operationsJSON).forEach(moduleShortid => {
       const operation = TextOperation.fromJSON(operationsJSON[moduleShortid]);
@@ -1119,8 +1120,7 @@ export class VSCode extends React.Component<Props> implements Editor {
             <Configuration
               onChange={this.props.onChange}
               // Copy the object, we don't want mutations in the component
-              // @ts-ignore
-              currentModule={currentModule.toJSON()}
+              currentModule={clone(currentModule)}
               config={config}
               sandbox={this.sandbox}
               {...extraProps}

packages/app/src/app/components/SandboxList/SandboxList.tsx

@@ -73,11 +73,11 @@ export const SandboxList: React.FC<ISandboxListProps> = ({
             <StatBody>{s.likeCount}</StatBody>
             <StatBody>{s.viewCount}</StatBody>
             <StatBody>{s.forkCount}</StatBody>
-            {isCurrentUser && (
+            {isCurrentUser && onDelete ? (
               <DeleteBody>
                 <DeleteSandboxButton id={s.id} onDelete={onDelete} />
               </DeleteBody>
-            )}
+            ) : null}
           </SandboxRow>
         );
       })}

packages/app/src/app/index.js

@@ -3,6 +3,7 @@ import { render } from 'react-dom';
 import { ThemeProvider } from 'styled-components';
 import { Router } from 'react-router-dom';
 import { ApolloProvider } from 'react-apollo';
+import { reaction } from 'mobx';
 import { ApolloProvider as HooksProvider } from '@apollo/react-hooks';
 import { Provider } from 'mobx-react';
 import _debug from '@codesandbox/common/lib/utils/debug';
@@ -33,7 +34,7 @@ import { Routes as App } from './pages';
 import { Provider as OvermindProvider } from './overmind/Provider';
 import './split-pane.css';
 import { getTypeFetcher } from './vscode/extensionHostWorker/common/type-downloader';
-
+import overmindLogo from './overmind.png';
 import { vscode } from './vscode';
 import {
   initializeThemeCache,
@@ -123,7 +124,11 @@ async function boot(state, signals, overmind) {
       render(
         <Signals.Provider value={signals}>
           <Store.Provider value={state}>
-            <Provider store={state} signals={signals}>
+            <Provider
+              store={state}
+              signals={signals}
+              reaction={(cbA, cbB) => reaction(() => cbA(state), cbB)}
+            >
               <ApolloProvider client={client}>
                 <OvermindProvider value={overmind}>
                   <HooksProvider client={client}>
@@ -154,20 +159,51 @@ async function initialize() {
   let state = null;
   let overmind = null;
 
-  if (location.search.includes('overmind=true')) {
+  window.useOvermind = useIt => {
+    if (typeof useIt === 'undefined') {
+      return localStorage.getItem('overmind');
+    }
+
+    localStorage.setItem('overmind', JSON.stringify(useIt));
+    location.reload(true);
+
+    return useIt;
+  };
+
+  if (localStorage.getItem('overmind') === 'true') {
     await Promise.all([import('overmind'), import('./overmind')]).then(
       modules => {
         const createOvermind = modules[0].createOvermind;
         const config = modules[1].config;
 
         overmind = createOvermind(config, {
-          devtools: 'localhost:3032',
+          devtools:
+            window.opener && window.opener !== window && !window.chrome
+              ? false
+              : 'localhost:3031',
+          name: 'CodeSandbox',
           logProxies: true,
         });
 
-        getState = () => overmind.state;
+        getState = path =>
+          path
+            ? path.split('.').reduce((aggr, key) => aggr[key], overmind.state)
+            : overmind.state;
         getSignal = path =>
           path.split('.').reduce((aggr, key) => aggr[key], overmind.actions);
+
+        const logoContainer = document.createElement('div');
+        logoContainer.style.position = 'fixed';
+        logoContainer.style.bottom = '30px';
+        logoContainer.style.left = '10px';
+        logoContainer.style.zIndex = '999999';
+        logoContainer.style.width = '40px';
+        logoContainer.style.height = '40px';
+        logoContainer.style.borderRadius = '3px';
+        logoContainer.style.backgroundImage = `url(${overmindLogo})`;
+        logoContainer.style.backgroundSize = 'cover';
+        logoContainer.style.backgroundSize = 'cover';
+        document.body.appendChild(logoContainer);
       }
     );
   } else {
@@ -195,6 +231,9 @@ async function initialize() {
     getSignal = controller.getSignal.bind(controller);
   }
 
+  window.getState = getState;
+  window.getSignal = getSignal;
+
   // Configures BrowserFS to use the LocalStorage file system.
   window.BrowserFS.configure(
     {

packages/app/src/app/overmind.png

@@ -1,7 +1,10 @@
 import { Action, AsyncAction } from '.';
 import * as internalActions from './internalActions';
 import { withLoadApp } from './factories';
-import { NotificationType } from '@codesandbox/common/lib/utils/notifications';
+import {
+  NotificationType,
+  convertTypeToStatus,
+} from '@codesandbox/common/lib/utils/notifications';
 
 export const internal = internalActions;
 
@@ -21,6 +24,29 @@ export const cliMounted: AsyncAction = withLoadApp(
   }
 );
 
+export const notificationAdded: Action<{
+  title: string;
+  notificationType: NotificationType;
+  timeAlive: number;
+}> = ({ effects }, { title, notificationType, timeAlive }) => {
+  effects.notificationToast.add({
+    message: title,
+    status: convertTypeToStatus(notificationType),
+    timeAlive: timeAlive * 1000,
+  });
+};
+
+export const notificationRemoved: Action<{
+  id: number;
+}> = ({ state }, { id }) => {
+  const notifications = state.notifications;
+  const notificationToRemoveIndex = notifications.findIndex(
+    notification => notification.id === id
+  );
+
+  state.notifications.splice(notificationToRemoveIndex, 1);
+};
+
 export const forceRender: Action = ({ state }) => {
   state.editor.forceRender++;
 };
@@ -135,7 +161,7 @@ export const requestAuthorisation: AsyncAction = async ({ actions }) => {
 
 export const signInGithubClicked: AsyncAction = async ({ state, actions }) => {
   state.isLoadingGithub = true;
-  await actions.internal.signIn({ useExtraScopes: false });
+  await actions.internal.signIn({ useExtraScopes: true });
   state.isLoadingGithub = false;
 };
 
@@ -200,9 +226,7 @@ export const refetchSandboxInfo: AsyncAction = async ({
         state.live.isTeam = Boolean(sandbox.team);
       }
 
-      await actions.live.internal.initialize();
+      await actions.live.internal.initialize(sandbox.roomId);
     }
-  } else {
-    actions.files.internal.recoverFiles();
   }
 };