LivePage: refactor LivePage and make changedShortIds a derived (codesandbox#3208)

* refactor LivePageand make changedShortsids a derived

* change how we handle signing into live

* improve auth indication when joining live sandbox

* fix type on setInterval

Author: christianalfoni

packages/app/package.json

@@ -158,9 +158,9 @@
     "normalizr": "^3.2.3",
     "onigasm": "^2.2.1",
     "ot": "^0.0.15",
-    "overmind": "^21.0.0-1575912749783",
+    "overmind": "^21.0.0-1576231149763",
     "overmind-devtools": "^19.0.0",
-    "overmind-react": "^22.0.0-1575912749783",
+    "overmind-react": "^22.0.0-1576231149763",
     "phoenix": "^1.4.11",
     "postcss": "^6.0.9",
     "postcss-selector-parser": "^2.2.3",

packages/app/src/app/index.js

@@ -25,10 +25,10 @@ import { createOvermind } from 'overmind';
 import { Provider as ActualOvermindProvider } from 'overmind-react';
 import React from 'react';
 import { ApolloProvider } from 'react-apollo';
+import { DndProvider } from 'react-dnd';
 import { render } from 'react-dom';
 import { Router } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
-import { DndProvider } from 'react-dnd';
 
 import { config } from './overmind';
 import { Provider as OvermindProvider } from './overmind/Provider';

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

@@ -19,8 +19,8 @@ import {
   UploadedFilesInfo,
   UserSandbox,
 } from '@codesandbox/common/lib/types';
-import { client } from 'app/graphql/client';
 import { LIST_PERSONAL_TEMPLATES } from 'app/components/CreateNewSandbox/queries';
+import { client } from 'app/graphql/client';
 
 import {
   transformDirectory,
@@ -116,10 +116,12 @@ export default {
       )
       .then(transformModule);
   },
-  saveModules(sandboxId: string, modules: Module[]) {
-    return api.put(`/sandboxes/${sandboxId}/modules/mupdate`, {
-      modules,
-    });
+  saveModules(sandboxId: string, modules: Module[]): Promise<Module[]> {
+    return api
+      .put<IModuleAPIResponse[]>(`/sandboxes/${sandboxId}/modules/mupdate`, {
+        modules,
+      })
+      .then(modulesResult => modulesResult.map(transformModule));
   },
   getGitChanges(sandboxId: string): Promise<GitChanges> {
     return api.get(`/sandboxes/${sandboxId}/git/diff`);

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

@@ -3,6 +3,10 @@ import { IDerive, IState, json } from 'overmind';
 
 import { AsyncAction } from '.';
 
+/*
+  Ensures that we have loaded the app with the initial user
+  and settings
+*/
 export const withLoadApp = <T>(
   continueAction?: AsyncAction<T>
 ): AsyncAction<T> => async (context, value) => {
@@ -18,6 +22,7 @@ export const withLoadApp = <T>(
 
   state.isAuthenticating = true;
   state.jwt = effects.jwt.get() || null;
+
   effects.connection.addListener(actions.connectionChanged);
   actions.internal.setStoredSettings();
   effects.keybindingManager.set(

packages/app/src/app/overmind/internalActions.ts

@@ -36,6 +36,7 @@ export const signIn: AsyncAction<{ useExtraScopes?: boolean }> = async (
     effects.live.connect();
     actions.userNotifications.internal.initialize(); // Seemed a bit different originally?
     actions.refetchSandboxInfo();
+    state.isAuthenticating = false;
   } catch (error) {
     actions.internal.handleError({
       message: 'Could not authenticate with Github',

packages/app/src/app/overmind/modals.ts

@@ -1,3 +1,5 @@
 export const forkFrozenModal = {
   result: 'fork' as 'fork' | 'cancel' | 'unfreeze',
 };
+
+export const authenticateUserModal = {};

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -87,10 +87,6 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
   state.editor.isLoading = !hasExistingSandbox;
   state.editor.notFound = false;
 
-  // Only reset changed modules if sandbox wasn't in memory, otherwise a fork
-  // can mark real changed modules as unchanged
-  state.editor.changedModuleShortids = [];
-
   try {
     const sandbox = await effects.api.getSandbox(newId);
 
@@ -232,17 +228,42 @@ export const codeChanged: Action<{
 export const saveClicked: AsyncAction = withOwnedSandbox(
   async ({ state, effects, actions }) => {
     const sandbox = state.editor.currentSandbox;
-    const currentlyChangedModuleShortids = state.editor.changedModuleShortids.slice();
 
     try {
       const changedModules = sandbox.modules.filter(module =>
         state.editor.changedModuleShortids.includes(module.shortid)
       );
 
-      state.editor.changedModuleShortids = [];
+      const updatedModules = await effects.api.saveModules(
+        sandbox.id,
+        changedModules
+      );
+
+      updatedModules.forEach(updatedModule => {
+        const module = sandbox.modules.find(
+          moduleItem => moduleItem.shortid === updatedModule.shortid
+        );
 
-      await effects.api.saveModules(sandbox.id, changedModules);
-      effects.moduleRecover.clearSandbox(sandbox.id);
+        if (module) {
+          module.insertedAt = updatedModule.insertedAt;
+          module.updatedAt = updatedModule.updatedAt;
+
+          module.savedCode =
+            updatedModule.code === module.code ? null : updatedModule.code;
+
+          effects.vscode.sandboxFsSync.writeFile(
+            state.editor.modulesByPath,
+            module
+          );
+          effects.moduleRecover.remove(sandbox.id, module);
+        } else {
+          // We might not have the module, as it was created by the server. In
+          // this case we put it in. There is an edge case here where the user
+          // might delete the module while it is being updated, but it will very
+          // likely not happen
+          sandbox.modules.push(updatedModule);
+        }
+      });
 
       if (
         state.editor.currentSandbox.originalGit &&
@@ -253,13 +274,6 @@ export const saveClicked: AsyncAction = withOwnedSandbox(
 
       effects.preview.executeCodeImmediately();
     } catch (error) {
-      // Put back any unsaved modules taking into account that you
-      // might have changed some modules waiting for saving
-      currentlyChangedModuleShortids.forEach(moduleShortid => {
-        if (!state.editor.changedModuleShortids.includes(moduleShortid)) {
-          state.editor.changedModuleShortids.push(moduleShortid);
-        }
-      });
       actions.internal.handleError({
         message: 'There was a problem with saving the files, please try again',
         error,
@@ -510,11 +524,6 @@ export const discardModuleChanges: Action<{
 
   module.updatedAt = new Date().toString();
   effects.vscode.revertModule(module);
-
-  state.editor.changedModuleShortids.splice(
-    state.editor.changedModuleShortids.indexOf(moduleShortid),
-    1
-  );
 };
 
 export const fetchEnvironmentVariables: AsyncAction = async ({

packages/app/src/app/overmind/namespaces/editor/internalActions.ts

@@ -120,11 +120,6 @@ export const saveCode: AsyncAction<{
     effects.vscode.sandboxFsSync.writeFile(state.editor.modulesByPath, module);
     effects.moduleRecover.remove(sandbox.id, module);
 
-    state.editor.changedModuleShortids.splice(
-      state.editor.changedModuleShortids.indexOf(module.shortid),
-      1
-    );
-
     if (cbID) {
       effects.vscode.callCallback(cbID);
     }
@@ -269,23 +264,11 @@ export const setModuleCode: Action<{
   code: string;
 }> = ({ state, effects }, { module, code }) => {
   const { currentSandbox } = state.editor;
-  const hasChangedModuleId = state.editor.changedModuleShortids.includes(
-    module.shortid
-  );
 
   if (module.savedCode === null) {
     module.savedCode = module.code;
   }
 
-  if (hasChangedModuleId && module.savedCode === code) {
-    state.editor.changedModuleShortids.splice(
-      state.editor.changedModuleShortids.indexOf(module.shortid),
-      1
-    );
-  } else if (!hasChangedModuleId && module.savedCode !== code) {
-    state.editor.changedModuleShortids.push(module.shortid);
-  }
-
   effects.vscode.runCommand('workbench.action.keepEditor');
 
   const tabs = state.editor.tabs as ModuleTab[];

packages/app/src/app/overmind/namespaces/editor/state.ts

@@ -39,7 +39,7 @@ type State = {
   notFound: boolean;
   error: string | null;
   isResizing: boolean;
-  changedModuleShortids: string[];
+  changedModuleShortids: Derive<State, string[]>;
   currentTabId: string;
   tabs: Tabs;
   errors: ModuleError[];
@@ -79,7 +79,19 @@ export const state: State = {
   error: null,
   isResizing: false,
   modulesByPath: {},
-  changedModuleShortids: [],
+  changedModuleShortids: ({ currentSandbox }) => {
+    if (!currentSandbox) {
+      return [];
+    }
+
+    return currentSandbox.modules.reduce((aggr, module) => {
+      if (module.savedCode !== null && module.savedCode !== module.code) {
+        return aggr.concat(module.shortid);
+      }
+
+      return aggr;
+    }, []);
+  },
   currentTabId: null,
   tabs: [],
   errors: [],

packages/app/src/app/overmind/namespaces/live/actions.ts

@@ -9,13 +9,38 @@ import * as liveMessage from './liveMessageOperators';
 
 export const internal = internalActions;
 
+export const signInToRoom: AsyncAction<{
+  roomId: string;
+}> = withLoadApp(async ({ state, effects, actions }, { roomId }) => {
+  await actions.internal.signIn({});
+
+  if (state.isLoggedIn) {
+    await actions.live.roomJoined({
+      roomId,
+    });
+  }
+});
+
 export const roomJoined: AsyncAction<{
   roomId: string;
 }> = withLoadApp(async ({ state, effects, actions }, { roomId }) => {
+  if (!state.isLoggedIn) {
+    return;
+  }
+
   await effects.vscode.initialize;
   await effects.vscode.closeAllTabs();
+
+  if (state.live.isLive) {
+    actions.live.internal.disconnect();
+  }
+
   const sandbox = await actions.live.internal.initialize(roomId);
 
+  if (!sandbox) {
+    return;
+  }
+
   if (state.updateStatus === 'available') {
     const modal = 'liveVersionMismatch';
     effects.analytics.track('Open Modal', { modal });
@@ -36,7 +61,7 @@ export const roomJoined: AsyncAction<{
   effects.live.sendModuleStateSyncRequest();
   effects.vscode.openModule(state.editor.currentModule);
   effects.preview.executeCodeImmediately({ initialRender: true });
-  state.live.isLoading = false;
+  state.editor.isLoading = false;
 });
 
 export const createLiveClicked: AsyncAction<string> = async (