From 1925906b7fcaa6be5f7fe08b5c3a014b0a691c1b Mon Sep 17 00:00:00 2001
From: Vinu <kevinduss1@gmail.com>
Date: Fri, 8 Mar 2024 21:23:49 +0000
Subject: [PATCH] show loader when modifying card

---
 src/app/components/admin/admin.component.html |  6 ++--
 .../edit-user-card.component.html             |  7 ++--
 .../edit-user-card.component.ts               |  2 ++
 src/app/state/card/card.reducers.ts           | 33 +++++++++++++------
 src/app/state/card/card.selectors.ts          |  5 +++
 src/app/state/card/card.state.ts              |  2 ++
 6 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/src/app/components/admin/admin.component.html b/src/app/components/admin/admin.component.html
index b1834a7..15e7ce5 100644
--- a/src/app/components/admin/admin.component.html
+++ b/src/app/components/admin/admin.component.html
@@ -39,12 +39,12 @@
     </mat-form-field>
     <div class="flex mt-2">
       <app-button
-        [disabled]="!this.deletionForm.valid"
-        [transparent]="!this.deletionForm.valid"
+        [disabled]="!this.deletionForm.valid || (deleting$ | async) === true"
+        [transparent]="!this.deletionForm.valid || (deleting$ | async) === true"
+        [loading]="(deleting$ | async) === true"
         [text]="'Farewell!'"
         [symbol]="'waving_hand'"
         [color]="'pink'"
-        [loading]="(deleting$ | async) === true"
       ></app-button>
     </div>
   </form>
diff --git a/src/app/components/edit-user-card/edit-user-card.component.html b/src/app/components/edit-user-card/edit-user-card.component.html
index 16c8098..088249d 100644
--- a/src/app/components/edit-user-card/edit-user-card.component.html
+++ b/src/app/components/edit-user-card/edit-user-card.component.html
@@ -105,10 +105,11 @@
     <input matInput formControlName="bestAdviceInput" />
   </mat-form-field>
 
-  <div class="flex justify-center">
+  <div class="flex">
     <app-button
-      [disabled]="!this.userForm.valid"
-      [transparent]="!this.userForm.valid"
+      [disabled]="!this.userForm.valid || (cardModifying$ | async) === true"
+      [transparent]="!this.userForm.valid || (cardModifying$ | async) === true"
+      [loading]="(cardModifying$ | async) === true"
       text="Update"
       symbol="save"
       color="pink"
diff --git a/src/app/components/edit-user-card/edit-user-card.component.ts b/src/app/components/edit-user-card/edit-user-card.component.ts
index f5047a8..ac4ed61 100644
--- a/src/app/components/edit-user-card/edit-user-card.component.ts
+++ b/src/app/components/edit-user-card/edit-user-card.component.ts
@@ -17,6 +17,7 @@ import { loadCardById } from 'src/app/state/card/card.actions';
 import {
   selectCardError,
   selectCardLoading,
+  selectCardModifying,
   selectCardWithUserById,
 } from 'src/app/state/card/card.selectors';
 import {
@@ -83,6 +84,7 @@ export class EditUserCardComponent implements OnInit {
   });
 
   cardLoading$ = this.store.select(selectCardLoading);
+  cardModifying$ = this.store.select(selectCardModifying);
   cardError$ = this.store.select(selectCardError);
   pictureLoading$ = this.store.select(selectPictureLoading);
   pictureError$ = this.store.select(selectPictureError);
diff --git a/src/app/state/card/card.reducers.ts b/src/app/state/card/card.reducers.ts
index 5a79b15..03ad2c9 100644
--- a/src/app/state/card/card.reducers.ts
+++ b/src/app/state/card/card.reducers.ts
@@ -35,18 +35,31 @@ export const cardReducer = createReducer(
     };
   }),
 
+  on(CardActions.loadCardByIdSuccess, (state, { card }): CardState => {
+    const entityState = cardAdapter.upsertOne(card, state);
+
+    return {
+      ...entityState,
+      loading: false,
+      error: false,
+    };
+  }),
+
   on(
-    CardActions.loadCardByIdSuccess,
-    CardActions.modifyCardSuccess,
-    (state, { card }): CardState => {
-      const entityState = cardAdapter.upsertOne(card, state);
+    CardActions.modifyCard,
+    (state: CardState): CardState => ({
+      ...state,
+      modifying: true,
+    }),
+  ),
 
-      return {
-        ...entityState,
-        loading: false,
-        error: false,
-      };
-    },
+  on(
+    CardActions.modifyCardSuccess,
+    CardActions.modifyCardError,
+    (state): CardState => ({
+      ...state,
+      modifying: false,
+    }),
   ),
 
   on(CardActions.changeCardsFilter, (state, { showAll }): CardState => {
diff --git a/src/app/state/card/card.selectors.ts b/src/app/state/card/card.selectors.ts
index ec85d07..ac0fea1 100644
--- a/src/app/state/card/card.selectors.ts
+++ b/src/app/state/card/card.selectors.ts
@@ -24,6 +24,11 @@ export const selectCardLoading = createSelector(
   (state) => state.loading,
 );
 
+export const selectCardModifying = createSelector(
+  selectCardState,
+  (state) => state.modifying,
+);
+
 export const selectCardError = createSelector(
   selectCardState,
   (state) => state.error,
diff --git a/src/app/state/card/card.state.ts b/src/app/state/card/card.state.ts
index d7f49bc..48d6c92 100644
--- a/src/app/state/card/card.state.ts
+++ b/src/app/state/card/card.state.ts
@@ -7,6 +7,7 @@ export interface CardState extends EntityState<Card> {
   next: string | null;
   previous: string | null;
   loading: boolean;
+  modifying: boolean;
   error: boolean;
   showAll: boolean;
   pageSize: number;
@@ -23,6 +24,7 @@ export const initialCardState: CardState = cardAdapter.getInitialState({
   next: null,
   previous: null,
   loading: false,
+  modifying: false,
   error: false,
   showAll: true,
   pageSize: 12,