Add the loading and error handling on the glossary

src/app/pages/definition/components/details-error/details-error.component.ts → src/app/components/error/error.component.ts

@@ -4,7 +4,7 @@ import { RouterLink } from '@angular/router'
 import { type Error, ErrorType } from 'src/app/models'
 
 @Component({
-  selector: 'app-details-error',
+  selector: 'app-error',
   standalone: true,
   imports: [NgClass, RouterLink],
   template: `
@@ -25,7 +25,7 @@ import { type Error, ErrorType } from 'src/app/models'
   `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DetailsErrorComponent {
+export class ErrorComponent {
   @Input() error!: Error
 
   get errorIconName (): string {

src/app/pages/definition/components/details-error/details-error.stories.ts → src/app/components/error/error.stories.ts

@@ -1,21 +1,21 @@
 import { RouterTestingModule } from '@angular/router/testing'
 import { moduleMetadata, type Meta, type Story } from '@storybook/angular'
 import { ErrorType } from 'src/app/models'
-import { DetailsErrorComponent } from './details-error.component'
+import { ErrorComponent } from './error.component'
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 export default {
   title: 'Pages/Definition/Error',
-  component: DetailsErrorComponent,
+  component: ErrorComponent,
   decorators: [
     moduleMetadata({
       imports: [RouterTestingModule]
     })
   ]
 } as Meta
 
-const Template: Story<DetailsErrorComponent> = (
-  args: DetailsErrorComponent
+const Template: Story<ErrorComponent> = (
+  args: ErrorComponent
 ) => ({
   props: args
 })

src/app/pages/definition/components/details-loading/details-loading.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 
 @Component({
-  selector: 'app-loading-details',
+  selector: 'app-details-loading',
   standalone: true,
   styles: [
     '.section-wrapper { @apply space-y-3 }',

src/app/pages/definition/definition.component.ts

@@ -10,17 +10,17 @@ import {
   type Observable
 } from 'rxjs'
 import { FigureOfSpeechService } from 'src/app/services/figure-of-speech/figure-of-speech.service'
-import { DetailsErrorComponent } from './components/details-error/details-error.component'
+import { ErrorComponent } from '../../components/error/error.component'
 import { DetailsLoadingComponent } from './components/details-loading/details-loading.component'
 import { DetailsComponent } from './components/details/details.component'
 
 @Component({
   selector: 'app-definition',
   standalone: true,
-  imports: [NgIf, NgFor, AsyncPipe, DetailsComponent, DetailsErrorComponent, DetailsLoadingComponent],
+  imports: [NgIf, NgFor, AsyncPipe, DetailsComponent, ErrorComponent, DetailsLoadingComponent],
   template: `
     <div *ngIf="vm$ | async as vm" class="sm:mx-auto sm:w-2/3 md:w-1/3">
-      <app-loading-details *ngIf="vm.isLoading; else display" />
+      <app-details-loading *ngIf="vm.isLoading; else display" />
 
       <ng-template #display>
         <app-details
@@ -29,10 +29,7 @@ import { DetailsComponent } from './components/details/details.component'
         />
 
         <ng-template #error>
-          <app-details-error
-            *ngIf="vm.error"
-            [error]="vm.error"
-          />
+          <app-error *ngIf="vm.error" [error]="vm.error" />
         </ng-template>
       </ng-template>
     </div>

src/app/pages/glossary/components/glossary-entry/glossary-entry.stories.ts

@@ -5,7 +5,7 @@ import { GlossaryEntryComponent } from './glossary-entry-component'
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 export default {
-  title: 'Components/Glossary/Entry',
+  title: 'Pages/Glossary/Entry',
   component: GlossaryEntryComponent,
   decorators: [
     moduleMetadata({

src/app/pages/glossary/components/glossary-list/glossary-list.component.ts

@@ -0,0 +1,29 @@
+import { KeyValuePipe, NgFor } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { type FigureOfSpeechPreview } from 'src/app/models'
+import { GlossarySectionComponent } from '../glossary-section/glossary-section.component'
+
+@Component({
+  selector: 'app-glossary-list',
+  standalone: true,
+  imports: [NgFor, KeyValuePipe, GlossarySectionComponent],
+  template: `
+    <h1
+      class="mb-3 text-2xl font-extrabold tracking-tight text-sky-500 sm:text-center md:text-4xl"
+    >
+      Glossaire
+    </h1>
+
+    <div class="flex flex-col gap-3 sm:mx-auto sm:w-2/3 md:w-1/3 md:gap-6">
+      <app-glossary-section
+        *ngFor="let section of glossary | keyvalue"
+        [key]="section.key"
+        [entries]="section.value"
+      />
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class GlossaryListComponent {
+  @Input() glossary = new Map<string, FigureOfSpeechPreview[]>()
+}

src/app/pages/glossary/components/glossary-list/glossary-list.stories.ts

@@ -0,0 +1,41 @@
+import { RouterTestingModule } from '@angular/router/testing'
+import { moduleMetadata, type Meta, type Story } from '@storybook/angular'
+import { type FigureOfSpeechPreview } from 'src/app/models'
+import { GlossaryEntryComponent } from '../glossary-entry/glossary-entry-component'
+import { GlossarySectionComponent } from '../glossary-section/glossary-section.component'
+import { GlossaryListComponent } from './glossary-list.component'
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+export default {
+  title: 'Pages/Glossary/List',
+  component: GlossaryListComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [RouterTestingModule, GlossarySectionComponent, GlossaryEntryComponent]
+    })
+  ]
+} as Meta
+
+const Template: Story<GlossaryListComponent> = (
+  args: GlossaryListComponent
+) => ({
+  props: args
+})
+
+const previews: FigureOfSpeechPreview[] = [
+  {
+    name: 'Alitération',
+    preview:
+      "L'alitération est la répétition d'une ou de plusieurs consonnes ou plus généralement d'un même son c..."
+  },
+  {
+    name: 'Antanaclase',
+    preview:
+      "On parle d'antanaclase lorsque l'on emploie deux fois un même mot mais avec un sens différent: on pa..."
+  }
+]
+
+export const Default = Template.bind({})
+Default.args = {
+  glossary: new Map<string, FigureOfSpeechPreview[]>([['A', [...previews]]])
+}

src/app/pages/glossary/components/glossary-loading/glossary-loading.component.ts

@@ -0,0 +1,27 @@
+import { NgFor } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+
+@Component({
+  selector: 'app-glossary-loading',
+  standalone: true,
+  imports: [NgFor],
+  template: `
+  <div class="animate-pulse space-y-4 md:mx-auto md:w-1/3">
+    <!-- Simulate the title -->
+    <div class="h-6 w-32 bg-sky-500/75 rounded md:mx-auto md:h-8 md:w-48"></div>
+
+    <!-- Simulate a section -->
+    <div *ngFor="let _ of [0, 1, 2, 3, 4]" class="space-y-3">
+      <div class="h-6 w-5 bg-sky-500/75 rounded"></div>
+
+      <!-- Simulate an entry -->
+      <div *ngFor="let _ of [0, 1]" class="space-y-2">
+        <div class="h-5 w-24 bg-white/75 rounded"></div>
+        <div class="h-4 w-full bg-gray-500/75 rounded"></div>
+      </div>
+    </div>
+  </div>
+`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class GlossaryLoadingComponent {}

src/app/pages/glossary/components/glossary-loading/glossary-loading.stories.ts

@@ -0,0 +1,16 @@
+import { type Meta, type Story } from '@storybook/angular'
+import { GlossaryLoadingComponent } from './glossary-loading.component'
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+export default {
+  title: 'Pages/Glossary/Loading',
+  component: GlossaryLoadingComponent
+} as Meta
+
+const Template: Story<GlossaryLoadingComponent> = (
+  args: GlossaryLoadingComponent
+) => ({
+  props: args
+})
+
+export const Default = Template.bind({})

src/app/pages/glossary/components/glossary-section/glossary-section.stories.ts

@@ -6,7 +6,7 @@ import { GlossarySectionComponent } from './glossary-section.component'
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 export default {
-  title: 'Components/Glossary/Section',
+  title: 'Pages/Glossary/Section',
   component: GlossarySectionComponent,
   decorators: [
     moduleMetadata({

src/app/pages/glossary/glossary.component.ts

@@ -1,29 +1,41 @@
-import { AsyncPipe, KeyValuePipe, NgFor, NgIf } from '@angular/common'
-import { ChangeDetectionStrategy, Component, inject, type OnInit } from '@angular/core'
+import { AsyncPipe, NgIf } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  type OnInit
+} from '@angular/core'
 
 import { combineLatest, map } from 'rxjs'
+import { ErrorComponent } from 'src/app/components/error/error.component'
 import { FigureOfSpeechService } from 'src/app/services/figure-of-speech/figure-of-speech.service'
-import { GlossarySectionComponent } from './components/glossary-section/glossary-section.component'
+import { GlossaryListComponent } from './components/glossary-list/glossary-list.component'
+import { GlossaryLoadingComponent } from './components/glossary-loading/glossary-loading.component'
 
 @Component({
   selector: 'app-glossary',
   standalone: true,
-  imports: [NgIf, NgFor, AsyncPipe, KeyValuePipe, GlossarySectionComponent],
+  imports: [
+    NgIf,
+    AsyncPipe,
+    ErrorComponent,
+    GlossaryListComponent,
+    GlossaryLoadingComponent
+  ],
   template: `
-    <h1
-      class="mb-3 text-2xl font-extrabold tracking-tight text-sky-500 sm:text-center md:text-4xl"
-    >
-      Glossaire
-    </h1>
-
     <ng-container *ngIf="vm$ | async as vm">
-      <div class="sm:mx-auto sm:w-2/3 md:w-1/3 flex flex-col gap-3 md:gap-6">
-        <app-glossary-section
-          *ngFor="let section of vm.glossary | keyvalue"
-          [key]="section.key"
-          [entries]="section.value"
+      <app-glossary-loading *ngIf="vm.isLoading; else display" />
+
+      <ng-template #display>
+        <app-glossary-list
+          *ngIf="!vm.error; else error"
+          [glossary]="vm.glossary"
         />
-      </div>
+
+        <ng-template #error>
+          <app-error *ngIf="vm.error" [error]="vm.error" />
+        </ng-template>
+      </ng-template>
     </ng-container>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -32,9 +44,12 @@ export class GlossaryComponent implements OnInit {
   private readonly _figureOfSpeechService = inject(FigureOfSpeechService)
 
   readonly vm$ = combineLatest([
+    this._figureOfSpeechService.error$,
     this._figureOfSpeechService.isLoading$,
     this._figureOfSpeechService.glossary$
-  ]).pipe(map(([isLoading, glossary]) => ({ isLoading, glossary })))
+  ]).pipe(
+    map(([error, isLoading, glossary]) => ({ error, isLoading, glossary }))
+  )
 
   ngOnInit (): void {
     this._figureOfSpeechService.loadPreviews()