fix: Issue preventing new members from being added; chore: Clean up r…

…emaining places with the new ControlMode type

README.md

@@ -39,6 +39,15 @@ Welcome to the source code repository for the LCC web app! Here you'll find an o
 | 🐛  | Bug fixes                         |
 | 🔧  | Behind-the-scenes changes         |
 
+<details>
+<summary style="cursor: pointer">
+v4.1.4 - November 2nd, 2024
+</summary>
+
+- 🐛 Fix issue in Member Editor preventing new members from being added
+
+</details>
+
 <details>
 <summary style="cursor: pointer">
 v4.1.3 - October 31st, 2024

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lcc-angular",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "description": "Frontend for the London Chess Club website, built with Angular",
   "author": "Michal Wiraszka (https://wiraszka.com)",
   "repository": {

src/app/components/article-form/article-form.component.html

@@ -134,7 +134,7 @@ <h4>Preview</h4>
         class="lcc-primary-button"
         type="submit"
         [disabled]="form.invalid || !(facade.hasUnsavedChanges$ | async)">
-        @if ((facade.controlMode$ | async) === 'edit') {
+        @if ((facade.controlMode$ | async) === ControlModes.EDIT) {
           Update
         } @else {
           Publish article

src/app/components/article-form/article-form.component.ts

@@ -5,7 +5,7 @@ import { Component, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { ImagesService } from '@app/services';
-import type { Article } from '@app/types';
+import { type Article, ControlModes } from '@app/types';
 import { isDefined } from '@app/utils';
 import { imageSizeValidator } from '@app/validators';
 
@@ -19,6 +19,7 @@ import { ArticleFormFacade } from './article-form.facade';
   providers: [ArticleFormFacade],
 })
 export class ArticleFormComponent implements OnInit {
+  readonly ControlModes = ControlModes;
   form!: FormGroup;
 
   constructor(

src/app/components/article-form/article-form.facade.ts

@@ -4,7 +4,7 @@ import { first, map } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
 
 import { ArticlesActions, ArticlesSelectors } from '@app/store/articles';
-import { type Article } from '@app/types';
+import { type Article, ControlModes } from '@app/types';
 
 @Injectable()
 export class ArticleFormFacade {
@@ -31,7 +31,7 @@ export class ArticleFormFacade {
     this.controlMode$
       .pipe(
         map(controlMode =>
-          controlMode === 'edit'
+          controlMode === ControlModes.EDIT
             ? this.store.dispatch(
                 ArticlesActions.updateArticleSelected({
                   article,

src/app/components/event-form/event-form.component.html

@@ -191,7 +191,7 @@
         class="lcc-primary-button"
         type="submit"
         [disabled]="form.invalid || !(facade.hasUnsavedChanges$ | async)">
-        @if ((facade.controlMode$ | async) === 'edit') {
+        @if ((facade.controlMode$ | async) === ControlModes.EDIT) {
           Update event
         } @else {
           Add event

src/app/components/event-form/event-form.component.ts

@@ -4,7 +4,7 @@ import { debounceTime, filter, first } from 'rxjs/operators';
 import { Component, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 
-import type { ClubEvent } from '@app/types';
+import { type ClubEvent, ControlModes } from '@app/types';
 import { articleIdRegExp, isDefined } from '@app/utils';
 import { dateValidator } from '@app/validators';
 
@@ -18,6 +18,7 @@ import { EventFormFacade } from './event-form.facade';
   providers: [EventFormFacade],
 })
 export class EventFormComponent implements OnInit {
+  readonly ControlModes = ControlModes;
   form!: FormGroup;
 
   constructor(

src/app/components/event-form/event-form.facade.ts

@@ -4,7 +4,7 @@ import { first, map } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
 
 import { ScheduleActions, ScheduleSelectors } from '@app/store/schedule';
-import type { ClubEvent } from '@app/types';
+import { type ClubEvent, ControlModes } from '@app/types';
 
 @Injectable()
 export class EventFormFacade {
@@ -23,7 +23,7 @@ export class EventFormFacade {
     this.controlMode$
       .pipe(
         map(controlMode =>
-          controlMode === 'edit'
+          controlMode === ControlModes.EDIT
             ? this.store.dispatch(
                 ScheduleActions.updateEventSelected({
                   event,

src/app/components/member-form/member-form.component.html

@@ -193,7 +193,7 @@
           </i-feather>
         }
       </div>
-      @if ((facade.controlMode$ | async) === 'edit') {
+      @if ((facade.controlMode$ | async) === ControlModes.EDIT) {
         <label for="is-active-input">Active:</label>
         <input
           id="is-active-input"
@@ -222,7 +222,7 @@
         class="lcc-primary-button"
         type="submit"
         [disabled]="form.invalid || !(facade.hasUnsavedChanges$ | async)">
-        @if ((facade.controlMode$ | async) === 'edit') {
+        @if ((facade.controlMode$ | async) === ControlModes.EDIT) {
           Update
         } @else {
           Add member

src/app/components/member-form/member-form.component.ts

@@ -4,7 +4,7 @@ import { debounceTime, filter, first } from 'rxjs/operators';
 import { Component, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 
-import type { Member } from '@app/types';
+import { ControlModes, type Member } from '@app/types';
 import { isDefined } from '@app/utils';
 import {
   dateValidator,
@@ -24,6 +24,7 @@ import { MemberFormFacade } from './member-form.facade';
   providers: [MemberFormFacade],
 })
 export class MemberFormComponent implements OnInit {
+  readonly ControlModes = ControlModes;
   form!: FormGroup;
 
   constructor(

src/app/components/member-form/member-form.facade.ts

@@ -4,7 +4,7 @@ import { first, map } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
 
 import { MembersActions, MembersSelectors } from '@app/store/members';
-import type { Member } from '@app/types';
+import { ControlModes, type Member } from '@app/types';
 
 @Injectable()
 export class MemberFormFacade {
@@ -23,7 +23,7 @@ export class MemberFormFacade {
     this.controlMode$
       .pipe(
         map(controlMode =>
-          controlMode
+          controlMode === ControlModes.EDIT
             ? this.store.dispatch(
                 MembersActions.updateMemberSelected({
                   member,

src/app/screens/article/article-editor/article-editor.component.html

@@ -2,7 +2,7 @@
   <lcc-screen-header
     [hasUnsavedChanges]="(facade.hasUnsavedChanges$ | async) ?? undefined"
     [title]="
-      (facade.controlMode$ | async) === 'edit'
+      (facade.controlMode$ | async) === ControlModes.EDIT
         ? 'Edit ' + (facade.selectedArticleTitle$ | async)
         : 'Create an article'
     ">

src/app/screens/article/article-editor/article-editor.component.ts

@@ -4,7 +4,7 @@ import { combineLatest } from 'rxjs';
 import { Component, OnInit } from '@angular/core';
 
 import { MetaAndTitleService } from '@app/services';
-import { type Link, NavPathTypes } from '@app/types';
+import { ControlModes, type Link, NavPathTypes } from '@app/types';
 
 import { ArticleEditorFacade } from './article-editor.facade';
 
@@ -28,6 +28,7 @@ export class ArticleEditorComponent implements OnInit {
       text: 'Return home',
     },
   ];
+  readonly ControlModes = ControlModes;
 
   constructor(
     public facade: ArticleEditorFacade,
@@ -39,7 +40,7 @@ export class ArticleEditorComponent implements OnInit {
       .pipe(untilDestroyed(this))
       .subscribe(([articleTitle, controlMode]) => {
         const screenTitle =
-          controlMode === 'edit' && articleTitle
+          controlMode === ControlModes.EDIT && articleTitle
             ? `Edit ${articleTitle}`
             : 'Compose an article';
         this.metaAndTitleService.updateTitle(screenTitle);

src/app/screens/event/event-editor/event-editor.component.html

@@ -2,7 +2,7 @@
   <lcc-screen-header
     [hasUnsavedChanges]="(facade.hasUnsavedChanges$ | async) ?? undefined"
     [title]="
-      (facade.controlMode$ | async) === 'edit'
+      (facade.controlMode$ | async) === ControlModes.EDIT
         ? 'Edit ' + (facade.selectedEventTitle$ | async)
         : 'Create an event'
     ">

src/app/screens/event/event-editor/event-editor.component.ts

@@ -4,6 +4,7 @@ import { combineLatest } from 'rxjs';
 import { Component, OnInit } from '@angular/core';
 
 import { MetaAndTitleService } from '@app/services';
+import { ControlModes } from '@app/types';
 
 import { EventEditorFacade } from './event-editor.facade';
 
@@ -15,6 +16,7 @@ import { EventEditorFacade } from './event-editor.facade';
   providers: [EventEditorFacade],
 })
 export class EventEditorComponent implements OnInit {
+  readonly ControlModes = ControlModes;
   constructor(
     public facade: EventEditorFacade,
     private metaAndTitleService: MetaAndTitleService,
@@ -25,7 +27,9 @@ export class EventEditorComponent implements OnInit {
       .pipe(untilDestroyed(this))
       .subscribe(([eventTitle, controlMode]) => {
         const screenTitle =
-          controlMode === 'edit' && eventTitle ? `Edit ${eventTitle}` : 'Create an event';
+          controlMode === ControlModes.EDIT && eventTitle
+            ? `Edit ${eventTitle}`
+            : 'Create an event';
         this.metaAndTitleService.updateTitle(screenTitle);
         this.metaAndTitleService.updateDescription(
           `${screenTitle} for the London Chess Club.`,

src/app/screens/member/member-editor/member-editor.component.html

@@ -2,7 +2,7 @@
   <lcc-screen-header
     [hasUnsavedChanges]="(facade.hasUnsavedChanges$ | async) ?? undefined"
     [title]="
-      (facade.controlMode$ | async) === 'edit'
+      (facade.controlMode$ | async) === ControlModes.EDIT
         ? 'Edit ' + (facade.selectedMemberName$ | async)
         : 'Add a member'
     ">

src/app/screens/member/member-editor/member-editor.component.ts

@@ -1,19 +1,22 @@
-import { untilDestroyed } from '@ngneat/until-destroy';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { combineLatest } from 'rxjs';
 
 import { Component, OnInit } from '@angular/core';
 
 import { MetaAndTitleService } from '@app/services';
+import { ControlModes } from '@app/types';
 
 import { MemberEditorFacade } from './member-editor.facade';
 
+@UntilDestroy()
 @Component({
   selector: 'lcc-member-editor',
   templateUrl: './member-editor.component.html',
   styleUrls: ['./member-editor.component.scss'],
   providers: [MemberEditorFacade],
 })
 export class MemberEditorComponent implements OnInit {
+  readonly ControlModes = ControlModes;
   constructor(
     public facade: MemberEditorFacade,
     private metaAndTitleService: MetaAndTitleService,
@@ -24,7 +27,9 @@ export class MemberEditorComponent implements OnInit {
       .pipe(untilDestroyed(this))
       .subscribe(([memberName, controlMode]) => {
         const screenTitle =
-          controlMode === 'edit' && memberName ? `Edit ${memberName}` : 'Add a member';
+          controlMode === ControlModes.EDIT && memberName
+            ? `Edit ${memberName}`
+            : 'Add a member';
         this.metaAndTitleService.updateTitle(screenTitle);
         this.metaAndTitleService.updateDescription(
           `${screenTitle} for the London Chess Club.`,

src/app/services/members.service.ts

@@ -1,16 +1,15 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { Observable, of } from 'rxjs';
-import { catchError, map, switchMap, tap } from 'rxjs/operators';
+import { catchError, map, switchMap } from 'rxjs/operators';
 
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 
+import { AuthService } from '@app/services';
 import type { FlatMember, Member, ServiceResponse } from '@app/types';
 
 import { environment } from '@environments/environment';
 
-import { AuthService } from './auth.service';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -66,6 +65,7 @@ export class MembersService {
 
   addMember(memberToAdd: Member): Observable<ServiceResponse<Member>> {
     const flattenedMember = this.adaptForBackend([memberToAdd])[0];
+
     return this.authService.token().pipe(
       switchMap(token =>
         this.http.post<null>(this.PRIVATE_API_ENDPOINT, flattenedMember, {

src/app/store/nav/nav.effects.ts

@@ -302,7 +302,7 @@ export class NavEffects {
       concatLatestFrom(() => this.store.select(ArticlesSelectors.controlMode)),
       map(([{ article }, controlMode]) => {
         const path =
-          controlMode === 'edit'
+          controlMode === ControlModes.EDIT
             ? NavPathTypes.ARTICLE + '/' + NavPathTypes.EDIT + '/' + article.id
             : NavPathTypes.ARTICLE + '/' + NavPathTypes.VIEW + '/' + article.id;
         return NavActions.navigationRequested({ path });