Migrate client app to signals

TODO

@@ -1 +0,0 @@
-Migrate client app to signals

demo_client/src/app/message/message.component.html

@@ -1,5 +1,5 @@
-@if($loading | async) {
+@if(loading()) {
 <div role="progressbar" bt></div>
 } @else {
-<h1 bt>{{ ($message | async)?.message }}</h1>
+<h1 bt>{{ message()?.message }}</h1>
 }

demo_client/src/app/message/message.component.ts

@@ -1,8 +1,6 @@
 import { AsyncPipe } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, Signal } from '@angular/core';
 import { Message, MessageService } from './message.service';
-import { loading } from '../utils/loading';
-import { Observable } from 'rxjs';
 
 @Component({
   standalone: true,
@@ -12,11 +10,11 @@ import { Observable } from 'rxjs';
   styleUrls: ['./message.component.css'],
 })
 export class MessageComponent {
-  $message: Observable<Message>;
-  $loading: Observable<boolean>;
+  message: Signal<Message | undefined>;
+  loading: Signal<boolean>;
 
   constructor(private readonly messageService: MessageService) {
-    this.$message = this.messageService.getMessage();
-    this.$loading = this.$message.pipe(loading());
+    this.message = this.messageService.getMessage();
+    this.loading = this.messageService.isMessageLoading();
   }
 }

demo_client/src/app/message/message.service.ts

@@ -1,16 +1,28 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, Signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { Observable, shareReplay } from 'rxjs';
+import { toLoadingSignal } from '../utils/loading';
 
 export type Message = {
   message: string;
 };
 
 @Injectable()
 export class MessageService {
-  constructor(private readonly http: HttpClient) {}
+  $messages: Observable<Message>;
 
-  getMessage(): Observable<Message> {
-    return this.http.get<Message>('/api/message').pipe(shareReplay(1));
+  constructor(private readonly http: HttpClient) {
+    this.$messages = this.http
+      .get<Message>('/api/message')
+      .pipe(shareReplay(1));
+  }
+
+  getMessage(): Signal<Message | undefined> {
+    return toSignal(this.$messages);
+  }
+
+  isMessageLoading(): Signal<boolean> {
+    return toLoadingSignal(this.$messages);
   }
 }

demo_client/src/app/utils/loading.ts

@@ -1,9 +1,14 @@
-import { catchError, map, of, pipe, startWith } from 'rxjs';
+import { Signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { catchError, map, Observable, of, startWith } from 'rxjs';
 
-export function loading() {
-  return pipe(
-    map(() => false),
-    startWith(true),
-    catchError(() => of(false))
+export function toLoadingSignal($data: Observable<unknown>): Signal<boolean> {
+  return toSignal(
+    $data.pipe(
+      map(() => false),
+      startWith(true),
+      catchError(() => of(false))
+    ),
+    { initialValue: true }
   );
 }