Add ng-http-caching request debouncing and caching

package.json

@@ -48,7 +48,6 @@
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
-    "@ngneat/cashew": "^3.0.0",
     "@ngx-formly/bootstrap": "^6.2.2",
     "@ngx-formly/core": "^6.2.2",
     "@ngx-loading-bar/core": "^6.0.2",
@@ -71,6 +70,7 @@
     "just-camel-case": "^6.0.1",
     "just-snake-case": "^3.0.1",
     "luxon": "^3.4.4",
+    "ng-http-caching": "^17.0.1",
     "ngx-captcha": "^13.0.0",
     "ngx-clipboard": "^16.0.0",
     "ngx-cookie-service": "^17.0.1",

src/app/app.server.module.ts

@@ -3,14 +3,21 @@ import {
   ServerModule,
   ServerTransferStateModule,
 } from "@angular/platform-server";
-import { HttpCacheInterceptorModule } from "@ngneat/cashew";
 import { BawTimeoutModule } from "@services/timeout/timeout.module";
 import { UniversalDeviceDetectorService } from "@services/universal-device-detector/universal-device-detector.service";
 import { DeviceDetectorService } from "ngx-device-detector";
 import { environment } from "src/environments/environment";
+import { NgHttpCachingConfig, NgHttpCachingModule, NgHttpCachingStrategy } from "ng-http-caching";
+import { disableCache } from "@services/cache/ngHttpCachingConfig";
 import { AppComponent } from "./app.component";
 import { AppModule } from "./app.module";
 
+// we disable caching on the server to prevent potentially serving stale data
+// and data that requires authorization to unauthenticated users
+export const serverCacheConfig = {
+  isCacheable: disableCache,
+  cacheStrategy: NgHttpCachingStrategy.DISALLOW_ALL,
+} as const satisfies NgHttpCachingConfig;
 
 @NgModule({
   imports: [
@@ -19,14 +26,15 @@ import { AppModule } from "./app.module";
     ServerTransferStateModule,
     // Timeout API requests after set period
     BawTimeoutModule.forRoot({ timeout: environment.ssrTimeout }),
-    // Cache API requests
-    HttpCacheInterceptorModule.forRoot({ strategy: "explicit" }),
+    // we explicitly provide NgHttpCachingModule with a disabled cache strategy
+    // to prevent caching on the server
+    NgHttpCachingModule.forRoot(serverCacheConfig),
   ],
   providers: [
     {
       provide: DeviceDetectorService,
-      useClass: UniversalDeviceDetectorService
-    }
+      useClass: UniversalDeviceDetectorService,
+    },
   ],
   bootstrap: [AppComponent],
 })

src/app/components/admin/settings/settings.component.spec.ts

@@ -0,0 +1,29 @@
+import { createComponentFactory, Spectator } from "@ngneat/spectator";
+import { MockBawApiModule } from "@baw-api/baw-apiMock.module";
+import { SharedModule } from "@shared/shared.module";
+import { assertPageInfo } from "@test/helpers/pageRoute";
+import { AdminSettingsComponent } from "./settings.component";
+
+describe("AdminSettingsComponent", () => {
+  let spectator: Spectator<AdminSettingsComponent>;
+
+  const createComponent = createComponentFactory({
+    component: AdminSettingsComponent,
+    imports: [MockBawApiModule, SharedModule],
+  });
+
+  function setup() {
+    spectator = createComponent({ detectChanges: false });
+    spectator.detectChanges();
+  }
+
+  beforeEach(() => {
+    setup();
+  });
+
+  assertPageInfo(AdminSettingsComponent, "Client Settings");
+
+  it("should create", () => {
+    expect(spectator.component).toBeInstanceOf(AdminSettingsComponent);
+  });
+});

src/app/components/admin/settings/settings.component.ts

@@ -27,7 +27,7 @@ import { adminSettingsMenuItem } from "./settings.menus";
         (change)="cacheSettings.setCaching($any($event.target).checked)"
       />
       <label class="form-check-label" for="enable-cache">
-        Enable/Disable caching of API requests
+        Enable caching of API requests
       </label>
     </div>
 
@@ -41,9 +41,14 @@ import { adminSettingsMenuItem } from "./settings.menus";
         (change)="cacheSettings.setLogging($any($event.target).checked)"
       />
       <label class="form-check-label" for="enable-cache-logging">
-        Enable/Disable cache logging in the console
+        Enable cache logging in the console
       </label>
     </div>
+
+    <label class="mt-2">
+      Cache Time to Live (seconds)
+      <input class="form-control" type="number" [(ngModel)]="cacheSettings.cacheLifetimeSeconds" />
+    </label>
   `,
 })
 class AdminSettingsComponent extends PageComponent {

src/app/services/baw-api/api.interceptor.service.spec.ts

@@ -11,6 +11,7 @@ import {
   createHttpFactory,
   HttpMethod,
   SpectatorHttp,
+  SpyObject,
 } from "@ngneat/spectator";
 import { noop } from "rxjs";
 import { generateUser } from "@test/fakes/User";
@@ -21,14 +22,17 @@ import {
 } from "@helpers/custom-errors/baw-api-error";
 import { generateBawApiError } from "@test/fakes/BawApiError";
 import { NOT_FOUND, UNPROCESSABLE_ENTITY } from "http-status";
+import { NgHttpCachingService } from "ng-http-caching";
 import { BawSessionService } from "./baw-session.service";
 import { shouldNotFail, shouldNotSucceed } from "./baw-api.service.spec";
 import { CREDENTIALS_CONTEXT } from "./api.interceptor.service";
 
 describe("BawApiInterceptor", () => {
   let apiRoot: string;
   let http: HttpClient;
+  let cachingSpy: SpyObject<NgHttpCachingService>;
   let spec: SpectatorHttp<BawSessionService>;
+
   const createService = createHttpFactory({
     service: BawSessionService,
     imports: [HttpClientModule, MockBawApiModule],
@@ -55,8 +59,14 @@ describe("BawApiInterceptor", () => {
 
   beforeEach(() => {
     spec = createService();
+
     http = spec.inject(HttpClient);
     apiRoot = spec.inject(API_ROOT);
+    cachingSpy = spec.inject(NgHttpCachingService);
+  });
+
+  afterEach(() => {
+    cachingSpy.clearCache();
   });
 
   describe("error handling", () => {