Make the reconnect action of live more robust (codesandbox#2928)

* Make the reconnect action of live more robust

* Move disconnect reason to an enum

Author: CompuIves

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

@@ -131,7 +131,9 @@ export default {
     }) => {}
   ) {
     channel.onMessage = (event: any, data: any) => {
-      const disconnected = data == null && event === 'phx_error';
+      const disconnected =
+        (data == null || Object.keys(data).length === 0) &&
+        event === 'phx_error';
       const alteredEvent = disconnected ? 'connection-loss' : event;
 
       const _isOwnMessage = Boolean(

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

@@ -1,30 +1,32 @@
 import {
-  LiveMessageEvent,
   LiveMessage,
   Module,
   Directory,
   Selection,
+  LiveDisconnectReason,
 } from '@codesandbox/common/lib/types';
 import { mutate, json } from 'overmind';
 import { Operator } from 'app/overmind';
 import { camelizeKeys } from 'humps';
 import { NotificationStatus } from '@codesandbox/notifications/lib/state';
 
-export const onJoin: Operator<LiveMessage<LiveMessageEvent.JOIN>> = mutate(
-  ({ effects, state }) => {
-    effects.notificationToast.success(
-      state.live.isTeam ? 'Connected to Live Team!' : 'Connected to Live!'
-    );
+export const onJoin: Operator<
+  LiveMessage<{ status: 'connected'; live_user_id: string }>
+> = mutate(({ effects, state }, { data }) => {
+  state.live.liveUserId = data.live_user_id;
 
-    if (state.live.reconnecting) {
-      effects.live.getAllClients().forEach(client => {
-        client.serverReconnect();
-      });
-    }
+  effects.notificationToast.success(
+    state.live.isTeam ? 'Connected to Live Team!' : 'Connected to Live!'
+  );
 
-    state.live.reconnecting = false;
+  if (state.live.reconnecting) {
+    effects.live.getAllClients().forEach(client => {
+      client.serverReconnect();
+    });
   }
-);
+
+  state.live.reconnecting = false;
+});
 
 export const onModuleState: Operator<
   LiveMessage<{
@@ -84,12 +86,14 @@ export const onUserLeft: Operator<
     const { users } = state.live.roomInfo;
     const user = users ? users.find(u => u.id === data.left_user_id) : null;
 
-    effects.notificationToast.add({
-      message: user
-        ? `${user.username} left the live session.`
-        : 'Someone left the live session',
-      status: NotificationStatus.NOTICE,
-    });
+    if (user.id !== state.live.liveUserId) {
+      effects.notificationToast.add({
+        message: user
+          ? `${user.username} left the live session.`
+          : 'Someone left the live session',
+        status: NotificationStatus.NOTICE,
+      });
+    }
   }
 
   actions.live.internal.clearUserSelections(data.left_user_id);
@@ -397,12 +401,9 @@ export const onConnectionLoss: Operator<LiveMessage> = mutate(
 );
 
 export const onDisconnect: Operator<
-  LiveMessage<{
-    reason: string;
-  }>
+  LiveMessage<{ reason: LiveDisconnectReason }>
 > = mutate(({ state, actions }, { data }) => {
   actions.live.internal.disconnect();
-
   state.editor.currentSandbox.owned = state.live.isOwner;
 
   actions.modalOpened({

packages/common/src/types/index.ts

@@ -670,4 +670,6 @@ export enum PatronBadge {
   FOURTH = 'patron-4',
 }
 
+export type LiveDisconnectReason = 'close' | 'inactivity';
+
 export type PatronTier = 1 | 2 | 3 | 4;