User leaving/connecting handling

Author: Ives van Hoorne

packages/app/src/app/components/CodeEditor/Monaco/index.js

@@ -405,6 +405,13 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       if (corrections) {
         this.setCorrections(corrections);
       }
+
+      if (this.props.onCodeReceived) {
+        // Whenever the user changes a module we set up a state that defines
+        // that the changes of code are not sent to live users. We need to reset
+        // this state when we're doing changing modules
+        this.props.onCodeReceived();
+      }
     });
   };
 

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

@@ -6,6 +6,7 @@ import {
   sendModuleSaved,
   getSelectionsForCurrentModule,
   sendChangeCurrentModule,
+  setReceivingStatus,
 } from '../live/actions';
 import {
   ensureOwnedSandbox,
@@ -49,6 +50,7 @@ export const stopResizing = set(state`editor.isResizing`, false);
 export const createZip = actions.createZip;
 
 export const changeCurrentModule = [
+  setReceivingStatus,
   setCurrentModule(props`id`),
   equals(state`live.isLive`),
   {

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

@@ -133,7 +133,7 @@ export function sendSelection({ props, state, live }) {
   });
 }
 
-export function consumeUserEnteredState({ props }) {
+export function consumeUserState({ props }) {
   const users = camelizeKeys(props.data.users);
 
   return { users };
@@ -399,6 +399,18 @@ export function getUserJoinedNotification({ props }) {
   return { message: `${user.username} joined the live session!` };
 }
 
+export function getUserLeftNotification({ props, state }) {
+  const users = state.get(`live.roomInfo.users`);
+  if (users) {
+    const user = users.find(u => u.id === props.data.left_user_id);
+    if (user) {
+      return { message: `${user.username} left the live session.` };
+    }
+  }
+
+  return { message: 'Someone left the live session' };
+}
+
 export function sendMode({ props, live }) {
   live.send('live:mode', {
     mode: props.mode,

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

@@ -11,6 +11,7 @@ export default Module({
     isLoading: false,
     isOwner: false,
     receivingCode: false,
+    reconnecting: false,
   },
   getters: {
     isCurrentEditor,

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

@@ -22,6 +22,7 @@ export default {
   receivingCode: types.boolean,
   error: types.maybe(types.string),
   isOwner: types.boolean,
+  reconnecting: types.boolean,
   roomInfo: types.maybe(
     types.model({
       startTime: types.maybe(types.number),

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

@@ -1,4 +1,4 @@
-import { set, push, when, equals } from 'cerebral/operators';
+import { unset, set, push, when, equals } from 'cerebral/operators';
 import { state, props } from 'cerebral/tags';
 
 import * as factories from '../../factories';
@@ -45,11 +45,23 @@ export const changeMode = [
 export const handleMessage = [
   equals(props`event`),
   {
+    join: [
+      set(props`message`, 'Connected to Live!'),
+      factories.addNotification(props`message`, 'success'),
+      set(state`live.reconnecting`, false),
+    ],
     'user:entered': [
-      actions.consumeUserEnteredState,
+      actions.consumeUserState,
       set(state`live.roomInfo.users`, props`users`),
-      actions.getUserJoinedNotification,
-      factories.addNotification(props`message`, 'notice'),
+      set(props`data.user_id`, props`data.joined_user_id`),
+      isOwnMessage,
+      {
+        false: [
+          actions.getUserJoinedNotification,
+          factories.addNotification(props`message`, 'notice'),
+        ],
+        true: [],
+      },
       equals(state`live.isOwner`),
       {
         true: [
@@ -60,6 +72,13 @@ export const handleMessage = [
         false: [],
       },
     ],
+    'user:left': [
+      actions.getUserLeftNotification,
+      factories.addNotification(props`message`, 'notice'),
+      actions.consumeUserState,
+      set(state`live.roomInfo.users`, props`users`),
+      unset(state`live.roomInfo.usersMetadata.${props`data.left_user_id`}`),
+    ],
     state: [
       isOwnMessage,
       {
@@ -201,6 +220,20 @@ export const handleMessage = [
         false: actions.receiveTransformation,
       },
     ],
+    'connection-loss': [
+      equals(state`live.reconnecting`),
+      {
+        false: [
+          set(
+            props`message`,
+            'We lost connection with the live server, reconnecting...'
+          ),
+          factories.addNotification(props`message`, 'error'),
+          set(state`live.reconnecting`, true),
+        ],
+        true: [],
+      },
+    ],
     otherwise: [],
   },
 ];

packages/app/src/app/store/providers/Live.js

@@ -30,7 +30,10 @@ export default Provider({
   listen(signalPath) {
     const signal = this.context.controller.getSignal(signalPath);
     channel.onMessage = (event: any, data: any) => {
-      signal({ event, data });
+      const alteredEvent =
+        data == null && event === 'phx_err' ? 'connection-loss' : event;
+
+      signal({ event: alteredEvent, data: data == null ? {} : data });
 
       return data;
     };