Fix live regressions (codesandbox#2213)

Fixes codesandbox#2212
Fixes codesandbox#2208

Fixes issues with:
- Need to sign in to join live session
- Executors (server) not working live
- File opening causing desynchronization
- Live session not setting workspace defaults and settings

Author: CompuIves

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

@@ -66,6 +66,18 @@ function getSelection(lines, selection) {
   };
 }
 
+type UserSelection =
+  | {
+      userId: string;
+      selection: null;
+    }
+  | {
+      userId: string;
+      name: string;
+      selection: any;
+      color: number[];
+    };
+
 class MonacoEditor extends React.Component<Props> implements Editor {
   static defaultProps = {
     width: '100%',
@@ -406,6 +418,12 @@ class MonacoEditor extends React.Component<Props> implements Editor {
             this.currentModule.code !== undefined &&
             activeEditor.getValue(1) !== this.currentModule.code
           ) {
+            // Don't send these changes over live, since these changes can also be made by someone else and
+            // we don't want to keep singing these changes
+            // TODO: a better long term solution would be to store the changes of someone else in a model, even if the
+            // model is not opened in an editor.
+
+            this.receivingCode = true;
             // This means that the file in Cerebral is dirty and has changed,
             // VSCode only gets saved contents. In this case we manually set the value correctly.
             const model = activeEditor.getModel();
@@ -415,6 +433,7 @@ class MonacoEditor extends React.Component<Props> implements Editor {
                 range: model.getFullModelRange(),
               },
             ]);
+            this.receivingCode = false;
           }
 
           this.modelSelectionListener = activeEditor.onDidChangeCursorSelection(
@@ -557,20 +576,7 @@ class MonacoEditor extends React.Component<Props> implements Editor {
 
   userClassesGenerated = {};
   userSelectionDecorations = {};
-  updateUserSelections = (
-    userSelections: Array<
-      | {
-          userId: string;
-          selection: null;
-        }
-      | {
-          userId: string;
-          name: string;
-          selection: any;
-          color: number[];
-        }
-    >
-  ) => {
+  updateUserSelections = (userSelections: UserSelection[]) => {
     if (this.editor.getActiveCodeEditor()) {
       updateUserSelections(
         this.monaco,
@@ -730,23 +736,24 @@ class MonacoEditor extends React.Component<Props> implements Editor {
           // Something went wrong while applying
           this.props.onModuleStateMismatch();
         }
-        return;
-      }
-
-      this.liveOperationCode = '';
+      } else {
+        this.liveOperationCode = '';
 
-      modelEditor.textModelReference.then(model => {
-        this.applyOperationToModel(
-          operation,
-          false,
-          model.object.textEditorModel
-        );
+        modelEditor.textModelReference.then(model => {
+          this.applyOperationToModel(
+            operation,
+            false,
+            model.object.textEditorModel
+          );
 
-        this.props.onChange(
-          model.object.textEditorModel.getValue(1),
-          module.shortid
-        );
-      });
+          if (this.props.onChange) {
+            this.props.onChange(
+              model.object.textEditorModel.getValue(1),
+              module.shortid
+            );
+          }
+        });
+      }
     });
   };
 

packages/app/src/app/pages/Live/index.js

@@ -13,6 +13,7 @@ import Centered from '@codesandbox/common/lib/components/flex/Centered';
 import Skeleton from 'app/components/Skeleton';
 import Padding from '@codesandbox/common/lib/components/spacing/Padding';
 import SignInButton from 'app/pages/common/SignInButton';
+import { hasAuthToken } from 'app/utils/user';
 
 import Editor from '../Sandbox/Editor';
 import BlinkingDot from './BlinkingDot';
@@ -36,7 +37,7 @@ class LivePage extends React.Component {
   }
 
   initializeLive = () => {
-    if (this.props.store.hasLogIn) {
+    if (hasAuthToken()) {
       this.loggedIn = true;
       this.props.signals.live.roomJoined({
         roomId: this.props.match.params.id,
@@ -47,7 +48,7 @@ class LivePage extends React.Component {
   componentDidUpdate(prevProps) {
     if (
       prevProps.match.params.id !== this.props.match.params.id ||
-      (this.props.store.hasLogIn && !this.loggedIn)
+      (hasAuthToken() && !this.loggedIn)
     ) {
       this.disconnectLive();
       this.initializeLive();
@@ -57,7 +58,7 @@ class LivePage extends React.Component {
   getContent = () => {
     const { store } = this.props;
 
-    if (!store.hasLogIn) {
+    if (!hasAuthToken()) {
       return (
         <React.Fragment>
           <div

packages/app/src/app/store/sequences.js

@@ -130,7 +130,10 @@ export const setSandbox = [
   when(
     state`editor.currentId`,
     props`sandbox.id`,
-    (currentId, newId) => currentId === newId
+    state`live.isLoading`,
+    // If we don't add the live check we will never initialize this state, since the roomJoined sequence also initializes
+    // editor.currentId to sandbox.id, which causes this check to always resolve to true
+    (currentId, newId, isLoadingLive) => currentId === newId && !isLoadingLive
   ),
   {
     true: [],

packages/app/src/app/utils/user.ts

@@ -0,0 +1,5 @@
+import store from 'store/dist/store.modern';
+
+export function hasAuthToken() {
+  return !!store.get('jwt');
+}