Use signals in publication page.

frontend/src/app/pages/publication/publication.component.html

@@ -1,14 +1,18 @@
-@if (isLoading) {
+@if (isLoading()) {
     <h2 i18n>Publication content loading...</h2>
     <mat-spinner></mat-spinner>
 } @else {
-    @if (publication) {
+    @if (isPublicationUndefined()) {
+        <div class="loading-failed">
+            <h1 i18n>Publication failed to load...</h1>
+        </div>
+    } @else {
         <div class="card">
-            <img src="/api/pictures/{{ publication.illustrationId }}" />
+            <img src="/api/pictures/{{ publication()?.illustrationId }}" />
             <header>
-                <h1>{{ publication.title }}</h1>
-                <h2>{{ publication.description }}</h2>
-                @if (isAuthorAndUserEquals) {
+                <h1>{{ publication()?.title }}</h1>
+                <h2>{{ publication()?.description }}</h2>
+                @if (isAuthorAndUserEquals()) {
                     <a [routerLink]="['edit']"
                         class="button action"
                         matTooltip="Click to edit the publication"
@@ -17,18 +21,18 @@
                     </a>
                 }
             </header>
-            <main [innerHTML]="publication.parsedText"></main>
+            <main [innerHTML]="publication()?.parsedText"></main>
             <footer>
                 <div class="metadata">
-                    <img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name" />
+                    <img src="/api/pictures/{{ publication()?.author?.image }}" [matTooltip]="publication()?.author?.name" />
                     <div class="posting-data">
-                        <span i18n>Publication posted by {{ publication.author.name }}</span>
+                        <span i18n>Publication posted by {{ publication()?.author?.name }}</span>
                         <span class="publication-date">
-                            ({{ publication.creationDate | date: 'short' }})
+                            ({{ publication()?.creationDate | date: 'short' }})
                         </span>
                     </div>
                 </div>
-                @if (isAuthorAndUserEquals) {
+                @if (isAuthorAndUserEquals()) {
                     <button type="button"
                         (click)="deletePublication()"
                         matTooltip="Click to delete the publication" 
@@ -40,9 +44,5 @@
                 }
             </footer>
         </div>
-    } @else {
-        <div class="loading-failed">
-            <h1 i18n>Publication failed to load...</h1>
-        </div>
     }
 }

frontend/src/app/pages/publication/publication.component.scss

@@ -2,7 +2,8 @@ $cardBorderRadius: .5em;
 
 :host {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
 
     .card {
         display: flex;

frontend/src/app/pages/publication/publication.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { Component, OnDestroy, OnInit, computed, inject, signal } from '@angular/core';
 import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { Subscription } from 'rxjs';
@@ -30,9 +30,10 @@ export class PublicationComponent implements OnInit, OnDestroy {
   private readonly snackBar = inject(MatSnackBar);
   private paramMapSubscription?: Subscription;
   private afterDialogCloseSubscription?: Subscription;
-  isLoading: boolean = false;
-  isAuthorAndUserEquals: boolean = false;
-  publication?: Publication;
+  isLoading = signal(false);
+  isAuthorAndUserEquals = computed(() => this.authenticationService.getAuthenticatedUser()?.id === this.publication()?.author.id);
+  publication = signal<Publication | undefined>(undefined);
+  isPublicationUndefined = computed(() => !this.publication())
 
   ngOnInit(): void {
     this.paramMapSubscription = this.activatedRoute
@@ -41,12 +42,11 @@ export class PublicationComponent implements OnInit, OnDestroy {
           const publicationId = params.get('publicationId');
 
           if (publicationId) {
-            this.isLoading = true;
+            this.isLoading.set(true);
 
             this.publicationRestService.getById(publicationId)
                 .then(publication => {
-                  this.publication = publication;
-                  this.isAuthorAndUserEquals = this.authenticationService.getAuthenticatedUser()?.id === this.publication.author.id;
+                  this.publication.set(publication);
                   setTimeout(() => Prism.highlightAll(), 100);
                 })
                 .catch(error => {
@@ -55,7 +55,7 @@ export class PublicationComponent implements OnInit, OnDestroy {
                   console.error(errorMessage, error);
                 })
                 .finally(() => {
-                  this.isLoading = false;
+                  this.isLoading.set(false);
                 });
           }
         });
@@ -79,8 +79,8 @@ export class PublicationComponent implements OnInit, OnDestroy {
 
     this.afterDialogCloseSubscription = dialogRef.afterClosed()
       .subscribe(response => {
-        if (response && this.publication?.id) {
-          this.publicationRestService.delete(this.publication.id);
+        if (response && !this.isPublicationUndefined()) {
+          this.publicationRestService.delete(this.publication()?.id!!);
           this.snackBar.open($localize`Publication deleted`, $localize`Close`, { duration: 5000 });
           this.location.back();
         }