feat(#773): use stencil/store for remote

Author: peterpeterparker

remote/src/app/modals/app-remote-connect/app-remote-connect.tsx

@@ -1,34 +1,25 @@
 import {Component, Element, Listen, State, h} from '@stencil/core';
 
-import {Subscription} from 'rxjs';
+import remoteStore, {ActiveRoom} from '../../stores/remote.store';
 
 // Services
-import {ActiveRoom, CommunicationService} from '../../services/communication/communication.service';
+import {CommunicationService} from '../../services/communication/communication.service';
 
 @Component({
   tag: 'app-remote-connect',
-  styleUrl: 'app-remote-connect.scss'
+  styleUrl: 'app-remote-connect.scss',
 })
 export class AppRemoteConnect {
   @Element() el: HTMLElement;
 
-  @State()
-  private rooms: ActiveRoom[] = [];
-
   @State()
   private readonly clientId: string;
 
-  private readonly subscription: Subscription;
-
   private communicationService: CommunicationService;
 
   constructor() {
     this.communicationService = CommunicationService.getInstance();
 
-    this.subscription = this.communicationService.watchRooms().subscribe(async (activeRooms: ActiveRoom[]) => {
-      this.rooms = activeRooms;
-    });
-
     this.clientId = this.communicationService.clientId;
   }
 
@@ -38,12 +29,6 @@ export class AppRemoteConnect {
     history.pushState({modal: true}, null);
   }
 
-  async componentDidUnload() {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-    }
-  }
-
   @Listen('popstate', {target: 'window'})
   async handleHardwareBackbutton(_e: PopStateEvent) {
     await this.closeModal(false);
@@ -69,12 +54,12 @@ export class AppRemoteConnect {
         </ion-buttons>
       </app-header>,
 
-      <ion-content class="ion-padding">{this.renderContent()}</ion-content>
+      <ion-content class="ion-padding">{this.renderContent()}</ion-content>,
     ];
   }
 
   private renderContent() {
-    if (this.rooms && this.rooms.length > 0) {
+    if (remoteStore.state.rooms && remoteStore.state.rooms.length > 0) {
       return (
         <ion-list>
           <ion-list-header class="ion-padding-bottom ion-padding-top">
@@ -92,7 +77,7 @@ export class AppRemoteConnect {
   }
 
   private renderRooms() {
-    return this.rooms.map((activeRoom: ActiveRoom) => {
+    return remoteStore.state.rooms.map((activeRoom: ActiveRoom) => {
       return (
         <ion-item onClick={() => this.updateAndCloseModal(activeRoom.room)} disabled={activeRoom.connected}>
           <ion-label>{activeRoom.room}</ion-label>

remote/src/app/pages/app-remote/app-remote.tsx

@@ -1,11 +1,12 @@
 import {Component, Element, Prop, State, h, JSX} from '@stencil/core';
 import {alertController, modalController, OverlayEventDetail} from '@ionic/core';
 
-import {Subscription} from 'rxjs';
-
 import {isMobile} from '@deckdeckgo/utils';
 
+import {Subscription} from 'rxjs';
+
 import notesStores from '../../stores/notes.store';
+import remoteStore from '../../stores/remote.store';
 
 // Types
 import {
@@ -40,8 +41,8 @@ export class AppRemote {
   @Prop()
   room: string;
 
-  private subscriptionState: Subscription;
-  private subscriptionEvent: Subscription;
+  private stateDestroyListener;
+  private eventDestroyListener;
 
   @State() private connectionState: ConnectionState = ConnectionState.DISCONNECTED;
 
@@ -81,7 +82,7 @@ export class AppRemote {
   }
 
   async componentDidLoad() {
-    this.subscriptionState = this.communicationService.watchState().subscribe(async (state: ConnectionState) => {
+    this.stateDestroyListener = remoteStore.onChange('state', async (state: ConnectionState) => {
       this.connectionState = state;
 
       if (state === ConnectionState.CONNECTED) {
@@ -92,7 +93,7 @@ export class AppRemote {
       }
     });
 
-    this.subscriptionEvent = this.communicationService.watchEvent().subscribe(async ($event: DeckdeckgoEvent) => {
+    this.eventDestroyListener = remoteStore.onChange('$event', async ($event: DeckdeckgoEvent) => {
       if ($event.emitter === DeckdeckgoEventEmitter.DECK) {
         if ($event.type === DeckdeckgoEventType.SLIDES_ANSWER) {
           await this.initDeckAndSlides($event as DeckdeckgoEventDeck);
@@ -185,12 +186,12 @@ export class AppRemote {
   async componentDidUnload() {
     await this.disconnect();
 
-    if (this.subscriptionState) {
-      this.subscriptionState.unsubscribe();
+    if (this.stateDestroyListener) {
+      this.stateDestroyListener();
     }
 
-    if (this.subscriptionEvent) {
-      this.subscriptionEvent.unsubscribe();
+    if (this.eventDestroyListener) {
+      this.eventDestroyListener();
     }
 
     if (this.acceleratorSubscription) {

remote/src/app/services/communication/communication.service.tsx

@@ -1,6 +1,6 @@
 import * as io from 'socket.io-client';
 
-import {BehaviorSubject, Observable, Subject} from 'rxjs';
+import remoteStore from '../../stores/remote.store';
 
 // Types
 import {
@@ -9,7 +9,7 @@ import {
   DeckdeckgoEventNextPrevSlide,
   DeckdeckgoEventSlideAction,
   DeckdeckgoEventSlideTo,
-  ConnectionState
+  ConnectionState,
 } from '@deckdeckgo/types';
 
 // Services
@@ -20,17 +20,11 @@ const configuration: RTCConfiguration = {
     {
       urls: 'turn:api.deckdeckgo.com:3478',
       username: 'user',
-      credential: 'deckdeckgo'
-    }
-  ]
+      credential: 'deckdeckgo',
+    },
+  ],
 };
 
-export interface ActiveRoom {
-  room: string;
-  clients: number;
-  connected: boolean;
-}
-
 // @ts-ignore
 const PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection || window.msRTCPeerConnection;
 
@@ -51,10 +45,6 @@ export class CommunicationService {
     .toString()
     .replace(/\B(?=(\d{2})+(?!\d))/g, ' ');
 
-  private state: BehaviorSubject<ConnectionState> = new BehaviorSubject<ConnectionState>(ConnectionState.DISCONNECTED);
-  private event: Subject<DeckdeckgoEvent> = new Subject<DeckdeckgoEvent>();
-  private rooms: BehaviorSubject<ActiveRoom[]> = new BehaviorSubject<ActiveRoom[]>([]);
-
   private constructor() {
     // Private constructor, singleton
   }
@@ -73,30 +63,30 @@ export class CommunicationService {
         return;
       }
 
-      this.state.next(ConnectionState.CONNECTING);
+      remoteStore.state.state = ConnectionState.CONNECTING;
 
       const url: string = EnvironmentConfigService.getInstance().get('signalingServerUrl');
 
       this.socket = io.connect(url, {
         reconnectionAttempts: 5,
         transports: ['websocket', 'xhr-polling'],
-        query: 'type=app'
+        query: 'type=app',
       });
 
       this.socket.on('connect', async () => {
         this.socket.emit('rooms');
       });
 
       this.socket.on('active_rooms', async (data) => {
-        this.rooms.next(data.rooms);
+        remoteStore.state.rooms = [...data.rooms];
       });
 
       this.socket.on('joined', async () => {
         this.startSignaling();
 
         this.sendApp();
 
-        this.state.next(ConnectionState.CONNECTED_WITH_SIGNALING_SERVER);
+        remoteStore.state.state = ConnectionState.CONNECTED_WITH_SIGNALING_SERVER;
       });
 
       this.socket.on('deck_joined', async () => {
@@ -124,7 +114,7 @@ export class CommunicationService {
                 }
               },
               (_err) => {
-                this.state.next(ConnectionState.NOT_CONNECTED);
+                remoteStore.state.state = ConnectionState.NOT_CONNECTED;
               }
             );
           } else {
@@ -134,23 +124,23 @@ export class CommunicationService {
       });
 
       this.socket.on('connect_error', () => {
-        this.state.next(ConnectionState.NOT_CONNECTED);
+        remoteStore.state.state = ConnectionState.NOT_CONNECTED;
       });
 
       this.socket.on('connect_timeout', () => {
-        this.state.next(ConnectionState.NOT_CONNECTED);
+        remoteStore.state.state = ConnectionState.NOT_CONNECTED;
       });
 
       this.socket.on('error', () => {
-        this.state.next(ConnectionState.NOT_CONNECTED);
+        remoteStore.state.state = ConnectionState.NOT_CONNECTED;
       });
 
       this.socket.on('reconnect_failed', () => {
-        this.state.next(ConnectionState.NOT_CONNECTED);
+        remoteStore.state.state = ConnectionState.NOT_CONNECTED;
       });
 
       this.socket.on('reconnect_error', () => {
-        this.state.next(ConnectionState.NOT_CONNECTED);
+        remoteStore.state.state = ConnectionState.NOT_CONNECTED;
       });
 
       resolve();
@@ -163,7 +153,7 @@ export class CommunicationService {
     }
 
     this.socket.emit('join', {
-      room: this.room
+      room: this.room,
     });
   }
 
@@ -182,13 +172,13 @@ export class CommunicationService {
 
       if (this.socket) {
         this.socket.emit('leave', {
-          room: this.room
+          room: this.room,
         });
         this.socket.removeAllListeners();
         this.socket.disconnect();
       }
 
-      this.state.next(ConnectionState.DISCONNECTED);
+      remoteStore.state.state = ConnectionState.DISCONNECTED;
 
       resolve();
     });
@@ -200,18 +190,6 @@ export class CommunicationService {
     }
   }
 
-  watchState(): Observable<ConnectionState> {
-    return this.state.asObservable();
-  }
-
-  watchEvent(): Observable<DeckdeckgoEvent> {
-    return this.event.asObservable();
-  }
-
-  watchRooms(): Observable<ActiveRoom[]> {
-    return this.rooms.asObservable();
-  }
-
   private startSignaling() {
     this.rtcPeerConn = new PeerConnection(configuration);
 
@@ -223,7 +201,7 @@ export class CommunicationService {
         this.socket.emit('signal', {
           type: 'ice_candidate',
           message: JSON.stringify({candidate: evt.candidate}),
-          room: this.room
+          room: this.room,
         });
       }
     };
@@ -235,7 +213,7 @@ export class CommunicationService {
     this.socket.emit('signal', {
       type: 'app_here',
       room: this.room,
-      message: this.clientId
+      message: this.clientId,
     });
   }
 
@@ -245,11 +223,11 @@ export class CommunicationService {
         this.socket.emit('signal', {
           type: 'sending_local_description',
           message: JSON.stringify({sdp: this.rtcPeerConn.localDescription}),
-          room: this.room
+          room: this.room,
         });
       },
       (_err) => {
-        this.state.next(ConnectionState.NOT_CONNECTED);
+        remoteStore.state.state = ConnectionState.NOT_CONNECTED;
       }
     );
   }
@@ -261,7 +239,7 @@ export class CommunicationService {
   };
 
   private connectedWhenOpened = () => {
-    this.state.next(ConnectionState.CONNECTED);
+    remoteStore.state.state = ConnectionState.CONNECTED;
   };
 
   private receiveDataChannelMessage = (event) => {
@@ -270,6 +248,6 @@ export class CommunicationService {
     }
 
     const data: DeckdeckgoEvent = JSON.parse(event.data);
-    this.event.next(data);
+    remoteStore.state.$event = {...data};
   };
 }

remote/src/app/stores/remote.store.ts

@@ -0,0 +1,23 @@
+import {createStore} from '@stencil/store';
+
+import {ConnectionState, DeckdeckgoEvent} from '@deckdeckgo/types';
+
+export interface ActiveRoom {
+  room: string;
+  clients: number;
+  connected: boolean;
+}
+
+interface RemoteStore {
+  state: ConnectionState;
+  $event: DeckdeckgoEvent | undefined;
+  rooms: ActiveRoom[];
+}
+
+const {state, onChange} = createStore({
+  state: ConnectionState.DISCONNECTED,
+  $event: undefined,
+  rooms: [],
+} as RemoteStore);
+
+export default {state, onChange};