refactor(app): apply 'httpResource' to the home page component

Author: Ismaestro

src/app/features/home/home.component.html

@@ -118,6 +118,6 @@ <h3>Animations</h3>
     />
   </div>
   <div class="real-time__container">
-    <p i18n>Users seeing this page: {{activeUsers()}}</p>
+    <p i18n>Users seeing this page: {{ activeUsersResource.value().activeUsers }}</p>
   </div>
 </main>

src/app/features/home/home.component.ts

@@ -1,34 +1,31 @@
-import type { OnInit } from '@angular/core';
-import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject } from '@angular/core';
 import { NgOptimizedImage } from '@angular/common';
 import { DecorativeHeaderComponent } from '~core/components/decorative-header/decorative-header.component';
 import { CardComponent } from '~core/components/card/card.component';
 import { GoogleAnalyticsService } from '~features/home/services/google-analitycs.service';
+import { interval } from 'rxjs';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
   imports: [DecorativeHeaderComponent, NgOptimizedImage, CardComponent],
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent {
   private readonly googleAnalyticsService = inject(GoogleAnalyticsService);
+  readonly activeUsersResource = this.googleAnalyticsService.getRealtimeUsersResource();
 
-  readonly activeUsers = signal(1);
-
-  ngOnInit(): void {
-    this.fetchRealtimeUsers();
-    setInterval(() => {
-      this.fetchRealtimeUsers();
-    }, 5000);
-  }
-
-  fetchRealtimeUsers(): void {
-    this.googleAnalyticsService.getRealtimeUsers().subscribe({
-      next: (data) => {
-        this.activeUsers.set(Math.max(data.activeUsers || 0, 1));
-      },
+  constructor() {
+    this.activeUsersResource.reload();
+    effect(() => {
+      const sub = interval(5000).subscribe(() => {
+        this.activeUsersResource.reload();
+      });
+      return () => {
+        sub.unsubscribe();
+      };
     });
   }
 }

src/app/features/home/services/google-analitycs.service.ts

@@ -1,6 +1,6 @@
 import { inject, Injectable } from '@angular/core';
 import type { Observable } from 'rxjs';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, httpResource, type HttpResourceRef } from '@angular/common/http';
 import { environment } from '~environments/environment';
 
 @Injectable({
@@ -14,4 +14,9 @@ export class GoogleAnalyticsService {
     const getRealtimeUsersEndpoint = `${this.apiUrl}/v1/analytics/realtime-users`;
     return this.httpClient.get<{ activeUsers: number }>(getRealtimeUsersEndpoint);
   }
+  getRealtimeUsersResource(): HttpResourceRef<{ activeUsers: number }> {
+    return httpResource<{ activeUsers: number }>(`${this.apiUrl}/v1/analytics/realtime-users`, {
+      defaultValue: { activeUsers: 1 },
+    });
+  }
 }