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

Author: peterpeterparker

remote/src/app/components/app-notes/app-notes.tsx

@@ -1,32 +1,24 @@
 import {Component, h, Listen, State} from '@stencil/core';
 
-import {Subscription} from 'rxjs';
+import notesStores from '../../stores/notes.store';
 
 import {Remarkable} from 'remarkable';
 
-import {NotesService} from '../../services/notes/notes.service';
-
 @Component({
   tag: 'app-notes',
-  styleUrl: 'app-notes.scss'
+  styleUrl: 'app-notes.scss',
 })
 export class AppNotes {
-  private notesService: NotesService;
-
-  private subscription: Subscription;
+  private destroyListener;
 
   @State()
   private portrait: boolean = true;
 
   @State()
   private notes: string;
 
-  constructor() {
-    this.notesService = NotesService.getInstance();
-  }
-
   componentWillLoad() {
-    this.subscription = this.notesService.watch().subscribe((element: HTMLElement) => {
+    notesStores.onChange('currentSlide', (element: HTMLElement) => {
       let notes: string = undefined;
 
       if (document && element) {
@@ -36,7 +28,7 @@ export class AppNotes {
           const md: Remarkable = new Remarkable({
             html: true,
             xhtmlOut: true,
-            breaks: true
+            breaks: true,
           });
 
           const codeRule = (inline: boolean) => (tokens, idx, _options, _env) => {
@@ -63,8 +55,8 @@ export class AppNotes {
   }
 
   componentDidUnload() {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
+    if (this.destroyListener) {
+      this.destroyListener();
     }
   }
 

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

@@ -5,6 +5,8 @@ import {Subscription} from 'rxjs';
 
 import {isMobile} from '@deckdeckgo/utils';
 
+import notesStores from '../../stores/notes.store';
+
 // Types
 import {
   DeckdeckgoEvent,
@@ -22,12 +24,11 @@ import {
 
 // Utils
 import {ParseSlidesUtils} from '../../utils/parse-slides.utils';
+import {ParseAttributesUtils} from '../../utils/parse-attributes.utils';
 
 // Services
 import {CommunicationService} from '../../services/communication/communication.service';
 import {AccelerometerService} from '../../services/accelerometer/accelerometer.service';
-import {NotesService} from '../../services/notes/notes.service';
-import {ParseAttributesUtils} from '../../utils/parse-attributes.utils';
 
 @Component({
   tag: 'app-remote',
@@ -69,12 +70,10 @@ export class AppRemote {
 
   private communicationService: CommunicationService;
   private accelerometerService: AccelerometerService;
-  private notesService: NotesService;
 
   constructor() {
     this.communicationService = CommunicationService.getInstance();
     this.accelerometerService = AccelerometerService.getInstance();
-    this.notesService = NotesService.getInstance();
   }
 
   componentWillLoad() {
@@ -297,7 +296,7 @@ export class AppRemote {
       next = this.el.querySelector('.deckgo-slide-container:nth-child(' + (this.slideIndex + 1) + ')');
     }
 
-    this.notesService.next(next);
+    notesStores.state.currentSlide = next;
   }
 
   private async lazyLoadPollContent($slideEvent: DeckdeckgoEventSlide) {

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

@@ -0,0 +1,11 @@
+import {createStore} from '@stencil/store';
+
+interface NotesStore {
+  currentSlide: HTMLElement | undefined;
+}
+
+const {state, onChange} = createStore({
+  currentSlide: undefined,
+} as NotesStore);
+
+export default {state, onChange};