Show network status bar on PostCapture tab (#601)

Author: seanwu1105

src/app/app.component.ts

@@ -14,7 +14,6 @@ import { DiaBackendAssetUploadingService } from './shared/services/dia-backend/a
 import { DiaBackendAuthService } from './shared/services/dia-backend/auth/dia-backend-auth.service';
 import { DiaBackendNotificationService } from './shared/services/dia-backend/notification/dia-backend-notification.service';
 import { LanguageService } from './shared/services/language/language.service';
-import { NetworkService } from './shared/services/network/network.service';
 import { NotificationService } from './shared/services/notification/notification.service';
 import { PushNotificationService } from './shared/services/push-notification/push-notification.service';
 
@@ -39,15 +38,13 @@ export class AppComponent {
     notificationService: NotificationService,
     pushNotificationService: PushNotificationService,
     langaugeService: LanguageService,
-    networkService: NetworkService,
     diaBackendAuthService: DiaBackendAuthService,
     diaBackendNotificationService: DiaBackendNotificationService,
     uploadService: DiaBackendAssetUploadingService
   ) {
     notificationService.requestPermission();
     pushNotificationService.register();
     langaugeService.initialize();
-    networkService.initialize();
     diaBackendAuthService.initialize$().pipe(untilDestroyed(this)).subscribe();
     uploadService.initialize$().pipe(untilDestroyed(this)).subscribe();
     diaBackendNotificationService

src/app/features/home/post-capture-tab/post-capture-tab.component.html

@@ -1,4 +1,7 @@
-<div class="segment-content" [ngSwitch]="categories">
+<p *ngIf="(networkConnected$ | async) === false" class="network-status">
+  {{ 'message.networkNotConnected' | transloco }}
+</p>
+<div class="segments" [ngSwitch]="categories">
   <ion-segment mode="ios" [(ngModel)]="categories">
     <ion-segment-button value="Photo" checked>
       <ion-icon src="/assets/icon/apps.svg" class="series-tab-icon"></ion-icon>

src/app/features/home/post-capture-tab/post-capture-tab.component.scss

@@ -1,21 +1,31 @@
 :host {
   display: block;
-  padding: 8px;
   height: 100%;
 }
 
-ion-segment {
-  width: 80%;
-  margin: 0 auto 16px;
-  flex-shrink: 0;
+.network-status {
+  margin: 0;
+  padding: 8px;
+  text-align: center;
+  background-color: var(--ion-color-light);
+  color: darkgray;
+  font-weight: 500;
+  font-size: 0.9em;
 }
 
-.segment-content {
+.segments {
   display: flex;
+  padding: 8px;
   flex-direction: column;
   height: 100%;
 }
 
+ion-segment {
+  width: 80%;
+  margin: 0 auto 16px;
+  flex-shrink: 0;
+}
+
 .post-captures {
   overflow: auto;
 }

src/app/features/home/post-capture-tab/post-capture-tab.component.ts

@@ -17,7 +17,9 @@ import { NetworkService } from '../../../shared/services/network/network.service
 export class PostCaptureTabComponent {
   categories = 'Photo';
 
-  readonly postCaptures$ = this.networkService.connected$.pipe(
+  readonly networkConnected$ = this.networkService.connected$;
+
+  readonly postCaptures$ = this.networkConnected$.pipe(
     switchMap(isConnected =>
       iif(
         () => isConnected,

src/app/shared/services/network/network.service.ts

@@ -1,31 +1,27 @@
 import { Inject, Injectable, NgZone } from '@angular/core';
 import { NetworkPlugin, NetworkStatus } from '@capacitor/core';
-import { BehaviorSubject } from 'rxjs';
-import { distinctUntilChanged } from 'rxjs/operators';
+import { defer, merge, ReplaySubject } from 'rxjs';
+import { distinctUntilChanged, pluck } from 'rxjs/operators';
 import { NETOWRK_PLUGIN } from '../../core/capacitor-plugins/capacitor-plugins.module';
 
 @Injectable({
   providedIn: 'root',
 })
 export class NetworkService {
-  private readonly _connected$ = new BehaviorSubject(true);
-  readonly connected$ = this._connected$.pipe(distinctUntilChanged());
+  private readonly status$ = new ReplaySubject<NetworkStatus>(1);
+
+  readonly connected$ = merge(
+    defer(() => this.networkPlugin.getStatus()),
+    this.status$
+  ).pipe(pluck('connected'), distinctUntilChanged());
 
   constructor(
     @Inject(NETOWRK_PLUGIN)
     private readonly networkPlugin: NetworkPlugin,
-    private readonly ngZone: NgZone
-  ) {}
-
-  async initialize() {
-    const currentStatus = await this.networkPlugin.getStatus();
-    this.updateNetworkStatus(currentStatus);
+    private readonly zone: NgZone
+  ) {
     this.networkPlugin.addListener('networkStatusChange', status => {
-      this.ngZone.run(() => this.updateNetworkStatus(status));
+      this.zone.run(() => this.status$.next(status));
     });
   }
-
-  updateNetworkStatus(status: NetworkStatus) {
-    this._connected$.next(status.connected);
-  }
 }