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

Author: peterpeterparker

remote/package-lock.json

@@ -56,6 +56,7 @@
     "@stencil/core": "^1.15.0",
     "@stencil/postcss": "^1.0.1",
     "@stencil/sass": "^1.3.2",
+    "@stencil/store": "^1.3.0",
     "@types/socket.io-client": "^1.4.33",
     "@types/w3c-generic-sensor": "^1.0.2",
     "@types/webrtc": "0.0.26",

remote/package.json

@@ -46,8 +46,8 @@ export class AppRoot {
     }
   }
 
-  componentDidUnload() {
-    this.timerService.destroy();
+  async componentDidUnload() {
+    await this.timerService.destroy();
 
     if (this.themeSubscription) {
       this.themeSubscription.unsubscribe();

remote/src/app/app-root.tsx

@@ -1,84 +1,24 @@
-import {Component, State, h} from '@stencil/core';
+import {Component, h} from '@stencil/core';
 
-import {BehaviorSubject, Subscription} from 'rxjs';
-
-import {addMilliseconds, formatDistanceStrict} from 'date-fns';
-
-import {TimerInterval, TimerService} from '../../services/timer/timer.service';
+import timerStore from '../../stores/timer.store';
 
 @Component({
   tag: 'app-stopwatch-time',
-  styleUrl: 'app-stopwatch-time.scss'
+  styleUrl: 'app-stopwatch-time.scss',
 })
 export class AppStopwatchTime {
-  private watcherSubscription: Subscription;
-  private timerSubscription: Subscription;
-
-  @State()
-  private remainingText: string;
-
-  @State()
-  private remainingTime: number = 0;
-
-  private timerService: TimerService;
-
-  constructor() {
-    this.timerService = TimerService.getInstance();
-  }
-
-  async componentWillLoad() {
-    this.watcherSubscription = this.timerService.watch().subscribe((timer: BehaviorSubject<TimerInterval>) => {
-      if (timer) {
-        this.timerSubscription = timer.subscribe(
-          (interval: TimerInterval) => {
-            if (interval) {
-              this.remainingTime = interval.timerRemaining;
-
-              const end: Date = addMilliseconds(new Date(), this.remainingTime);
-              this.remainingText = formatDistanceStrict(end, new Date());
-            } else {
-              this.remainingTime = 0;
-              this.remainingText = formatDistanceStrict(new Date(), new Date());
-            }
-          },
-          (_err) => {
-            // Do nothing
-          },
-          async () => {
-            this.remainingTime = 0;
-            this.remainingText = formatDistanceStrict(new Date(), new Date());
-
-            if (this.timerSubscription) {
-              this.timerSubscription.unsubscribe();
-            }
-          }
-        );
-      }
-    });
-  }
-
-  async componentDidUnload() {
-    if (this.timerSubscription) {
-      this.timerSubscription.unsubscribe();
-    }
-
-    if (this.watcherSubscription) {
-      this.watcherSubscription.unsubscribe();
-    }
-  }
-
   render() {
     let color: string = 'primary';
-    if (this.remainingTime >= 30000 && this.remainingTime < 60000) {
+    if (timerStore.state.remainingTime >= 30000 && timerStore.state.remainingTime < 60000) {
       color = 'secondary';
-    } else if (this.remainingTime < 30000 && this.remainingTime >= 0) {
+    } else if (timerStore.state.remainingTime < 30000 && timerStore.state.remainingTime >= 0) {
       color = 'tertiary';
     }
 
-    if (this.remainingText) {
+    if (timerStore.state.remainingText) {
       return (
         <ion-chip color="danger" style={{background: `var(--ion-color-${color})`, color: 'var(--ion-color-light)'}}>
-          <ion-label>{this.remainingText}</ion-label>
+          <ion-label>{timerStore.state.remainingText}</ion-label>
         </ion-chip>
       );
     } else {

remote/src/app/components/app-stopwatch-time/app-stopwatch-time.tsx

@@ -1,31 +1,22 @@
-import {Component, Element, State, h} from '@stencil/core';
+import {Component, Element, State, h, Listen} from '@stencil/core';
 import {DatetimeChangeEventDetail} from '@ionic/core';
 
 import {differenceInMilliseconds, isAfter, startOfDay} from 'date-fns';
 
-import {BehaviorSubject, Subscription} from 'rxjs';
+import timerStore from '../../stores/timer.store';
 
 import {Comparator} from '../../services/utils/utils';
 
-import {TimerInterval, TimerService} from '../../services/timer/timer.service';
 import {NotificationService} from '../../services/notification/notification.service';
+import {TimerService} from '../../services/timer/timer.service';
 
 @Component({
   tag: 'app-timer',
-  styleUrl: 'app-timer.scss'
+  styleUrl: 'app-timer.scss',
 })
 export class AppTimer {
   @Element() el: HTMLElement;
 
-  private watcherSubscription: Subscription;
-  private timerSubscription: Subscription;
-
-  @State()
-  private timerRemaining: number;
-
-  @State()
-  private timerLength: number;
-
   @State()
   private timerRunning: boolean;
 
@@ -35,6 +26,8 @@ export class AppTimer {
   private timerService: TimerService;
   private notificationService: NotificationService;
 
+  private destroyListener;
+
   constructor() {
     this.timerService = TimerService.getInstance();
     this.notificationService = NotificationService.getInstance();
@@ -43,8 +36,6 @@ export class AppTimer {
   async componentDidLoad() {
     this.notificationService.init();
 
-    this.watchTimer();
-
     this.timerRunning = await this.timerService.isTimerStarted();
 
     if (this.timerRunning) {
@@ -53,36 +44,11 @@ export class AppTimer {
   }
 
   async componentDidUnload() {
-    if (this.timerSubscription) {
-      this.timerSubscription.unsubscribe();
-    }
-
-    if (this.watcherSubscription) {
-      this.watcherSubscription.unsubscribe();
+    if (this.destroyListener) {
+      this.destroyListener();
     }
   }
 
-  private watchTimer() {
-    this.watcherSubscription = this.timerService.watch().subscribe((timer: BehaviorSubject<TimerInterval>) => {
-      if (timer) {
-        this.timerSubscription = timer.subscribe(
-          (interval: TimerInterval) => {
-            if (interval) {
-              this.timerRemaining = interval.timerRemaining;
-              this.timerLength = interval.timerLength;
-            }
-          },
-          (_err) => {
-            // Do nothing
-          },
-          async () => {
-            await this.clearStopwatch();
-          }
-        );
-      }
-    });
-  }
-
   async startTimer(length: number) {
     await this.timerService.start(length);
     this.timerRunning = true;
@@ -99,18 +65,10 @@ export class AppTimer {
     this.timerPause = pause;
   }
 
-  private async clearStopwatch() {
-    if (this.timerSubscription) {
-      this.timerSubscription.unsubscribe();
-    }
-
-    // Reset timerRemaining
-    this.timerRemaining = 0;
-    this.timerLength = 0;
+  @Listen('stopTimer', {target: 'document'})
+  async clearStopwatch() {
     this.timerRunning = false;
 
-    await this.timerService.clearEndAt();
-
     await this.resetDatetime();
   }
 
@@ -245,15 +203,15 @@ export class AppTimer {
           value={startOfDay(new Date()).toDateString()}
           onIonCancel={() => this.toggleFabActivated()}
           onIonChange={(e: CustomEvent<DatetimeChangeEventDetail>) => this.initTimerLengthAndStartTimer(e)}></ion-datetime>
-      </ion-content>
+      </ion-content>,
     ];
   }
 
   private renderContent() {
-    if (this.timerRemaining >= 0) {
+    if (timerStore.state.remainingTime >= 0 && timerStore.state.timer) {
       return (
         <div class="content">
-          <app-stopwatch length={this.timerLength} remaining={this.timerRemaining}></app-stopwatch>
+          <app-stopwatch length={timerStore.state.timer.timerLength} remaining={timerStore.state.remainingTime}></app-stopwatch>
         </div>
       );
     } else {
@@ -274,11 +232,11 @@ export class AppTimer {
   }
 
   private renderActions() {
-    if (this.timerRunning === null || (this.timerRunning && this.timerRemaining === null)) {
+    if (this.timerRunning === null || (this.timerRunning && timerStore.state.remainingTime === null)) {
       return undefined;
     }
 
-    const style = {visibility: `${this.timerRemaining === null || this.timerRemaining === undefined ? 'hidden' : 'inherit'}`};
+    const style = {visibility: `${timerStore.state.remainingTime === null || timerStore.state.remainingTime === undefined ? 'hidden' : 'inherit'}`};
 
     return (
       <ion-fab vertical="bottom" horizontal="end" slot="fixed" onClick={(e: UIEvent) => e.stopPropagation()} style={style}>