Fav fix

src/app/header/progress-bar/progress-bar.component.html

@@ -1,5 +1,13 @@
 <div
-  *ngIf="isLoadingResultPage || isLoadingMetaData || isLoadingCabinet || isLoadingAdminData || isLoadingMainPage"
+  *ngIf="
+    isLoadingResultPage ||
+    isLoadingMetaData ||
+    isLoadingCabinet ||
+    isLoadingAdminData ||
+    isLoadingMainPage ||
+    isLoadingProvider ||
+    isAutorizationLoading
+  "
   class="progress-bar">
   <mat-progress-bar mode="indeterminate"> </mat-progress-bar>
 </div>

src/app/header/progress-bar/progress-bar.component.ts

@@ -1,3 +1,5 @@
+import { RegistrationState } from 'src/app/shared/store/registration.state';
+import { ProviderState } from './../../shared/store/provider.state';
 import { MainPageState } from 'src/app/shared/store/main-page.state';
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Select } from '@ngxs/store';
@@ -24,13 +26,19 @@ export class ProgressBarComponent implements OnInit, OnDestroy {
   isLoadingAdminData$: Observable<boolean>;
   @Select(MainPageState.isLoadingData)
   isLoadingMainPage$: Observable<boolean>;
+  @Select(ProviderState.isLoading)
+  isLoadingProvider$: Observable<boolean>;
+  @Select(RegistrationState.isAutorizationLoading)
+  isAutorizationLoading$: Observable<boolean>;
 
   isLoadingResultPage: boolean;
   isLoadingCabinet: boolean;
   isLoadingMetaData: boolean;
   isLoadingAdminData: boolean;
   isLoadingNotifications: boolean;
   isLoadingMainPage: boolean;
+  isAutorizationLoading: boolean;
+  isLoadingProvider: boolean;
 
   private destroy$: Subject<boolean> = new Subject<boolean>();
 
@@ -42,16 +50,30 @@ export class ProgressBarComponent implements OnInit, OnDestroy {
       this.isLoadingMetaData$,
       this.isLoadingCabinet$,
       this.isLoadingAdminData$,
-      this.isLoadingMainPage$
+      this.isLoadingMainPage$,
+      this.isAutorizationLoading$,
+      this.isLoadingProvider$,
     ])
       .pipe(takeUntil(this.destroy$), delay(0))
