Reformat code

src/app/app.component.html

@@ -4,11 +4,13 @@
     <button class="navbar-toggler" type="button" (click)="isMenuCollapsed = !isMenuCollapsed">&#9776;</button>
     <div [ngbCollapse]="isMenuCollapsed" class="collapse navbar-collapse">
       <ul class="navbar-nav">
-        @for (route of routes; track $index;) {
-          @if (route.component !== undefined) {<li class="nav-item">
-            <a class="nav-link text-capitalize" [routerLink]="route.path" routerLinkActive="active"
-               (click)="isMenuCollapsed = true">{{route.path}}</a>
-          </li>}
+        @for (route of routes; track $index; ) {
+          @if (route.component !== undefined) {
+            <li class="nav-item">
+              <a class="nav-link text-capitalize" [routerLink]="route.path" routerLinkActive="active"
+                 (click)="isMenuCollapsed = true">{{ route.path }}</a>
+            </li>
+          }
         }
       </ul>
     </div>

src/app/app.component.spec.ts

@@ -1,5 +1,5 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
+import {TestBed} from '@angular/core/testing';
+import {AppComponent} from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(async () => {

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import {ToastContainerComponent} from '../components/toast-container/toast-container/toast-container.component';
 import {NgbCollapse} from '@ng-bootstrap/ng-bootstrap';

src/app/app.routes.ts

@@ -1,4 +1,4 @@
-import { Routes } from '@angular/router';
+import {Routes} from '@angular/router';
 import {ShowsComponent} from '../pages/shows/shows.component';
 
 export const routes: Routes = [

src/components/create-modal/create-modal/create-modal.component.spec.ts

@@ -1,6 +1,6 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { CreateModalComponent } from './create-modal.component';
+import {CreateModalComponent} from './create-modal.component';
 
 describe('CreateModalComponent', () => {
   let component: CreateModalComponent;
@@ -10,7 +10,7 @@ describe('CreateModalComponent', () => {
     await TestBed.configureTestingModule({
       imports: [CreateModalComponent]
     })
-    .compileComponents();
+      .compileComponents();
 
     fixture = TestBed.createComponent(CreateModalComponent);
     component = fixture.componentInstance;

src/components/delete-modal/delete-modal.component.html

@@ -1,25 +1,25 @@
 <div class="modal-header">
-  <h4 class="modal-title text-truncate">Delete {{ showName }}?</h4>
-  <button type="button" class="btn-close" aria-label="Close" (click)="this.activeModal.dismiss()"></button>
+    <h4 class="modal-title text-truncate">Delete {{ showName }}?</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="this.activeModal.dismiss()"></button>
 </div>
 <div class="modal-body">
-  <p>Are you sure you want to delete this show?</p>
-  <b class="text-danger-emphasis">This cannot be reversed</b>
-  <div class="card" #collapse="ngbCollapse" [(ngbCollapse)]="formHidden">
-    <div class="card-body">
-      <form [formGroup]="confirmationForm" (ngSubmit)="formSubmitted()">
-        <label class="form-label">To avoid mistakes, please type the name of the show to continue:</label>
-        <input formControlName="name" type="text" class="form-control">
-      </form>
+    <p>Are you sure you want to delete this show?</p>
+    <b class="text-danger-emphasis">This cannot be reversed</b>
+    <div class="card" #collapse="ngbCollapse" [(ngbCollapse)]="formHidden">
+        <div class="card-body">
+            <form [formGroup]="confirmationForm" (ngSubmit)="formSubmitted()">
+                <label class="form-label">To avoid mistakes, please type the name of the show to continue:</label>
+                <input formControlName="name" type="text" class="form-control">
+            </form>
+        </div>
     </div>
-  </div>
 </div>
 <div class="modal-footer">
-  <button
-    type="submit"
-    class="btn btn-danger"
-    (click)="deletePressed()"
-    [disabled]="confirmationForm.invalid && buttonDisabled"
-  >Delete
-  </button>
+    <button
+            type="submit"
+            class="btn btn-danger"
+            (click)="deletePressed()"
+            [disabled]="confirmationForm.invalid && buttonDisabled"
+    >Delete
+    </button>
 </div>

src/components/delete-modal/delete-modal.component.spec.ts

@@ -1,23 +1,23 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { DeleteModalComponent } from './delete-modal.component';
+import {DeleteModalComponent} from './delete-modal.component';
 
 describe('DeleteModalComponent', () => {
-  let component: DeleteModalComponent;
-  let fixture: ComponentFixture<DeleteModalComponent>;
+    let component: DeleteModalComponent;
+    let fixture: ComponentFixture<DeleteModalComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DeleteModalComponent]
-    })
-    .compileComponents();
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [DeleteModalComponent]
+        })
+            .compileComponents();
 
-    fixture = TestBed.createComponent(DeleteModalComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+        fixture = TestBed.createComponent(DeleteModalComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
 });

src/components/delete-modal/delete-modal.component.ts

@@ -1,52 +1,46 @@
 import {Component, inject} from '@angular/core';
 import {NgbActiveModal, NgbCollapse} from '@ng-bootstrap/ng-bootstrap';
-import {
-  FormControl,
-  FormGroup,
-  FormsModule,
-  ReactiveFormsModule,
-  Validators
-} from '@angular/forms';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
 
 @Component({
-  selector: 'app-delete-modal',
-  imports: [
-    NgbCollapse,
-    FormsModule,
-    ReactiveFormsModule
-  ],
-  templateUrl: './delete-modal.component.html',
-  styleUrl: './delete-modal.component.css'
+    selector: 'app-delete-modal',
+    imports: [
+        NgbCollapse,
+        FormsModule,
+        ReactiveFormsModule
+    ],
+    templateUrl: './delete-modal.component.html',
+    styleUrl: './delete-modal.component.css'
 })
 export class DeleteModalComponent {
-  protected activeModal: NgbActiveModal = inject(NgbActiveModal)
-  showName: string = ""
-  formHidden: boolean = true;
-  buttonDisabled: boolean = false;
-  confirmationForm: FormGroup
+    protected activeModal: NgbActiveModal = inject(NgbActiveModal)
+    showName: string = ""
+    formHidden: boolean = true;
+    buttonDisabled: boolean = false;
+    confirmationForm: FormGroup
 
-  constructor() {
-    this.confirmationForm = new FormGroup({
-      name: new FormControl("",Validators.required)
-    })
-  }
-
-
-  deletePressed() {
-    if (this.formHidden) {
-      const regex = new RegExp(this.showName)
-      const control = new FormControl("", [Validators.required, Validators.pattern(regex)])
-      this.confirmationForm.setControl("name", control)
-      this.formHidden = false;
-      this.buttonDisabled = true;
-    } else {
-      this.formSubmitted()
+    constructor() {
+        this.confirmationForm = new FormGroup({
+            name: new FormControl("", Validators.required)
+        })
     }
-  }
 
-  formSubmitted() {
-    if (this.confirmationForm.valid) {
-      this.activeModal.close(true)
+
+    deletePressed() {
+        if (this.formHidden) {
+            const regex = new RegExp(this.showName)
+            const control = new FormControl("", [Validators.required, Validators.pattern(regex)])
+            this.confirmationForm.setControl("name", control)
+            this.formHidden = false;
+            this.buttonDisabled = true;
+        } else {
+            this.formSubmitted()
+        }
+    }
+
+    formSubmitted() {
+        if (this.confirmationForm.valid) {
+            this.activeModal.close(true)
+        }
     }
-  }
 }

src/components/toast-container/toast-container/toast-container.component.html

@@ -3,5 +3,6 @@
     [header]="toast.header || ''" [autohide]="true" [delay]="toast.delay || 5000"
     (hidden)="toastService.remove(toast)"
     [animation]="true" [class]="toast.htmlClass"
-  >{{ toast.body }}</ngb-toast>
+  >{{ toast.body }}
+  </ngb-toast>
 }

src/components/toast-container/toast-container/toast-container.component.spec.ts

@@ -1,6 +1,6 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ToastContainerComponent } from './toast-container.component';
+import {ToastContainerComponent} from './toast-container.component';
 
 describe('ToastContainerComponent', () => {
   let component: ToastContainerComponent;
@@ -10,7 +10,7 @@ describe('ToastContainerComponent', () => {
     await TestBed.configureTestingModule({
       imports: [ToastContainerComponent]
     })
-    .compileComponents();
+      .compileComponents();
 
     fixture = TestBed.createComponent(ToastContainerComponent);
     component = fixture.componentInstance;

src/index.html

@@ -8,6 +8,6 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <app-root></app-root>
+<app-root></app-root>
 </body>
 </html>

src/main.ts

@@ -1,8 +1,8 @@
 /// <reference types="@angular/localize" />
 
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
+import {bootstrapApplication} from '@angular/platform-browser';
+import {appConfig} from './app/app.config';
+import {AppComponent} from './app/app.component';
 
 bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));

src/pages/shows/shows.component.spec.ts

@@ -1,6 +1,6 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ShowsComponent } from './shows.component';
+import {ShowsComponent} from './shows.component';
 
 describe('ShowsComponent', () => {
   let component: ShowsComponent;
@@ -10,7 +10,7 @@ describe('ShowsComponent', () => {
     await TestBed.configureTestingModule({
       imports: [ShowsComponent]
     })
-    .compileComponents();
+      .compileComponents();
 
     fixture = TestBed.createComponent(ShowsComponent);
     component = fixture.componentInstance;

src/services/shows/shows-api.service.spec.ts

@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { ShowsApiService } from './shows-api.service';
+import {ShowsApiService} from './shows-api.service';
 
 describe('ShowsApiService', () => {
   let service: ShowsApiService;

src/services/shows/shows-api.service.ts

@@ -24,7 +24,7 @@ export class ShowsApiService {
   }
 
   getShow(id: string): Observable<ShowsApiIdResponse> {
-    return this.http.get<ShowsApiIdResponse>(this.showsEndpoint + "id/" + id )
+    return this.http.get<ShowsApiIdResponse>(this.showsEndpoint + "id/" + id)
   }
 
   sendShow(newShow: {}) {

src/services/toast/toast.service.spec.ts

@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { ToastService } from './toast.service';
+import {ToastService} from './toast.service';
 
 describe('ToastService', () => {
   let service: ToastService;

src/services/toast/toast.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 import {Toast} from '../../interfaces/toast';
 
 @Injectable({