feat: Added an rxjs cache operator to allow cache control on observables.

This should probably be worked on more, as the api for it is a bit quarky.

Author: OysteinAmundsen

apps/home/src/app/app.component.html

@@ -10,7 +10,9 @@ <h1>Home</h1>
   <button (click)="filter(3)">Widget 3</button>
   <button (click)="filter(undefined)">All</button>
   <div class="spacer"></div>
-  <app-login></app-login>
+  @defer {
+    <app-login></app-login>
+  }
 </nav>
 
 <section [@widgets]="{ value: widgets() }" [@.disabled]="animationDisabled()">

apps/home/src/app/shared/rxjs/cache.spec.ts

@@ -0,0 +1,85 @@
+import { of, throwError } from 'rxjs';
+import { delay } from 'rxjs/operators';
+import { cache, CacheOptions } from './cache';
+
+describe('cache operator', () => {
+  it('should cache the result of the observable', (done) => {
+    const callback = jest.fn(() => of('test').pipe(delay(100)));
+    const options: CacheOptions = {};
+
+    const cached$ = cache(callback, options);
+
+    let callCount = 0;
+    cached$.subscribe((value) => {
+      expect(value).toBe('test');
+      expect(callback).toHaveBeenCalledTimes(1);
+      callCount++;
+      if (callCount === 2) {
+        done();
+      }
+    });
+
+    // Subscribe again to ensure the cached value is used
+    cached$.subscribe((value) => {
+      expect(value).toBe('test');
+      expect(callback).toHaveBeenCalledTimes(1);
+      callCount++;
+      if (callCount === 2) {
+        done();
+      }
+    });
+  });
+
+  it('should handle errors correctly', (done) => {
+    const callback = jest.fn(() => throwError(() => new Error('test error')));
+    const options: CacheOptions = {};
+
+    const cached$ = cache(callback, options);
+
+    cached$.subscribe({
+      next: () => ({}),
+      error: (err) => {
+        expect(err.message).toBe('test error');
+        expect(callback).toHaveBeenCalledTimes(1);
+        done();
+      },
+      complete: () => ({}),
+    });
+  });
+
+  it('should not call the callback again if the cache is still valid', (done) => {
+    const callback = jest.fn(() => of('test').pipe(delay(100)));
+    const options: CacheOptions = {};
+
+    const cached$ = cache(callback, options);
+
+    cached$.subscribe((value) => {
+      expect(value).toBe('test');
+      expect(callback).toHaveBeenCalledTimes(1);
+      cached$.subscribe((value) => {
+        expect(value).toBe('test');
+        expect(callback).toHaveBeenCalledTimes(1);
+        done();
+      });
+    });
+  });
+
+  it('should call the callback again if the cache is invalidated', (done) => {
+    const callback = jest.fn(() => of('test').pipe(delay(100)));
+    const options: CacheOptions = { expirationTime: 50 };
+
+    const cached$ = cache(callback, options);
+
+    cached$.subscribe((value) => {
+      expect(value).toBe('test');
+      expect(callback).toHaveBeenCalledTimes(1);
+      setTimeout(() => {
+        cached$.subscribe((value) => {
+          expect(value).toBe('test');
+          expect(callback).toHaveBeenCalledTimes(2);
+          done();
+        });
+      }, 100);
+    });
+  });
+});

apps/home/src/app/shared/rxjs/cache.ts

@@ -0,0 +1,75 @@
+import { Observable } from 'rxjs';
+import { shareReplay } from 'rxjs/operators';
+
+const CACHE_SIZE = 1;
+
+export type CacheOptions = {
+  expirationTime?: number;
+  cacheKey?: () => string;
+};
+
+const cacheMap = new Map<
+  string,
+  { observable: Observable<any>; timestamp: number }
+>();
+
+/**
+ * Cache the result of an observable for a certain amount of time
+ *
+ * This will guarantee that the inner observable is only subscribed
+ * to once and the result is shared between all subscribers.
+ *
+ * NOTE: This has a serious flaw that should be addressed in the future:
+ * If no `cacheKey` is provided, the cache will be based on the
+ * string representation of the callback function. So if the callback
+ * is `() => this.http.get('api/widgets' + (request ? '/' + request.id : ''))`
+ * then the cache will be based on that string. This means that the same
+ * response will be given regardless of the `request` parameter. So in
+ * effect, the `cacheKey` is required to make the cache work as expected.
+ *
+ * But I have no idea how this should be fixed. One way could be to make
+ * a `cacheHttp` operator which takes in the url directly and caches the
+ * response based on that. But that would limit the use of the cache to
+ * only http requests. So I'm not sure what the best solution is.
+ *
+ * @param callback
+ * @param options
+ * @returns
+ */
+export function cache<T>(
+  callback: () => Observable<T>,
+  options?: CacheOptions,
+): Observable<T> {
+  const key = options?.cacheKey
+    ? options.cacheKey()
+    : JSON.stringify(callback.toString()); // FIXME: This should be fixed
+
+  return new Observable<T>((observer) => {
+    const now = Date.now();
+    let cacheEntry = cacheMap.get(key);
+
+    if (
+      !cacheEntry ||
+      (options?.expirationTime &&
+        now - cacheEntry.timestamp > options.expirationTime)
+    ) {
+      const observable = callback().pipe(shareReplay(CACHE_SIZE));
+      cacheEntry = { observable, timestamp: now };
+      cacheMap.set(key, cacheEntry);
+    }
+
+    const { observable } = cacheEntry;
+
+    observable.subscribe({
+      next(value) {
+        observer.next(value);
+      },
+      error(err) {
+        observer.error(err);
+      },
+      complete() {
+        observer.complete();
+      },
+    });
+  });
+}

