Pages/shows: refactor and code cleanup

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

@@ -59,22 +59,56 @@ export class CreateEditModalComponent {
       //TODO: Allow user to specify genres
       genres: []
     }
-    this.showsService.sendShow(show).subscribe({
+
-      next: (response: ShowsApiCreation) => {
+
-        show._id = response.newId
+    if (!this.editMode) {
-      }, error: err => {
+      this.showsService.sendShow(show).subscribe({
-        this.toastService.show({
+        next: (response: ShowsApiCreation) => {
-          body: "Could not add show!",
+          show._id = response.newId
-          htmlClass: "bg-danger text-light"
+        }, error: err => {
-        })
+          this.showToast(true, "created")
-        console.error(err)
+          console.error(err)
-      }, complete: () => {
+        }, complete: () => {
-        this.toastService.show({
+          this.showToast(false, "created")
-          body: "Show added successfully!",
+          this.activeModal.close(show)
-          htmlClass: "bg-success text-light"
+        }
-        })
+      })
-        this.activeModal.close(show)
+    } else {
+      // The API requires the show to also have an ID, so
+      // I add it here
+      show._id = this.show?._id
+      this.showsService.updateShow(show).subscribe({
+        next: (response: ShowsApiDeletionEdit) => {
+          // Do nothing
+        }, error: err => {
+          this.showToast(true, "edited")
+          console.error(err)
+        }, complete: () => {
+          this.showToast(false, "edited")
+          this.activeModal.close(show)
+        }
+      })
+    }
+  }
+
+  private showToast(error: boolean, action: "edited" | "created") {
+    let htmlClass: string = "bg-success text-light"
+    let body: string;
+    if (error) {
+      htmlClass = htmlClass.replace("success", "danger")
+      let temp: string
+      switch (action) {
+        case "created":
+          temp = "created"
+          break
+        case "edited":
+          temp = "edit"
+          break
       }
-    })
+      body = `Could not ${temp} show!`
+    } else {
+      body = `Show ${action} successfully!`
+    }
+    this.toastService.show({body, htmlClass})
   }
 }

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

@@ -1,6 +1,6 @@
-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;
@@ -10,7 +10,7 @@ describe('DeleteModalComponent', () => {
     await TestBed.configureTestingModule({
       imports: [DeleteModalComponent]
     })
-    .compileComponents();
+      .compileComponents();
 
     fixture = TestBed.createComponent(DeleteModalComponent);
     component = fixture.componentInstance;

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

@@ -1,12 +1,6 @@
 import {Component, inject} from '@angular/core';
 import {NgbActiveModal, NgbCollapse} from '@ng-bootstrap/ng-bootstrap';
-import {
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
-  FormControl,
-  FormGroup,
-  FormsModule,
-  ReactiveFormsModule,
-  Validators
-} from '@angular/forms';
 
 @Component({
   selector: 'app-delete-modal',
@@ -27,7 +21,7 @@ export class DeleteModalComponent {
 
   constructor() {
     this.confirmationForm = new FormGroup({
-      name: new FormControl("",Validators.required)
+      name: new FormControl("", Validators.required)
     })
   }
 

src/pages/shows/shows.component.html

@@ -9,7 +9,7 @@
           <button type="button" class="btn btn-outline-danger" (click)="deleteShow(show)">
             <i class="bi bi-trash"></i>
           </button>
-          <button type="button" class="btn btn-outline-warning">
+          <button type="button" class="btn btn-outline-warning" (click)="editShow(show, $index)">
             <i class="bi bi-pencil"></i>
           </button>
         </div>

src/pages/shows/shows.component.ts

@@ -8,7 +8,6 @@ import {NgbModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap';
 import {CreateEditModalComponent} from '../../components/create-modal/create-edit-modal/create-edit-modal.component';
 import {DatePipe} from '@angular/common';
 import {DeleteModalComponent} from '../../components/delete-modal/delete-modal.component';
-import {ShowsApiDeletionEdit} from '../../interfaces/shows-api-deletion-edit';
 
 @Component({
   selector: 'app-shows',
@@ -47,10 +46,10 @@ export class ShowsComponent {
 
   createNewShow() {
     this.modalService.open(CreateEditModalComponent).result.then(
-      (result: Show) => {
+      (closeResult: Show) => {
-        this.shows.push(result)
+        this.shows.push(closeResult)
       },
-      (result) => {
+      () => {
         // Dismissed, do nothing
       }
     )
@@ -60,11 +59,11 @@ export class ShowsComponent {
     const modal: NgbModalRef = this.modalService.open(DeleteModalComponent)
     modal.componentInstance.showName = show.title;
     modal.result.then(
-      (result) => {
+      (closeResult) => {
-        if (result) {
+        if (closeResult) {
           if (show._id != null) {
             this.api.deleteShw(show._id).subscribe({
-                next: (response: ShowsApiDeletionEdit) => {
+              next: () => {
                   // Do nothing
                 }, error: (err: any) => {
                   console.log(err)
@@ -77,7 +76,22 @@ export class ShowsComponent {
           }
         }
       },
-      (result) => {
+      () => {
+        // Dismissed, do nothing
+      }
+    )
+  }
+
+  editShow(show: Show, index: number) {
+    const modal: NgbModalRef = this.modalService.open(CreateEditModalComponent)
+    modal.componentInstance.editMode = true
+    modal.componentInstance.show = show
+    modal.componentInstance.initForm()
+    modal.result.then(
+      (closeResult: Show) => {
+        this.shows[index] = closeResult
+      },
+      () => {
         // Dismissed, do nothing
       }
     )

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

@@ -14,10 +14,12 @@ export class ShowsApiService {
 
   private readonly url: string = "https://shows.everest.tailscale/api/";
   private showsEndpoint: string
+  private idEndpoint: string
   private http: HttpClient = inject(HttpClient);
 
   constructor() {
     this.showsEndpoint = this.url + "shows/"
+    this.idEndpoint = this.showsEndpoint + "id/"
   }
 
   getShows(): Observable<ShowsApiResponse> {
@@ -25,7 +27,7 @@ export class ShowsApiService {
   }
 
   getShow(id: string): Observable<ShowsApiIdResponse> {
-    return this.http.get<ShowsApiIdResponse>(this.showsEndpoint + "id/" + id)
+    return this.http.get<ShowsApiIdResponse>(this.idEndpoint + id)
   }
 
   sendShow(newShow: Show): Observable<ShowsApiCreation> {
@@ -33,10 +35,10 @@ export class ShowsApiService {
   }
 
   deleteShw(id: string): Observable<ShowsApiDeletionEdit> {
-    return this.http.delete<ShowsApiDeletionEdit>(this.showsEndpoint + "id/" + id)
+    return this.http.delete<ShowsApiDeletionEdit>(this.idEndpoint + id)
   }
 
   updateShow(show: Show): Observable<ShowsApiDeletionEdit> {
-    return this.http.put<ShowsApiDeletionEdit>(this.showsEndpoint + "id/" + show._id, show)
+    return this.http.put<ShowsApiDeletionEdit>(this.idEndpoint + show._id, show)
   }
 }