Add ng-http-caching request debouncing and caching

.gitignore

@@ -84,4 +84,4 @@ src/assets/old-client/
 .vscode/chrome-userdatadir/
 
 # Mac Junk
-.DS_Store
+.DS_Store

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,53 @@
+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 { CACHE_SETTINGS, CacheSettings } from "@services/cache/cache-settings";
+import { AdminSettingsComponent } from "./settings.component";
+
+describe("AdminSettingsComponent", () => {
+  let spectator: Spectator<AdminSettingsComponent>;
+
+  const createComponent = createComponentFactory({
+    component: AdminSettingsComponent,
+    imports: [MockBawApiModule, SharedModule],
+    providers: [
+      { provide: CACHE_SETTINGS, useValue: new CacheSettings(true, false) },
+    ],
+  });
+
+  const cacheEnabledInput = () =>
+    spectator.query<HTMLInputElement>("#enable-cache");
+  const cacheLoggingInput = () =>
+    spectator.query<HTMLInputElement>("#enable-cache-logging");
+
+  function cacheSettings(): CacheSettings {
+    return spectator.component.cacheSettings;
+  }
+
+  beforeEach(() => {
+    spectator = createComponent();
+  });
+
+  assertPageInfo(AdminSettingsComponent, "Client Settings");
+
+  it("should create", () => {
+    expect(spectator.component).toBeInstanceOf(AdminSettingsComponent);
+  });
+
+  it("should toggle the cache enabled state correctly", () => {
+    spectator.click(cacheEnabledInput());
+    expect(cacheSettings().enabled).toBeFalse();
+
+    spectator.click(cacheEnabledInput());
+    expect(cacheSettings().enabled).toBeTrue();
+  });
+
+  it("should toggle the cache logging correctly", () => {
+    spectator.click(cacheLoggingInput());
+    expect(cacheSettings().showLogging).toBeTrue();
+
+    spectator.click(cacheLoggingInput());
+    expect(cacheSettings().showLogging).toBeFalse();
+  });
+});

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,7 +41,7 @@ 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>
   `,

src/app/helpers/unitConverters/unitConverters.ts

@@ -0,0 +1,10 @@
+type Seconds = number;
+type Milliseconds = number;
+
+export function secondsToMilliseconds(seconds: Seconds): Milliseconds {
+  return seconds * 1_000;
+}
+
+export function millisecondsToSeconds(milliseconds: Milliseconds): Seconds {
+  return milliseconds / 1_000;
+}

src/app/models/AbstractModel.ts

@@ -22,14 +22,15 @@ export type AbstractModelConstructor<Model> = new (
  */
 export abstract class AbstractModelWithoutId<Model = Record<string, any>> {
   public constructor(raw: Model, protected injector?: AssociationInjector) {
-    this.getPersistentAttributes()
+    const transformedRaw = this.getPersistentAttributes()
       .filter((attr) => attr.convertCase)
-      .forEach((attr) => {
+      .reduce((acc, attr) => {
         const value = raw[attr.key];
-        raw[attr.key] = isInstantiated(value) ? camelCase(value) : value;
-      });
+        acc[attr.key] = isInstantiated(value) ? camelCase(value) : value;
+        return acc;
+      }, {});
 
-    return Object.assign(this, raw);
+    Object.assign(this, transformedRaw, raw);
   }
 
   /** Keys for accessing hidden data associated with a model */
@@ -235,7 +236,7 @@ export abstract class AbstractModelWithoutId<Model = Record<string, any>> {
         // when a  null value is present, we send the value in the json request
         // when a File value is present, we send the value in the formData request
         // The null/json scenario is used to support deleting images.
-        .filter((meta) => this[meta.key] instanceof(File) ? opts.formData : true)
+        .filter((meta) => this[meta.key] instanceof File ? opts.formData : true)
         .filter((meta) =>
           meta.supportedFormats.includes(opts.formData ? "formData" : "json")
         )

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", () => {