updating to plan

Author: christianalfoni

packages/app/src/app/graphql/types.ts

@@ -44,6 +44,7 @@ export type CodeReference = {
   code: Scalars['String'];
   head: Scalars['Int'];
   path: Scalars['String'];
+  sandboxVersion: Scalars['Int'];
 };
 
 export type CodeReferenceMetadata = {
@@ -52,6 +53,7 @@ export type CodeReferenceMetadata = {
   code: Scalars['String'];
   head: Scalars['Int'];
   path: Scalars['String'];
+  sandboxVersion: Scalars['Int'];
 };
 
 /** A collaborator on a sandbox */
@@ -867,7 +869,7 @@ export type CommentFragment = { __typename?: 'Comment' } & Pick<
       > & {
           metadata: { __typename?: 'CodeReferenceMetadata' } & Pick<
             CodeReferenceMetadata,
-            'anchor' | 'code' | 'head' | 'path'
+            'anchor' | 'code' | 'head' | 'path' | 'sandboxVersion'
           >;
         }
     >;

packages/app/src/app/overmind/effects/gql/comments/fragments.ts

@@ -15,6 +15,7 @@ export const commentFragment = gql`
           code
           head
           path
+          sandboxVersion
         }
       }
       resource
@@ -50,6 +51,7 @@ export const commentWithRepliesFragment = gql`
           code
           head
           path
+          sandboxVersion
         }
       }
       resource

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

@@ -13,7 +13,6 @@ import {
 } from '@codesandbox/common/lib/utils/analytics/sentry';
 import _debug from '@codesandbox/common/lib/utils/debug';
 import { camelizeKeys } from 'humps';
-import { debounce } from 'lodash-es';
 import { SerializedTextOperation, TextOperation } from 'ot';
 import { Channel, Presence, Socket } from 'phoenix';
 import uuid from 'uuid';
