feat(client): wip roadmap bottomsheet in progress

Author: DamianBrzezinskiHoA

libs/blog/roadmap/data-access/.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/roadmap/data-access/README.md

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

libs/blog/roadmap/data-access/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: 'roadmap-data-access',
+  preset: '../../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../../coverage/libs/blog/roadmap/data-access',
+  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/roadmap/data-access/project.json

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

libs/blog/roadmap/data-access/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/infractructure/index';
+export * from './lib/state/index';

libs/blog/roadmap/data-access/src/lib/infractructure/index.ts

@@ -0,0 +1 @@
+export * from './roadmap.service';

libs/blog/roadmap/data-access/src/lib/infractructure/roadmap.service.ts

@@ -0,0 +1,66 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+import {
+  AngularLoveNode,
+  NodeDetails,
+  RegularNode,
+} from '@angular-love/roadmap-utils';
+import { ConfigService } from '@angular-love/shared/config';
+
+const angularLoveNodeMock: AngularLoveNode = {
+  id: 'angular-love',
+  title: 'Angular.Love Roadmap Introduction',
+  nodeType: 'angular-love',
+  description:
+    'The Angular Roadmap on Angular.Love is your go-to guide for learning Angular the right way. It breaks down key concepts, best practices, and useful resources in a clear, structured way. Plus, it’s packed with valuable materials and constantly updated to keep up with the latest trends.',
+  additionalDescription: `Before diving into Angular, it's essential to have a solid understanding of the following concepts: HTML & CSS – Structure and styling of web pages, including Flexbox, Grid, and responsiveness; JavaScript (ES6+) – Core concepts like variables, functions, promises, and async/await; TypeScript – A typed version of JavaScript with interfaces, generics, and decorators; Node.js & npm – Running JavaScript outside the browser and managing packages; Git – Handling code versions, branches, and teamwork; APIs & HTTP – Making requests and working with JSON data`,
+  creators: [
+    { name: 'Miłosz Rutkowski', slug: 'milosz-rutkowski' },
+    { name: 'Łukasz Myszkowski', slug: 'lukasz-myszkowski' },
+    { name: 'Damian Brzeziński', slug: 'damian-brzezinski' },
+    { name: 'Dominik Kalinowski', slug: 'dominik-kalinowski' },
+  ],
+};
+const regularNodeMock: RegularNode = {
+  id: 'change-detection',
+  title: 'change detection',
+  nodeType: 'regular',
+  description:
+    'Change detection in Angular synchronizes the component state with the DOM by tracking and updating data changes. It uses a tree-based approach, where updates propagate from the root component down to child components. The framework provides two strategies: Default, which checks all components, and OnPush, which optimizes performance by only checking components when their inputs change.',
+  movies: [
+    {
+      url: 'https://www.youtube.com/watch?v=KSFPOIauEPU',
+      title: 'Angular RxJS and Signals: Better Together',
+    },
+  ],
+  articles: [
+    {
+      title: 'Signals in Angular: deep dive for busy developers',
+      url: 'https://angular.love/signals-in-angular-deep-dive-for-busy-developers',
+    },
+    {
+      title: 'Angular Signals: A New Feature in Angular 16',
+      url: 'https://angular.love/angular-signals-a-new-feature-in-angular-16',
+    },
+    {
+      title: 'Why Angular signals won’t replace',
+      url: 'https://angular.love/why-angular-signals-wont-replace-rxjs',
+    },
+  ],
+};
+
+@Injectable({ providedIn: 'root' })
+export class RoadmapService {
+  private readonly _http = inject(HttpClient);
+  private readonly _apiBaseUrl = inject(ConfigService).get('apiBaseUrl');
+
+  getNodeDetails(id: string): Observable<NodeDetails> {
+    if (id === 'angular-love') {
+      return of(angularLoveNodeMock);
+    } else {
+      return of(regularNodeMock);
+    }
+  }
+}

libs/blog/roadmap/data-access/src/lib/state/index.ts

@@ -0,0 +1 @@
+export * from './roadmap-store';

libs/blog/roadmap/data-access/src/lib/state/roadmap-store.ts

@@ -0,0 +1,58 @@
+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, tap } from 'rxjs';
+
+import { RoadmapBottomsheetService } from '@angular-love/roadmap-utils';
+
+import { RoadmapService } from '../infractructure/roadmap.service';
+
+type RoadmapState = {
+  loading: 'success' | 'error' | 'init' | 'loading';
+};
+
+const initialState: RoadmapState = {
+  loading: 'init',
+};
+
+export const RoadmapStore = signalStore(
+  withState(initialState),
+  withMethods(
+    (
+      store,
+      roadmapService = inject(RoadmapService),
+      bottomsheetService = inject(RoadmapBottomsheetService),
+    ) => ({
+      resetToInit: () => {
+        patchState(store, { loading: 'init' });
+      },
+      getNodeDetails: rxMethod<string>(
+        pipe(
+          tap(() => {
+            console.log('Store, getNodeDetails');
+            patchState(store, {
+              loading: 'loading',
+            });
+            bottomsheetService.close();
+          }),
+          switchMap((id) =>
+            roadmapService.getNodeDetails(id).pipe(
+              tapResponse({
+                next: (nodeDetails) => {
+                  console.log('Success data:', nodeDetails);
+                  patchState(store, { loading: 'success' });
+                  bottomsheetService.open(nodeDetails);
+                },
+                error: () => {
+                  patchState(store, { loading: 'error' });
+                  bottomsheetService.close();
+                },
+              }),
+            ),
+          ),
+        ),
+      ),
+    }),
+  ),
+);

libs/blog/roadmap/data-access/src/test-setup.ts

@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true,
+});