feat: create article preview (#334)

Author: DDonochVA

libs/blog/articles/data-access/src/lib/infrastructure/articles.service.ts

@@ -17,6 +17,14 @@ export class ArticlesService {
     return this._http.get<Article>(`${this._apiBaseUrl}/articles/${slug}`);
   }
 
+  getArticlePreviewBySlug(slug: string): Observable<Article> {
+    return this._http.get<Article>(`${this._apiBaseUrl}/articles/${slug}`, {
+      headers: {
+        'Cache-Control': 'no-cache',
+      },
+    });
+  }
+
   getArticleList(
     query: ArticlesQuery,
   ): Observable<ArrayResponse<ArticlePreview>> {

libs/blog/articles/data-access/src/lib/state/article-details.store.ts

@@ -1,4 +1,4 @@
-import { computed, inject } from '@angular/core';
+import { computed, inject, InjectionToken } from '@angular/core';
 import { tapResponse } from '@ngrx/operators';
 import {
   patchState,
@@ -30,6 +30,13 @@ const initialState: ArticleDetailsState = {
   slug: null,
 };
 
+export const IsArticlePreview = new InjectionToken<boolean>(
+  'Article Details Store Is Article Preview',
+  {
+    factory: () => false,
+  },
+);
+
 export const ArticleDetailsStore = signalStore(
   { providedIn: 'root' },
   withSeo(),
@@ -38,6 +45,7 @@ export const ArticleDetailsStore = signalStore(
   withLangState(),
   withMethods(({ ...store }) => {
     const articlesService = inject(ArticlesService);
+    const isPreview = inject(IsArticlePreview);
 
     return {
       fetchArticleDetails: rxMethod<string | undefined>(
@@ -51,7 +59,10 @@ export const ArticleDetailsStore = signalStore(
             }),
           ),
           switchMap((slug) =>
-            articlesService.getArticleBySlug(slug).pipe(
+            (isPreview
+              ? articlesService.getArticlePreviewBySlug(slug)
+              : articlesService.getArticleBySlug(slug)
+            ).pipe(
               tapResponse({
                 error: (error) =>
                   patchState(store, {

libs/blog/articles/feature-shell/src/lib/routes.ts

@@ -1,6 +1,10 @@
 import { Routes } from '@angular/router';
 
-import { articleExistsGuard } from '@angular-love/blog/articles/data-access';
+import {
+  ArticleDetailsStore,
+  articleExistsGuard,
+  IsArticlePreview,
+} from '@angular-love/blog/articles/data-access';
 
 export const articleRoutes: Routes = [
   {
@@ -39,6 +43,16 @@ export const articleRoutes: Routes = [
       seo: { title: 'Angular In Depth' },
     },
   },
+  {
+    path: 'preview/:articleSlug',
+    providers: [
+      { provide: IsArticlePreview, useValue: true },
+      ArticleDetailsStore,
+    ],
+    loadComponent: async () =>
+      (await import('@angular-love/blog/articles/feature-article'))
+        .ArticleDetailsContainerComponent,
+  },
   {
     path: ':articleSlug',
     pathMatch: 'full',