Fix route guard with same logic as schematic and make sure base note is always selected when necessary

Author: Salma Alam-Naylor

apps/fretonator-web/src/app/common/chips/chip/chip.component.ts

@@ -18,6 +18,7 @@ export class ChipComponent implements DoCheck {
   @Input() mode: Mode;
   @Input() selectedColor: SelectedColor = SelectedColor.default;
   @Input() rounded = false;
+  @Input() isBaseNote = false;
   SelectedColor = SelectedColor;
   selected = false;
 
@@ -33,6 +34,8 @@ export class ChipComponent implements DoCheck {
 
     if (data.note !== this.note) {
       return false;
+    } else if (data.note === this.note && this.isBaseNote) {
+      return true;
     }
 
     if (data.noteExtender !== this.noteExtender) {

apps/fretonator-web/src/app/common/is-valid-mode-configuration/is-valid-mode-configuration.guard.ts

@@ -18,7 +18,10 @@ export class IsValidModeConfigurationGuard implements CanActivate {
       return home;
     }
 
-    if(!NoteSymbol[note + NoteExtenderSymbol[noteExtender]]) {
+    const extenderSymbol = NoteExtenderSymbol[noteExtender];
+    const validCombination = Object.values(NoteSymbol).find(value => value === `${note}${extenderSymbol}`)
+
+    if(!validCombination) {
       return home;
     }
 

apps/fretonator-web/src/app/pages/home/home-index/home-index.component.html

@@ -34,8 +34,9 @@ <h2 class="modeSelector__label">Starting note</h2>
       <app-chips>
         <app-chip *ngFor="let thisNote of octave"
                   [note]="thisNote"
-                  [noteExtender]="noteExtenderString"
+                  [noteExtender]="'natural'"
                   [mode]="mode"
+                  [isBaseNote]="true"
                   rounded="true"
                   selectedColor="default">{{thisNote | titlecase}}</app-chip>
       </app-chips>