Only show 'reconnecting...' message when we're reconnecting live

Author: CompuIves

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

@@ -0,0 +1,23 @@
+import { ResolveState } from 'overmind';
+import { Reaction, Config } from '..';
+
+export default (() => {
+  let _reaction: Reaction;
+
+  return {
+    initialize(reaction: Reaction) {
+      _reaction = reaction;
+    },
+    waitUntil(
+      test: (state: ResolveState<Config['state']>) => boolean
+    ): Promise<boolean> {
+      return new Promise(resolve => {
+        _reaction(test, bool => {
+          if (bool === true) {
+            resolve();
+          }
+        });
+      });
+    },
+  };
+})();

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

@@ -25,3 +25,4 @@ export { default as executor } from './executor';
 export { default as stripe } from './stripe';
 export { default as jwt } from './jwt';
 export { default as preview } from './preview';
+export { default as flows } from './flows';

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

@@ -10,7 +10,10 @@ import {
 export default {
   convertTypeToStatus,
   add(notification: NotificationMessage) {
-    notificationState.addNotification(notification);
+    return notificationState.addNotification(notification);
+  },
+  remove(id: string) {
+    notificationState.removeNotification(id);
   },
   error(message: string) {
     notificationState.addNotification({

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

@@ -460,13 +460,16 @@ export const onOperation: Operator<LiveMessage<{
 });
 
 export const onConnectionLoss: Operator<LiveMessage> = mutate(
-  ({ state, effects }) => {
+  async ({ state, effects }) => {
     if (!state.live.reconnecting) {
-      effects.notificationToast.add({
+      const id = effects.notificationToast.add({
         message: 'We lost connection with the live server, reconnecting...',
         status: NotificationStatus.ERROR,
       });
       state.live.reconnecting = true;
+
+      await effects.flows.waitUntil(s => s.live.reconnecting === false);
+      effects.notificationToast.remove(id);
     }
   }
 );

packages/app/src/app/overmind/onInitialize.ts

@@ -17,6 +17,8 @@ export const onInitialize: OnInitialize = async (
     onApplyOperation: actions.live.applyTransformation,
   });
 
+  effects.flows.initialize(overmindInstance.reaction);
+
   effects.keybindingManager.initialize(overmindInstance);
 
   effects.api.initialize({

packages/notifications/src/component/Toasts.tsx

@@ -71,7 +71,7 @@ const DEFAULT_COLORS = {
 };
 
 const DEFAULT_BUTTON: IButtonType = props =>
-  React.createElement('button', props);
+  React.createElement('button', props); // eslint-disable-line
 
 export function Toasts({
   state,
@@ -150,6 +150,18 @@ export function Toasts({
     };
   }, [state]);
 
+  React.useEffect(() => {
+    const removeListener = state.onNotificationRemoved(event => {
+      setNotificationsToShow(notifications =>
+        notifications.filter(n => n.id !== event.id)
+      );
+    });
+
+    return () => {
+      removeListener();
+    };
+  }, [state]);
+
   const transitions = useTransition<
     NotificationToast,
     { overflow: string; opacity: number; height: number }

packages/notifications/src/state.ts

@@ -55,9 +55,11 @@ export class NotificationState {
   private readonly _onNotificationUpdated = new Emitter<
     NotificationUpdatedEvent
   >();
+
   private readonly _onNotificationRemoved = new Emitter<
     NotificationRemovedEvent
   >();
+
   onNotificationUpdated = this._onNotificationUpdated.event;
   onNotificationRemoved = this._onNotificationRemoved.event;