-      .subscribe(([isLoadingResult, isLoadingMeta, isLoadingCabinet, isLoadingAdminData, isLoadingMainPage]) => {
-        this.isLoadingResultPage = isLoadingResult;
-        this.isLoadingMetaData = isLoadingMeta;
-        this.isLoadingCabinet = isLoadingCabinet;
-        this.isLoadingAdminData = isLoadingAdminData;
-        this.isLoadingMainPage = isLoadingMainPage;
-      });
+      .subscribe(
+        ([
+          isLoadingResult,
+          isLoadingMeta,
+          isLoadingCabinet,
+          isLoadingAdminData,
+          isLoadingMainPage,
+          isAutorizationLoading,
+          isLoadingProvider,
+        ]) => {
+          this.isLoadingResultPage = isLoadingResult;
+          this.isLoadingMetaData = isLoadingMeta;
+          this.isLoadingCabinet = isLoadingCabinet;
+          this.isLoadingAdminData = isLoadingAdminData;
+          this.isLoadingMainPage = isLoadingMainPage;
+          this.isAutorizationLoading = isAutorizationLoading;
+          this.isLoadingProvider = isLoadingProvider;
+        }
+      );
   }
 
   ngOnDestroy(): void {

src/app/shared/components/workshop-card/workshop-card.component.html

@@ -86,7 +86,7 @@
 <ng-template #favorite>
   <div
     class="actions_btn action-icon favorite-icon"
-    (click)="role === Role.parent && onDisLike(this.favoriteWorkshopId?.id)">
+    (click)="role === Role.parent && onDisLike()">
     <mat-icon>favorite</mat-icon>
   </div>
 </ng-template>

src/app/shared/components/workshop-card/workshop-card.component.ts

@@ -38,10 +38,12 @@ export class WorkshopCardComponent implements OnInit, OnDestroy {
   readonly recruitmentStatusUkr = RecruitmentStatusUkr;
   readonly modalConfirmationType = ModalConfirmationType;
 
-  isFavorite: boolean;
+  isFavorite = false;
   canChangeWorkshopStatus: boolean;
   workshopData: ProviderWorkshopCard | WorkshopCard;
 
+  private favoriteWorkshopId: string;
+
   @Input() set workshop(workshop: WorkshopCard) {
     this.workshopData = workshop;
     this.imagesService.setWorkshopCoverImage(workshop);
@@ -95,9 +97,9 @@ export class WorkshopCardComponent implements OnInit, OnDestroy {
     this.isFavorite = !this.isFavorite;
   }
 
-  onDisLike(id: string): void {
+  onDisLike(): void {
     this.store.dispatch([
-      new DeleteFavoriteWorkshop(id),
+      new DeleteFavoriteWorkshop(this.favoriteWorkshopId),
       new ShowMessageBar({ message: `Гурток ${this.workshopData.title} видалено з Улюблених`, type: 'success' }),
     ]);
     this.isFavorite = !this.isFavorite;
@@ -139,7 +141,11 @@ export class WorkshopCardComponent implements OnInit, OnDestroy {
         filter((favorites: Favorite[]) => !!favorites)
       )
       .subscribe((favorites: Favorite[]) => {
-        this.isFavorite = !!favorites.find((item: Favorite) => item.workshopId === this.workshopData.workshopId);
+        const favorite = favorites.find((item: Favorite) => item.workshopId === this.workshopData.workshopId);
+        if (!!favorite) {
+          this.favoriteWorkshopId = favorite.id;
+          this.isFavorite = true;
+        }
       });
   }
 }

src/app/shared/store/user.state.ts

@@ -6,7 +6,7 @@ import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { State, Action, StateContext, Selector } from '@ngxs/store';
 import { Observable, of, throwError } from 'rxjs';
-import { catchError, tap } from 'rxjs/operators';
+import { catchError, tap, debounceTime } from 'rxjs/operators';
 import { ApplicationCards } from '../models/application.model';
 import { ChildCards } from '../models/child.model';
 import { Provider } from '../models/provider.model';
@@ -160,7 +160,6 @@ export class UserState {
     return state.isReviewed;
   }
 
-
   constructor(
     private userWorkshopService: UserWorkshopService,
     private applicationService: ApplicationService,
@@ -269,10 +268,7 @@ export class UserState {
   }
 
   @Action(GetUsersChildren)
-  getUsersChildren(
-    { patchState }: StateContext<UserStateModel>,
-    {}: GetUsersChildren
-  ): Observable<ChildCards> {
+  getUsersChildren({ patchState }: StateContext<UserStateModel>, {}: GetUsersChildren): Observable<ChildCards> {
     patchState({ isLoading: true });
     return this.childrenService
       .getUsersChildren()
@@ -288,13 +284,10 @@ export class UserState {
   }
 
   @Action(GetUsersChildById)
-  getUsersChildById(
-    { patchState }: StateContext<UserStateModel>,
-    { payload }: GetUsersChildById
-  ): Observable<Child> {
-      patchState({ isLoading: true });
-      return this.childrenService
-      .getUsersChildById( payload )
+  getUsersChildById({ patchState }: StateContext<UserStateModel>, { payload }: GetUsersChildById): Observable<Child> {
+    patchState({ isLoading: true });
+    return this.childrenService
+      .getUsersChildById(payload)
       .pipe(tap((selectedChild: Child) => patchState({ selectedChild: selectedChild, isLoading: false })));
   }
 
@@ -455,13 +448,11 @@ export class UserState {
     { parentId, workshopId }: GetStatusAllowedToReview
   ): Observable<boolean> {
     patchState({ isLoading: true });
-    return this.applicationService
-      .getApplicationsAllowedToReview(parentId, workshopId)
-      .pipe(
-        tap((status: boolean) => {
-          return patchState({ isAllowedToReview: status, isLoading: false });
-        })
-      );
+    return this.applicationService.getApplicationsAllowedToReview(parentId, workshopId).pipe(
+      tap((status: boolean) => {
+        return patchState({ isAllowedToReview: status, isLoading: false });
+      })
+    );
   }
 
   @Action(GetReviewedApplications)
@@ -470,13 +461,11 @@ export class UserState {
     { parentId, workshopId }: GetReviewedApplications
   ): Observable<boolean> {
     patchState({ isLoading: true });
-    return this.applicationService
-      .getReviewedApplications(parentId, workshopId)
-      .pipe(
-        tap((status: boolean) => {
-          return patchState({ isReviewed: status, isLoading: false });
-        })
-      );
+    return this.applicationService.getReviewedApplications(parentId, workshopId).pipe(
+      tap((status: boolean) => {
+        return patchState({ isReviewed: status, isLoading: false });
+      })
+    );
   }
 
   @Action(CreateRating)
@@ -531,19 +520,21 @@ export class UserState {
     { dispatch }: StateContext<UserStateModel>,
     { payload }: CreateFavoriteWorkshop
   ): Observable<object> {
-    return this.favoriteWorkshopsService
-      .createFavoriteWorkshop(payload)
-      .pipe(tap(() => dispatch([new GetFavoriteWorkshops(), new GetFavoriteWorkshopsByUserId()])));
+    return this.favoriteWorkshopsService.createFavoriteWorkshop(payload).pipe(
+      debounceTime(2000),
+      tap(() => dispatch(new GetFavoriteWorkshops()))
+    );
   }
 
   @Action(DeleteFavoriteWorkshop)
   deleteFavoriteWorkshop(
     { dispatch }: StateContext<UserStateModel>,
     { payload }: DeleteFavoriteWorkshop
   ): Observable<object> {
-    return this.favoriteWorkshopsService
-      .deleteFavoriteWorkshop(payload)
-      .pipe(tap(() => dispatch([new GetFavoriteWorkshops(), new GetFavoriteWorkshopsByUserId()])));
+    return this.favoriteWorkshopsService.deleteFavoriteWorkshop(payload).pipe(
+      debounceTime(2000),
+      tap(() => dispatch(new GetFavoriteWorkshops()))
+    );
   }
 
   @Action(ResetProviderWorkshopDetails)

src/app/shell/main/main.component.ts

@@ -5,7 +5,7 @@ import { FilterState } from 'src/app/shared/store/filter.state';
 import { RegistrationState } from '../../shared/store/registration.state';
 import { DirectionsStatistic } from 'src/app/shared/models/category.model';
 import { WorkshopCard } from '../../shared/models/workshop.model';
-import { filter, takeUntil } from 'rxjs/operators';
+import { filter, take, takeUntil } from 'rxjs/operators';
 import { UserState } from 'src/app/shared/store/user.state';
 import { Favorite } from 'src/app/shared/models/favorite.model';
 import { Role } from 'src/app/shared/enum/role';
@@ -74,8 +74,8 @@ export class MainComponent implements OnInit, OnDestroy {
     if (role === Role.parent) {
       this.favoriteWorkshops$
         .pipe(
+          take(1),
           filter((favorite: Favorite[]) => !!favorite?.length || favorite === null),
-          takeUntil(this.destroy$)
         )
         .subscribe((favorite: Favorite[]) => this.getMainPageData());
     } else {

src/app/shell/personal-cabinet/parent/favorite-workshops/favorite-workshops.component.html

@@ -1,15 +1,15 @@
-<ng-container *ngIf="(favoriteWorkshopsCard$ | async)?.length;  else isEmptyList">
+<ng-container *ngIf="(favoriteWorkshopsCard$ | async)?.length; else isEmptyList">
   <div class="card-wrapper">
-    <app-workshop-card class="card" *ngFor="let workshop of (favoriteWorkshopsCard$ |async)" [workshop]="workshop">
+    <app-workshop-card class="card" *ngFor="let workshop of favoriteWorkshopsCard$ | async" [workshop]="workshop">
     </app-workshop-card>
   </div>
-  <app-paginator [totalEntities]="(favoriteWorkshopsCard$ | async).length" [currentPage]="currentPage" 
+  <app-paginator
+    [totalEntities]="(favoriteWorkshopsCard$ | async).length"
+    [currentPage]="currentPage"
     (pageChange)="onPageChange($event)">
   </app-paginator>
 </ng-container>
 
-
 <ng-template #isEmptyList>
   <app-no-result-card [title]="noFavoriteWorkshops"></app-no-result-card>
 </ng-template>
-

src/app/shell/personal-cabinet/parent/favorite-workshops/favorite-workshops.component.ts

@@ -1,6 +1,6 @@
 import { UserState } from 'src/app/shared/store/user.state';
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Select, Store } from '@ngxs/store';
+import { Actions, ofAction, Select, Store } from '@ngxs/store';
 import { WorkshopCard } from 'src/app/shared/models/workshop.model';
 import { Observable } from 'rxjs';
 import { PaginationElement } from 'src/app/shared/models/paginationElement.model';
@@ -12,37 +12,45 @@ import { NavBarName } from 'src/app/shared/enum/navigation-bar';
 import { ParentComponent } from '../parent.component';
 import { MatDialog } from '@angular/material/dialog';
 import { PaginationConstants } from 'src/app/shared/constants/constants';
+import { DeleteFavoriteWorkshop, GetFavoriteWorkshopsByUserId } from 'src/app/shared/store/user.actions';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-favorite-workshops',
   templateUrl: './favorite-workshops.component.html',
-  styleUrls: ['./favorite-workshops.component.scss']
+  styleUrls: ['./favorite-workshops.component.scss'],
 })
 export class FavoriteWorkshopsComponent extends ParentComponent implements OnInit, OnDestroy {
-  readonly Role  = Role;
+  readonly Role = Role;
   readonly noFavoriteWorkshops = NoResultsTitle.noFavoriteWorkshops;
 
   @Select(UserState.favoriteWorkshopsCard)
   favoriteWorkshopsCard$: Observable<WorkshopCard[]>;
+
   currentPage: PaginationElement = PaginationConstants.firstPage;
 
-  constructor(protected store: Store, protected matDialog: MatDialog) {
+  constructor(protected store: Store, protected matDialog: MatDialog, private actions$: Actions) {
     super(store, matDialog);
   }
 
   protected addNavPath(): void {
     this.store.dispatch(
-      new PushNavPath(
-        {
-          name: NavBarName.Favorite,
-          isActive: false,
-          disable: true,
-        }
-      )
-    );    
+      new PushNavPath({
+        name: NavBarName.Favorite,
+        isActive: false,
+        disable: true,
+      })
+    );
   }
 
-  initParentData(): void { }
+  initParentData(): void {
+    this.store.dispatch(new GetFavoriteWorkshopsByUserId());
+
+    this.actions$
+      .pipe(ofAction(DeleteFavoriteWorkshop))
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => this.store.dispatch(new GetFavoriteWorkshopsByUserId()));
+  }
 
   onPageChange(page: PaginationElement): void {
     this.currentPage = page;