Live fixes and version check for live sessions

Author: CompuIves

packages/app/src/app/pages/common/Modals/LiveSessionVersionMismatch/elements.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  background-color: ${props => props.theme.background};
+  padding: 1rem;
+
+  margin: 0;
+  color: rgba(255, 255, 255, 0.8);
+`;
+
+export const Heading = styled.h2`
+  margin-top: 7px !important;
+`;
+
+export const Explanation = styled.p`
+  line-height: 1.3;
+  margin-bottom: 1rem;
+`;

packages/app/src/app/pages/common/Modals/LiveSessionVersionMismatch/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { inject } from 'mobx-react';
+
+import VERSION, { getTimestamp } from 'common/version';
+
+import { Container, Heading, Explanation } from './elements';
+
+function LiveVersionMismatch({ store }) {
+  const newer =
+    getTimestamp(store.live.roomInfo.version) > getTimestamp(VERSION);
+
+  return (
+    <Container>
+      <Heading>Version Mismatch</Heading>
+      <Explanation>
+        The owner of this session has a{newer ? ' newer' : 'n older'} version of
+        CodeSandbox.
+        {newer
+          ? ' Refresh to get the latest version.'
+          : ' Ask the owner to refresh to get the latest version.'}
+        <p>
+          If refreshing doesn{"'"}t work, you can try to clear your storage and
+          unregister the service worker.
+        </p>
+      </Explanation>
+    </Container>
+  );
+}
+
+export default inject('store')(LiveVersionMismatch);

packages/app/src/app/pages/common/Modals/index.js

@@ -14,6 +14,7 @@ import SelectSandboxModal from './SelectSandboxModal';
 import SearchDependenciesModal from './SearchDependenciesModal';
 import DeleteProfileSandboxModal from './DeleteProfileSandboxModal';
 import LiveSessionEndedModal from './LiveSessionEndedModal';
+import LiveSessionVersionMismatch from './LiveSessionVersionMismatch';
 import UploadModal from './UploadModal';
 import StorageManagementModal from './StorageManagementModal';
 
@@ -66,6 +67,10 @@ const modals = {
     Component: LiveSessionEndedModal,
     width: 600,
   },
+  liveVersionMismatch: {
+    Component: LiveSessionVersionMismatch,
+    width: 600,
+  },
   uploading: {
     Component: UploadModal,
     width: 600,

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

@@ -182,16 +182,22 @@ export const addNpmDependency = [
     false: [actions.getLatestVersion],
   },
   actions.addNpmDependencyToPackage,
-  getCodeOperation,
-  sendTransform,
+  equals(state`live.isLive`),
+  {
+    true: [getCodeOperation, sendTransform],
+    false: [],
+  },
   saveCode,
 ];
 
 export const removeNpmDependency = [
   ensureOwnedSandbox,
   actions.removeNpmDependencyFromPackage,
-  getCodeOperation,
-  sendTransform,
+  equals(state`live.isLive`),
+  {
+    true: [getCodeOperation, sendTransform],
+    false: [],
+  },
   saveCode,
 ];
 

packages/app/src/app/store/modules/live/actions.js

@@ -1,6 +1,8 @@
 import { TextOperation } from 'ot';
 import { camelizeKeys } from 'humps';
 
+import VERSION from 'common/version';
+
 export function createRoom({ api, props }) {
   const id = props.sandboxId;
 
@@ -47,6 +49,7 @@ export function initializeLiveState({ props, state }) {
       messages: [],
       users: {},
     },
+    version: VERSION,
   });
   state.set('live.isLive', true);
   state.set('live.error', null);

packages/app/src/app/store/modules/live/model.js

@@ -36,6 +36,7 @@ export default {
       sandboxId: types.string,
       editorIds: types.array(types.string),
       usersMetadata: types.map(UserMetadata),
+      version: types.string,
       users: types.array(
         types.model({
           id: types.string,

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

@@ -8,6 +8,7 @@ import {
   toggle,
 } from 'cerebral/operators';
 import { state, props } from 'cerebral/tags';
+import VERSION from 'common/version';
 
 import * as factories from '../../factories';
 import { setSandbox, openModal, resetLive } from '../../sequences';
@@ -133,6 +134,11 @@ export const handleMessage = [
             props`changedModuleShortids`
           ),
           set(state`live.roomInfo`, props`roomInfo`),
+          when(state`live.roomInfo.version`, v => v !== VERSION),
+          {
+            true: [set(props`modal`, 'liveVersionMismatch'), openModal],
+            false: [],
+          },
           // Whether this is first load
           equals(state`live.isLoading`),
           {
@@ -360,7 +366,13 @@ export const createLive = [
   initializeLive,
 ];
 
-export const sendTransform = [actions.sendTransform];
+export const sendTransform = [
+  equals(state`live.isCurrentEditor`),
+  {
+    true: [actions.sendTransform],
+    false: [],
+  },
+];
 
 export const applyTransformation = [
   when(

packages/app/src/sandbox/status-screen/index.js

@@ -44,6 +44,8 @@ export default function setScreen(screen: Screen) {
         if (currentScreen) {
           changeText(currentScreen.text);
         }
+
+        firstLoaded = null;
       }, 600);
     }
   } else if (currentScreen) {

packages/common/version.js

@@ -21,6 +21,10 @@ try {
 }
 `);
 
+export const getTimestamp = version => {
+  return +version.split('-')[1];
+};
+
 export default preval(
   `module.exports = "${versionType}-${versionNumber}-${shortCommitSha}";`
 );