apps/home/src/app/shared/widget/widget.component.scss

@@ -12,20 +12,20 @@
     transition-behavior: allow-discrete;
     transition:
       opacity 0.25s ease-in,
-      transform 0.25s ease-in,
+      scale 0.25s ease-in,
       display 0.25s ease-in;
 
     // Enter animation
     @starting-style {
-      transform: translateX(-80px) scale(0.7);
+      scale: 0.7;
       opacity: 0;
     }
 
     // Exit animation
     // This property is not yet supported by web standards
     // This is why we are using angular animations to solve this for now
     // @exit-style {
-    //   transform: translateX(40px) scale(0.7);
+    //   scale: 0.7;
     //   opacity: 0;
     //   display: none;
     // }
@@ -45,5 +45,6 @@
   section {
     padding: 1rem;
     background-color: var(--background-color);
+    view-transition-class: widget-content;
   }
 }

apps/home/src/app/shared/widget/widget.service.ts

@@ -1,6 +1,7 @@
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { computed, inject, Injectable, resource, signal } from '@angular/core';
 import { firstValueFrom } from 'rxjs';
+import { cache } from '../rxjs/cache';
 
 export type Widget = {
   id: number;
@@ -24,10 +25,10 @@ export class WidgetService {
     loader: async ({ request }) => {
       // Cannot use fetch directly because Angular's SSR does not support it.
       // I get a `TypeError: Failed to parse URL` from SSR when using fetch.
+      const cacheKey = () =>
+        `/api/widgets${request.id ? '/' + request.id : ''}`;
       const widgets = await firstValueFrom(
-        this.http.get<Widget[]>(
-          `/api/widgets${request.id ? '/' + request.id : ''}`,
-        ),
+        cache(() => this.http.get<Widget[]>(cacheKey()), { cacheKey }),
       );
 
       // Remove old widgets from the cache

apps/home/src/app/shared/widget/widgets.animation.ts

@@ -1,9 +1,9 @@
 import { animate, group, query, style, transition } from '@angular/animations';
 
 // The state of the widget before it enters the view
-const hidden = { opacity: 0, translate: '0 -80px', scale: 0.7, width: '0' };
+const hidden = { opacity: 0, scale: 0.7, width: '0' };
 // The state of the widget when it rests in the view
-const visible = { opacity: 1, translate: '0 0', scale: 1, width: 'auto' };
+const visible = { opacity: 1, scale: 1, width: 'auto' };
 // // The state of the widget after it leaves the view
 // const toState = { opacity: 0, translate: '40px 80px', scale: 0.7 };
 // The time it should take to animate the widget entering or leaving

apps/home/src/app/views/weather.component.ts

@@ -16,6 +16,7 @@ import {
   GeoLocationService,
 } from '../shared/geoLocation/geoLocation.service';
 import { IconPipe } from '../shared/icons/icon.pipe';
+import { cache } from '../shared/rxjs/cache';
 import { Widget } from '../shared/widget/widget.service';
 
 @Component({
@@ -100,8 +101,9 @@ export class WeatherComponent {
       if (request.location == null) return undefined;
       // Fetch weather data for location
       const { latitude, longitude } = request.location;
+      const cacheKey = () => `/api/weather?lat=${latitude}&lon=${longitude}`;
       return await firstValueFrom(
-        this.http.get<any>(`/api/weather?lat=${latitude}&lon=${longitude}`),
+        cache(() => this.http.get<any>(cacheKey()), { cacheKey }),
       );
     },
   });