notification indication, contributors fixed again, changed modu… (codesandbox#2437)

* notification indiation, contributors fixed again, changed modules fixed

* fix wrong merge

* Fix lint

Author: christianalfoni

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

@@ -63,12 +63,13 @@ export default {
   async getSandbox(id: string): Promise<Sandbox> {
     const sandbox = await api.get<Sandbox>(`/sandboxes/${id}`);
 
-    // We need to add savedCode property to track it
+    // We need to add client side properties for tracking
     return {
       ...sandbox,
       modules: sandbox.modules.map(module => ({
         ...module,
         savedCode: null,
+        isNotSynced: false,
       })),
     };
   },

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

@@ -1,4 +1,4 @@
-import axios, { AxiosResponse } from 'axios';
+import axios from 'axios';
 
 export default {
   get: axios.get,
@@ -7,12 +7,4 @@ export default {
   delete: axios.delete,
   put: axios.put,
   request: axios.request,
-  async getJson<T>(url: string): Promise<AxiosResponse<T>> {
-    const response = await axios.get(url);
-
-    return {
-      ...response,
-      data: JSON.parse(response.data),
-    };
-  },
 };

packages/app/src/app/overmind/effects/live/clients.ts

@@ -40,7 +40,7 @@ class CodeSandboxOTClient extends Client {
   }
 
   sendOperation(revision, operation) {
-    this.onSendOperation(revision, operation);
+    this.onSendOperation(revision, operationToElixir(operation.toJSON()));
   }
 
   applyOperation(operation) {
@@ -97,11 +97,7 @@ export default (
         initialRevision,
         moduleShortid,
         (revision, operation) => {
-          sendOperation(
-            moduleShortid,
-            revision,
-            operationToElixir(operation.toJSON())
-          );
+          sendOperation(moduleShortid, revision, operation);
         },
         operation => {
           applyOperation(moduleShortid, operation);

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

@@ -51,7 +51,7 @@ export const withLoadApp = <T>(
   state.isAuthenticating = false;
 
   try {
-    const response = await effects.http.getJson<{
+    const response = await effects.http.get<{
       contributors: Contributor[];
     }>(
       'https://raw.githubusercontent.com/codesandbox/codesandbox-client/master/.all-contributorsrc'

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

@@ -72,7 +72,6 @@ type State = {
     }
   >;
   isAdvancedEditor: Derive<State, boolean>;
-  isModuleSynced: Derive<State, (moduleShortid: string) => boolean>;
   shouldDirectoryBeOpen: Derive<State, (directoryShortid: string) => boolean>;
   currentDevToolsPosition: {
     devToolIndex: number;
@@ -217,8 +216,6 @@ export const state: State = {
       ? currentPackageJSON.code
       : generateFileFromSandbox(currentSandbox);
   },
-  isModuleSynced: ({ changedModuleShortids }) => moduleShortid =>
-    changedModuleShortids.indexOf(moduleShortid) === -1,
   shouldDirectoryBeOpen: ({
     currentSandbox,
     currentModule,

packages/app/src/app/pages/Sandbox/Editor/Content/index.js

@@ -518,7 +518,9 @@ class EditorPreview extends React.Component {
                 sandbox={sandbox}
                 currentTab={currentTab}
                 currentModule={currentModule}
-                isModuleSynced={store.editor.isModuleSynced}
+                isModuleSynced={shortId =>
+                  !store.editor.changedModuleShortids.includes(shortId)
+                }
                 width={editorWidth}
                 height={editorHeight}
                 settings={settings(store)}

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren/ModuleEntry.js

@@ -38,7 +38,9 @@ class ModuleEntry extends React.Component {
 
     const liveUsers = store.live.liveUsersByModule[module.shortid] || [];
 
-    const isNotSynced = !store.editor.isModuleSynced(module.shortid);
+    const isNotSynced = store.editor.changedModuleShortids.includes(
+      module.shortid
+    );
 
     return (
       <Entry

packages/app/src/app/store/modules/editor/utils.js

@@ -9,7 +9,7 @@ export function saveAllModules(store, signals) {
   // fine-grained control of which saves succeed and which saves fail
   if (sandbox.owned) {
     sandbox.modules
-      .filter(m => !store.editor.isModuleSynced(m.shortid))
+      .filter(m => store.editor.changedModuleShortids.includes(m.shortid))
       .forEach(module => {
         signals.editor.codeSaved({
           code: module.code,