@@ -422,11 +421,7 @@ class Live {
     viewRange: UserViewRange
   ) {
     if (this.connectionsCount === 1) {
-      return this.sendDebounced('user:view-range', {
-        liveUserId,
-        moduleShortid,
-        viewRange,
-      });
+      return Promise.resolve();
     }
 
     return this.send('user:view-range', {
@@ -442,19 +437,26 @@ class Live {
     selection: UserSelection
   ) {
     if (this.connectionsCount === 1) {
-      return this.sendDebounced('user:selection', {
-        liveUserId,
-        moduleShortid,
-        selection,
-      });
+      return Promise.resolve();
     }
+
     return this.send('user:selection', {
       liveUserId,
       moduleShortid,
       selection,
     });
   }
 
+  async saveModule(module: Module) {
+    const client = clients.get(module.shortid);
+    await client.awaitSynchronized.promise;
+
+    return this.send('save', {
+      moduleShortid: module.shortid,
+      revision: client.revision,
+    });
+  }
+
   reset() {
     clients.clear();
   }
@@ -491,13 +493,6 @@ class Live {
       this.onApplyOperation
     );
   }
-
-  private sendDebounced = debounce<(event: string, payload: any) => void>(
-    (...args) => {
-      this.send(...args);
-    },
-    500
-  );
 }
 
 export default new Live();

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

@@ -13,6 +13,7 @@ import {
 import { Action, AsyncAction } from 'app/overmind';
 import { utcToZonedTime } from 'date-fns-tz';
 
+import { captureException } from '@codesandbox/common/lib/utils/analytics/sentry';
 import { OPTIMISTIC_COMMENT_ID } from './state';
 
 export const selectCommentsFilter: Action<CommentsFilterOption> = (
@@ -212,7 +213,7 @@ export const createComment: AsyncAction = async ({ state, effects }) => {
   }
 
   const id = OPTIMISTIC_COMMENT_ID;
-  const sandboxId = state.editor.currentSandbox.id;
+  const sandbox = state.editor.currentSandbox;
   const now = utcToZonedTime(new Date().toISOString(), 'Etc/UTC');
   let codeReference: CodeReference | null = null;
   const selection = state.live.currentSelection;
@@ -228,6 +229,7 @@ export const createComment: AsyncAction = async ({ state, effects }) => {
           )
         : '',
       path: state.editor.currentModule.path,
+      sandboxVersion: sandbox.version,
     };
   }
 
@@ -258,11 +260,11 @@ export const createComment: AsyncAction = async ({ state, effects }) => {
   };
   const comments = state.comments.comments;
 
-  if (!comments[sandboxId]) {
-    comments[sandboxId] = {};
+  if (!comments[sandbox.id]) {
+    comments[sandbox.id] = {};
   }
 
-  comments[sandboxId][id] = optimisticComment;
+  comments[sandbox.id][id] = optimisticComment;
   // placeholder value until we know the correct values
   const {
     left,
@@ -299,17 +301,17 @@ export const addComment: AsyncAction<{
   }
 
   const id = OPTIMISTIC_COMMENT_ID;
-  const sandbox = state.editor.currentSandbox;
+  const sandboxId = state.editor.currentSandbox.id;
   const now = utcToZonedTime(new Date().toISOString(), 'Etc/UTC');
   const comments = state.comments.comments;
 
-  if (!comments[sandbox.id]) {
-    comments[sandbox.id] = {};
+  if (!comments[sandboxId]) {
+    comments[sandboxId] = {};
   }
 
   let optimisticComment: CommentFragment;
-  if (state.comments.comments[sandbox.id][id]) {
-    optimisticComment = state.comments.comments[sandbox.id][id];
+  if (state.comments.comments[sandboxId][id]) {
+    optimisticComment = state.comments.comments[sandboxId][id];
   } else {
     optimisticComment = {
       parentComment: parentCommentId ? { id: parentCommentId } : null,
@@ -327,20 +329,25 @@ export const addComment: AsyncAction<{
       references: [],
       comments: [],
     };
-    comments[sandbox.id][id] = optimisticComment;
+    comments[sandboxId][id] = optimisticComment;
   }
 
   if (optimisticComment.parentComment) {
-    comments[sandbox.id][optimisticComment.parentComment.id].comments.push({
+    comments[sandboxId][optimisticComment.parentComment.id].comments.push({
       id,
     });
   }
   state.comments.selectedCommentsFilter = CommentsFilterOption.OPEN;
 
-  try {
+  // The server might be ahead on sandbox version, so we need to try to save
+  // several times
+  let tryCount = 0;
+
+  async function saveComment() {
+    tryCount++;
     const response = await effects.gql.mutations.createComment({
       parentCommentId: parentCommentId || null,
-      sandboxId: sandbox.id,
+      sandboxId,
       content,
       codeReference: optimisticComment.references.length
         ? optimisticComment.references[0].metadata
@@ -349,15 +356,15 @@ export const addComment: AsyncAction<{
 
     const comment = response.createComment;
 
-    delete comments[sandbox.id][id];
-    comments[sandbox.id][comment.id] = comment;
+    delete comments[sandboxId][id];
+    comments[sandboxId][comment.id] = comment;
 
     if (parentCommentId) {
-      comments[sandbox.id][parentCommentId].comments.push({
+      comments[sandboxId][parentCommentId].comments.push({
         id: comment.id,
       });
-      comments[sandbox.id][parentCommentId].comments.splice(
-        comments[sandbox.id][parentCommentId].comments.findIndex(
+      comments[sandboxId][parentCommentId].comments.splice(
+        comments[sandboxId][parentCommentId].comments.findIndex(
           childComment => childComment.id === id
         ),
         1
@@ -366,13 +373,21 @@ export const addComment: AsyncAction<{
 
     if (state.comments.currentCommentId === OPTIMISTIC_COMMENT_ID) {
       state.comments.currentCommentId = comment.id;
-      delete comments[sandbox.id][OPTIMISTIC_COMMENT_ID];
+      delete comments[sandboxId][OPTIMISTIC_COMMENT_ID];
     }
+  }
+  try {
+    await saveComment();
   } catch (error) {
-    effects.notificationToast.error(
-      'Unable to create your comment, please try again'
-    );
-    delete comments[sandbox.id][id];
+    if (error.response?.data?.error === 'old_version' && tryCount < 3) {
+      await saveComment();
+    } else {
+      captureException(error);
+      effects.notificationToast.error(
+        'Unable to create your comment, please try again'
+      );
+      delete comments[sandboxId][id];
+    }
   }
 };
 

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

@@ -448,7 +448,7 @@ export const saveClicked: AsyncAction = withOwnedSandbox(
       );
 
       await Promise.all(
-        changedModules.map(module => effects.live.saveModule(module.shortid))
+        changedModules.map(module => effects.live.saveModule(module))
       );
 
       if (

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

@@ -138,7 +138,7 @@ export const saveCode: AsyncAction<{
   }
 
   try {
-    await effects.live.saveModule(module.shortid);
+    await effects.live.saveModule(module);
     const updatedModule = await effects.api.saveModuleCode(
       sandbox.id,
       module.shortid,