feat(bff): add & use banner slider loaded from the backend (#322)

Author: dokolyski

apps/blog-bff/src/main.ts

@@ -4,6 +4,7 @@ import { HTTPException } from 'hono/http-exception';
 
 import { articles } from '@angular-love/blog-bff/articles/api';
 import { authors } from '@angular-love/blog-bff/authors/api';
+import { banners } from '@angular-love/blog-bff/banners/api';
 import { newsletter } from '@angular-love/blog-bff/newsletter/api';
 
 const app = new Hono();
@@ -13,6 +14,7 @@ app.use('*', cors());
 app.route('/articles', articles);
 app.route('/authors', authors);
 app.route('/newsletter', newsletter);
+app.route('/banners', banners);
 
 app.onError((err, c) => {
   console.error(err);

libs/blog-bff/banners/api/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "al",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "al",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/blog-bff/banners/api/README.md

@@ -0,0 +1,7 @@
+# api-banners
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test api-banners` to execute the unit tests.

libs/blog-bff/banners/api/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'api-banners',
+  preset: '../../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../../coverage/libs/blog-bff/banners/api',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/blog-bff/banners/api/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "api-banners",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/blog-bff/banners/api/src",
+  "prefix": "al",
+  "projectType": "library",
+  "tags": ["scope:bff", "type:api"],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/blog-bff/banners/api/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

libs/blog-bff/banners/api/src/index.ts

@@ -0,0 +1 @@
+export { default as banners } from './lib/api';

libs/blog-bff/banners/api/src/lib/api.ts

@@ -0,0 +1,23 @@
+import { Hono } from 'hono';
+
+import {
+  appCache,
+  langMw,
+} from '@angular-love/blog-bff/shared/util-middleware';
+import { wpClientMw } from '@angular-love/util-wp';
+
+import { toBanner } from './mappers';
+import { WpBanners } from './wp-banners';
+
+const app = new Hono().use(appCache).use(wpClientMw).use(langMw());
+
+app.get('/', async (c) => {
+  const client = new WpBanners(c.var.createWPClient());
+
+  const banner = (await client.getBanners()).data[0];
+  const media = await client.getMediaByBannerId(banner.id);
+
+  return c.json(toBanner(banner, media.data));
+});
+
+export default app;

libs/blog-bff/banners/api/src/lib/dtos.ts

@@ -0,0 +1,18 @@
+export interface WPBannerDto {
+  id: number;
+  acf: {
+    display_time: string;
+    slides: {
+      slide_image: number /* slideId */;
+      slide_url: string /* url to navigate to after click */;
+    }[];
+  };
+}
+
+export interface WPBannerMediaDto {
+  id: number;
+  alt_text: string;
+  guid: {
+    rendered: string; // URL
+  };
+}

libs/blog-bff/banners/api/src/lib/mappers.ts

@@ -0,0 +1,20 @@
+import { Slider } from '@angular-love/blog/contracts/banners';
+
+import { WPBannerDto, WPBannerMediaDto } from './dtos';
+
+export const toBanner = (
+  dto: WPBannerDto,
+  mediaDto: WPBannerMediaDto[],
+): Slider => {
+  return {
+    slideDisplayTimeMs: +dto.acf.display_time,
+    slides: dto.acf.slides.map((slide) => {
+      const media = mediaDto.find((media) => media.id === slide.slide_image)!;
+      return {
+        url: media.guid.rendered,
+        alt: media.alt_text,
+        navigateTo: slide.slide_url,
+      };
+    }),
+  };
+};

libs/blog-bff/banners/api/src/lib/wp-banners.ts

@@ -0,0 +1,25 @@
+import { WPResponse, WPRestClient } from '@angular-love/util-wp';
+
+import { WPBannerDto, WPBannerMediaDto } from './dtos';
+
+export class WpBanners {
+  constructor(private readonly _wpClient: WPRestClient) {}
+
+  async getBanners(
+    query?: Record<string, string | number>,
+  ): Promise<WPResponse<WPBannerDto[]>> {
+    return this._wpClient.get<WPBannerDto[]>('banner', {
+      ...query,
+      _fields: 'id,acf',
+    });
+  }
+
+  async getMediaByBannerId(
+    bannerId: number,
+  ): Promise<WPResponse<WPBannerMediaDto[]>> {
+    return this._wpClient.get<WPBannerMediaDto[]>('media', {
+      parent: `${bannerId}`,
+      _fields: 'id,guid,alt_text',
+    });
+  }
+}