fix(blog): hide in-depth category in polish version (#399)

Author: DDonochVA

libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/categories.const.ts

@@ -1,28 +1,52 @@
+import { computed, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { TranslocoService } from '@jsverse/transloco';
+import { distinctUntilChanged } from 'rxjs';
+
 export const CATEGORIES_LIST = [
   {
     name: 'All',
     link: 'latest',
     slug: null,
     translationPath: 'categories.all',
+    langs: ['pl', 'en'],
   },
   {
     name: 'Guides',
     link: 'guides',
     slug: 'guides',
     translationPath: 'categories.guides',
+    langs: ['pl', 'en'],
   },
   {
     name: 'News',
     link: 'news',
     slug: 'news',
     translationPath: 'categories.news',
+    langs: ['pl', 'en'],
   },
   {
     name: 'In-Depth',
     link: 'angular-in-depth',
     slug: 'angular-in-depth',
     translationPath: 'categories.inDepth',
+    langs: ['en'],
   },
 ] as const;
 
 export type CategoryListItem = (typeof CATEGORIES_LIST)[number];
+
+export function injectCategories() {
+  const transloco = inject(TranslocoService);
+  const activeLang = toSignal(
+    transloco.langChanges$.pipe(distinctUntilChanged()),
+    { initialValue: transloco.getActiveLang() },
+  );
+
+  return computed(() => {
+    const lang = activeLang();
+    return CATEGORIES_LIST.filter((category) =>
+      (category.langs as readonly string[]).includes(lang),
+    );
+  });
+}

libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.html

@@ -1,6 +1,6 @@
 <ng-container *transloco="let t; read: 'homePage'">
   <section class="flex justify-center gap-3">
-    @for (category of categories; track $index) {
+    @for (category of categories(); track $index) {
       <button
         alPill
         [variant]="category.name === selected().name ? 'flat' : 'outline'"

libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts

@@ -4,7 +4,7 @@ import {
   Component,
   computed,
   inject,
-  signal,
+  linkedSignal,
 } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { TranslocoDirective } from '@jsverse/transloco';
@@ -24,7 +24,7 @@ import { PillDirective } from '@angular-love/blog/shared/ui-pill';
 import { ArticleCategory } from '@angular-love/contracts/articles';
 import { RepeatDirective } from '@angular-love/utils';
 
-import { CATEGORIES_LIST, CategoryListItem } from './categories.const';
+import { CategoryListItem, injectCategories } from './categories.const';
 
 @Component({
   selector: 'al-latest-articles',
@@ -50,11 +50,14 @@ import { CATEGORIES_LIST, CategoryListItem } from './categories.const';
   providers: [ArticleListStore],
 })
 export class FeatureLatestArticlesComponent {
-  readonly selected = signal<CategoryListItem>(CATEGORIES_LIST[0]);
   readonly selectedCategorySlug = computed<ArticleCategory | null>(
     () => this.selected().slug,
   );
-  readonly categories = CATEGORIES_LIST;
+  readonly categories = injectCategories();
+  readonly selected = linkedSignal<CategoryListItem>(
+    () => this.categories()[0],
+  );
+
   readonly take = 8;
 
   private readonly _articleListStore = inject(ArticleListStore);