feat(bff): api adjustments

Author: jakNatonek

apps/blog-bff/src/main.ts

@@ -14,6 +14,7 @@ import {
 import { toArticle, toArticlePreviewList } from './mappers';
 import { articles } from '@angular-love/api';
 import { HTTPException } from 'hono/http-exception';
+import { authors } from '@angular-love/blog/bff/authors';
 
 type Bindings = {
   GRAPHQL_URI: string;
@@ -86,6 +87,7 @@ app.get('/articles/:slug', async (c) => {
 });
 
 app.route('/v2/articles', articles);
+app.route('/v2/authors', authors);
 
 app.onError((err, c) => {
   if (err instanceof HTTPException) {

apps/blog-bff/src/mappers.ts

@@ -5,10 +5,7 @@ import {
   GetPostBySlugQuery,
   GetPostsQuery,
 } from '@angular-love/wp/graphql/data-access';
-import {
-  Article,
-  ArticlePreview,
-} from '@angular-love/blog/articles/data-access';
+import { Article, ArticlePreview } from '@angular-love/contracts/articles';
 
 const DEFAULT_LANGUAGE_SUBSET = ['typescript', 'html', 'css', 'scss', 'json'];
 
@@ -25,6 +22,7 @@ export const toArticlePreviewList = (query: {
       featuredImageUrl: node.featuredImage?.node.sourceUrl || '',
       publishDate: new Date(node.date || '').toISOString(),
       author: {
+        slug: '',
         name: node.author?.node?.name || '',
         avatarUrl: node.author?.node?.avatar?.url || '',
       },
@@ -72,6 +70,7 @@ export const toArticle = (query: { data: GetPostBySlugQuery }): Article => {
     title: query.data.postBy?.title || '',
     publishDate: query.data.postBy?.date || '',
     author: {
+      slug: '',
       name: query.data.postBy?.author?.node.name || '',
       description: query.data.postBy?.author?.node.description || '',
       avatarUrl: query.data.postBy?.author?.node?.avatar?.url || '',

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

@@ -1,19 +1,54 @@
 import { Hono } from 'hono';
 import { wpClientMw } from '@angular-love/util-wp';
-import { toArticlePreviewList, toArticle } from './mappers';
+import { toArticle, toArticlePreviewList } from './mappers';
 import { WPPostDetailsDto, WPPostDto } from './dtos';
+import {
+  ArrayResponse,
+  ArticlePreview,
+} from '@angular-love/contracts/articles';
 
 const app = new Hono();
 
+const defaultQuery = {
+  skip: '0',
+  take: '10',
+  lang: 'en',
+};
+
 app.get('/', wpClientMw, async (c) => {
+  const queryParams = c.req.query();
+
+  const take = queryParams.take || defaultQuery.take;
+  const skip = queryParams.skip || defaultQuery.skip;
+  const page = Math.floor(Number(skip) / Number(take)) + 1;
+
+  const query: Record<string, string | number> = {
+    lang: queryParams.lang || defaultQuery.lang,
+    per_page: take,
+    page: page,
+  };
+
+  if (queryParams.authorSlug) {
+    const authorResult = await c.var.wpClient.get<{ id }[]>('users', {
+      slug: queryParams.authorSlug,
+      _fields: 'id',
+    });
+    const id = authorResult.data[0]?.id;
+    if (id) {
+      query.author = id;
+    }
+  }
+
   const result = await c.var.wpClient.get<WPPostDto[]>('posts', {
-    lang: 'en',
-    per_page: '10',
+    ...query,
     _fields:
       'slug,title.rendered,author,excerpt.rendered,date,featured_image_url,author_details.name,author_details.avatar_url,author_details.slug,acf',
   });
 
-  return c.json(toArticlePreviewList(result));
+  return c.json(<ArrayResponse<ArticlePreview>>{
+    data: toArticlePreviewList(result.data),
+    total: Number(result.headers.get('x-wp-total')),
+  });
 });
 
 app.get('/:slug', wpClientMw, async (c) => {
@@ -25,7 +60,7 @@ app.get('/:slug', wpClientMw, async (c) => {
       'slug,title.rendered,author,content.rendered,date,featured_image_url,author_details,acf',
   });
 
-  return c.json(toArticle(result[0]));
+  return c.json(toArticle(result.data[0]));
 });
 
 export default app;

libs/blog-bff/articles/src/lib/mappers.ts

@@ -17,6 +17,7 @@ export const toArticlePreviewList = (data: WPPostDto[]): ArticlePreview[] => {
       featuredImageUrl: node.featured_image_url || '',
       publishDate: new Date(node.date || '').toISOString(),
       author: {
+        slug: node.author_details.slug || '',
         name: node.author_details.name || '',
         avatarUrl: node.author_details.avatar_url || '',
       },
@@ -63,6 +64,7 @@ export const toArticle = (dto?: WPPostDetailsDto): Article => {
     title: dto?.title.rendered || '',
     publishDate: dto?.date || '',
     author: {
+      slug: dto?.author_details.slug || '',
       name: dto?.author_details.name || '',
       description: dto?.author_details.description || '',
       avatarUrl: dto?.author_details?.avatar_url || '',

libs/blog-bff/authors/.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/authors/README.md

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

libs/blog-bff/authors/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'blog-bff-authors',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/libs/blog-bff/authors',
+  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/authors/project.json

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

libs/blog-bff/authors/src/index.ts

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

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

@@ -0,0 +1,19 @@
+import { Hono } from 'hono';
+import { wpClientMw } from '@angular-love/util-wp';
+import { toAuthor } from './mappers';
+import { WPAuthorDto } from './dtos';
+
+const app = new Hono();
+
+app.get('/:slug', wpClientMw, async (c) => {
+  const slug = c.req.param('slug');
+
+  const result = await c.var.wpClient.get<WPAuthorDto[]>('users', {
+    slug: slug,
+    _fields: 'slug,name,description,avatar_urls',
+  });
+
+  return c.json(toAuthor(result.data[0]));
+});
+
+export default app;

libs/blog-bff/authors/src/lib/dtos.ts

@@ -0,0 +1,6 @@
+export interface WPAuthorDto {
+  name: string;
+  slug: string;
+  avatar_urls: Record<string, string>;
+  description: string;
+}

libs/blog-bff/authors/src/lib/mappers.ts

@@ -0,0 +1,15 @@
+import { WPAuthorDto } from './dtos';
+import { Author } from '@angular-love/blog/contracts/authors';
+
+export const toAuthor = (dto: WPAuthorDto): Author => {
+  return {
+    slug: dto.slug,
+    name: dto.name,
+    description: dto.description,
+    avatarUrl:
+      Object.entries(dto.avatar_urls).find(([, url]) =>
+        url.includes('96'),
+      )?.[1] || Object.values(dto.avatar_urls)[0],
+    position: 'to do add position',
+  };
+};

libs/blog-bff/authors/src/test-setup.ts

@@ -0,0 +1,8 @@
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
+import 'jest-preset-angular/setup-jest';

libs/blog-bff/authors/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/blog-bff/authors/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}

libs/blog-bff/authors/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

libs/blog-bff/shared/util-wp/src/lib/wp-client.ts

@@ -3,21 +3,26 @@ import type { StatusCode } from 'hono/utils/http-status';
 
 type FetchConfig = Partial<Pick<RequestInit, 'method' | 'headers' | 'body'>>;
 
+export type WPRespone<T> = {
+  data: T;
+  headers: Headers;
+};
+
 export class WPRestClient {
   constructor(
     protected readonly baseUrl: string,
     protected readonly fetchConfig: FetchConfig,
   ) {}
 
-  get<T>(url: string, params: Record<string, string>): Promise<T> {
+  get<T>(url: string, params: Record<string, string>): Promise<WPRespone<T>> {
     const searchParams = new URLSearchParams(params);
     return this.request(`${url}?${searchParams.toString()}`, { method: 'GET' });
   }
 
   private async request<T>(
     url: string,
     { body, headers, method }: FetchConfig = {},
-  ): Promise<T> {
+  ): Promise<WPRespone<T>> {
     const request = await fetch(`${this.baseUrl}/wp-json/wp/v2/${url}`, {
       ...this.fetchConfig,
       method: method ?? 'GET',
@@ -35,6 +40,9 @@ export class WPRestClient {
       );
     }
 
-    return request.json<T>();
+    return {
+      data: await request.json(),
+      headers: request.headers,
+    };
   }
 }

libs/blog-contracts/articles/src/lib/articles.ts

@@ -5,6 +5,7 @@ export interface ArticlePreview {
   featuredImageUrl: string;
   publishDate: string;
   author: {
+    slug: string;
     name: string;
     avatarUrl: string;
   };
@@ -15,8 +16,15 @@ export interface Article {
   content: string;
   publishDate: string;
   author: {
+    slug: string;
     name: string;
     avatarUrl: string;
     description: string;
   };
 }
+
+//TODO: move shared contract lib
+export interface ArrayResponse<T> {
+  data: T[];
+  total: number;
+}