feat(client): add & use banner slider loaded from the backend (#323)

Author: dokolyski

apps/blog/src/assets/autumn-camp-images/1.png

@@ -0,0 +1 @@
+export * from './lib/state/ad-banner.store';

apps/blog/src/assets/autumn-camp-images/2.png

@@ -0,0 +1,15 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+
+import { Slider } from '@angular-love/blog/contracts/banners';
+import { ConfigService } from '@angular-love/shared/config';
+
+@Injectable({ providedIn: 'root' })
+export class AdBannerService {
+  private readonly _apiBaseUrl = inject(ConfigService).get('apiBaseUrl');
+  private readonly _http = inject(HttpClient);
+
+  getBannerSlider() {
+    return this._http.get<Slider>(`${this._apiBaseUrl}/banners`);
+  }
+}

apps/blog/src/assets/autumn-camp-images/3.png

@@ -0,0 +1,40 @@
+import { inject } from '@angular/core';
+import { tapResponse } from '@ngrx/operators';
+import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
+import { rxMethod } from '@ngrx/signals/rxjs-interop';
+import { pipe, switchMap } from 'rxjs';
+
+import { Slider } from '@angular-love/blog/contracts/banners';
+
+import { AdBannerService } from '../infrastructure/ad-banner.service';
+
+type AdBannerState = {
+  slider: Slider | null;
+};
+
+const initialState: AdBannerState = {
+  slider: null,
+};
+
+export const AdBannerStore = signalStore(
+  { providedIn: 'root' },
+  withState(initialState),
+  withMethods((store, adBannerService = inject(AdBannerService)) => ({
+    getData: rxMethod<void>(
+      pipe(
+        switchMap(() =>
+          adBannerService.getBannerSlider().pipe(
+            tapResponse({
+              next: (slider) => {
+                patchState(store, { slider });
+              },
+              error: () => {
+                patchState(store);
+              },
+            }),
+          ),
+        ),
+      ),
+    ),
+  })),
+);

libs/blog/ad-banner/data-access/src/index.ts

@@ -1,5 +1,4 @@
-export * from './lib/ad-banner/ad-banner.component';
 export * from './lib/ad-image-banner/ad-image-banner.component';
 export * from './lib/ad-image-banner/ad-image-banner-data.interface';
 export * from './lib/instances/al-indepth-banner.component';
-export * from './lib/instances/autumn-camp/al-autumn-camp-banner.component';
+export * from './lib/banner-carousel/al-banner-carousel.component';