refactor: add typed forms to planet rating

Author: Saby-Bishops

src/app/shared/forms/planet-rating.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnChanges } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { CouchService } from '../couchdb.service';
 import { PlanetMessageService } from '../planet-message.service';
 import { UserService } from '../user.service';
@@ -26,6 +26,17 @@ const popupFormFields = [
   }
 ];
 
+interface RateFormModel {
+  rate: number;
+}
+
+interface PopupFormModel extends RateFormModel {
+  comment: string;
+}
+
+type RateFormControls = { [K in keyof RateFormModel]: FormControl<RateFormModel[K]> };
+type PopupFormControls = { [K in keyof PopupFormModel]: FormControl<PopupFormModel[K]> };
+
 @Component({
   templateUrl: './planet-rating.component.html',
   styles: [ ` .list-item-rating {
@@ -41,31 +52,36 @@ export class PlanetRatingComponent implements OnChanges {
   @Input() ratingType = '';
   @Input() disabled = false;
 
-  rateForm: UntypedFormGroup;
-  popupForm: UntypedFormGroup;
+  rateForm: FormGroup<RateFormControls>;
+  popupForm: FormGroup<PopupFormControls>;
   isPopupOpen = false;
   stackedBarData = [];
   enrolled = true;
-  get rateFormField() {
+  get rateFormField(): RateFormModel {
     return { rate: this.rating.userRating.rate || 0 };
   }
-  get commentField() {
+  get commentField(): Pick<PopupFormModel, 'comment'> {
     return { comment: this.rating.userRating.comment || '' };
   }
 
   private dbName = 'ratings';
 
   constructor(
-    private fb: UntypedFormBuilder,
+    private fb: FormBuilder,
     private couchService: CouchService,
     private planetMessage: PlanetMessageService,
     private userService: UserService,
     private dialogsForm: DialogsFormService,
     private ratingService: RatingService,
     private stateService: StateService
   ) {
-    this.rateForm = this.fb.group(this.rateFormField);
-    this.popupForm = this.fb.group(Object.assign({}, this.rateFormField, this.commentField));
+    this.rateForm = this.fb.group<RateFormControls>({
+      rate: this.fb.nonNullable.control(this.rateFormField.rate)
+    });
+    this.popupForm = this.fb.group<PopupFormControls>({
+      rate: this.fb.nonNullable.control(this.rateFormField.rate),
+      comment: this.fb.nonNullable.control(this.commentField.comment)
+    });
   }
 
   ngOnChanges() {
@@ -80,8 +96,13 @@ export class PlanetRatingComponent implements OnChanges {
       },
       { class: 'accent-color', amount: this.rating.femaleRating, align: 'right' }
     ];
-    this.rateForm.setValue(this.rateFormField);
-    this.popupForm.setValue(Object.assign({}, this.rateFormField, this.commentField));
+    this.rateForm.setValue({
+      rate: this.rateFormField.rate
+    });
+    this.popupForm.setValue({
+      rate: this.rateFormField.rate,
+      comment: this.commentField.comment
+    });
   }
 
   isEnrolled(id: any, type: any): boolean {
@@ -90,7 +111,7 @@ export class PlanetRatingComponent implements OnChanges {
     return inShelf;
   }
 
-  onStarClick(form = this.rateForm) {
+  onStarClick(form: FormGroup<RateFormControls> | FormGroup<PopupFormControls> = this.rateForm) {
     if (!this.isEnrolled(this.item._id, this.ratingType)) {
       if (this.ratingType === 'course') {
         this.planetMessage.showMessage($localize`Please join the ${this.ratingType} before rating!`);
@@ -121,7 +142,7 @@ export class PlanetRatingComponent implements OnChanges {
     });
   }
 
-  updateRating(form) {
+  updateRating(form: FormGroup<RateFormControls> | FormGroup<PopupFormControls>) {
     // Later parameters of Object.assign will overwrite values from previous objects
     const configuration = this.stateService.configuration;
     const newRating = {
@@ -162,9 +183,6 @@ export class PlanetRatingComponent implements OnChanges {
   ratingError() {
     this.planetMessage.showAlert($localize`There was an issue updating your rating`);
     this.rateForm.patchValue({ rate: this.rating.userRating.rate || 0 });
-    // If the dialog is open, then there will also be a comment control to reset
-    if (this.rateForm.controls.comment) {
-      this.rateForm.patchValue({ comment: this.rating.userRating.comment || '' });
-    }
+    this.popupForm.patchValue({ comment: this.rating.userRating.comment || '' });
   }
 }