fix: Improve error handling

src/app/finance/store/effects/transaction-type.effects.ts

@@ -29,7 +29,6 @@ export class TransactionTypeEffects {
 
     refreshClinic$ = createEffect(() => this.action$.pipe(
         ofType(loadClinics),
-        tap(() => console.log('passou aqui refreshClinic')),
         switchMap(() => {
             return this.clinicService.getAll().pipe(
                 map(clinics => loadClinicsSuccess({ clinics: clinics.results })),
@@ -40,7 +39,6 @@ export class TransactionTypeEffects {
 
     refreshTransactionType$ = createEffect(() => this.action$.pipe(
         ofType(clinicSelected),
-        tap(() => console.log('passou aqui refreshTransactionType')),
         switchMap((v) => {
             return this.transactionTypeService.getAll(v.clinic.id).pipe(
                 map(transactionTypes => loadTransactionTypesSuccess({ transactionTypes })),
@@ -51,7 +49,6 @@ export class TransactionTypeEffects {
 
     transactionTypeListPageChange$ = createEffect(() => this.action$.pipe(
         ofType(transactionTypesPageChanged),
-        tap(() => console.log('passou aqui transactionTypeListPageChange')),
         switchMap((data, clinic) => {
             const offset = data.event.pageSize * data.event.pageIndex;
             const filter = new TransactionTypeFilter();

src/app/finance/store/reducers/transaction-type.reducer.ts

@@ -6,6 +6,7 @@ import {
     loadClinics,
     loadClinicsError,
     loadClinicsSuccess,
+    loadTransactionTypesError,
     loadTransactionTypesSuccess,
 } from '../actions/transaction-type.actions';
 
@@ -33,10 +34,10 @@ const _transactionTypeReducer = createReducer(initialState,
         return { ...state, clinic: { ...state.clinic, all: action.clinics, empty: action.clinics.length === 0, error: false, loading: false } };
     }),
     on(loadClinicsError, (state) => {
-        return { ...state, error: true, clinics: [], empty: false };
+        return { ...state, clinic: { all: [], error: true, empty: false, loading: false } };
     }),
     on(clinicSelected, (state, action) => {
-        return { ...state, clinic: { ...state.clinic, selected: action.clinic }, transactionTypes: { ...state.transactionTypes, loading: true } };
+        return { ...state, clinic: { ...state.clinic, selected: action.clinic }, transactionTypes: { ...state.transactionTypes, loading: true, error: false, empty: false } };
     }),
     on(loadTransactionTypesSuccess, (state, action) => {
         return {
@@ -50,6 +51,18 @@ const _transactionTypeReducer = createReducer(initialState,
             },
         };
     }),
+    on(loadTransactionTypesError, (state) => {
+        return {
+            ...state,
+            transactionTypes: {
+                all: [],
+                count: 0,
+                error: true,
+                empty: false,
+                loading: false,
+            },
+        };
+    }),
 );
 
 export function transactionTypeReducer(state, action) {

src/app/finance/transaction-type/transaction-type-list/transaction-type-list.component.html

@@ -16,9 +16,13 @@
 </ng-container>
 
 <app-empty-state image="empty-box" *ngIf="empty$ | async">
-    <p>Você não possui nenhum tipo de despesa cadastrado</p>
+    <p>Você ainda não possui nenhum tipo de despesa cadastrado</p>
+    <p>Cadastre uma agora para começar a gestão financeira</p>
 </app-empty-state>
 
 <app-empty-state image="empty-box" *ngIf="error$ | async">
-    <p>Ocorreu um erro ao recuperar os tipos de despesas</p>
-</app-empty-state>
+    <p>Ocorreu um erro ao recuperar os dados</p>
+    <p>Tente novamente mais tarde</p>
+</app-empty-state>
+
+<mat-progress-bar mode="query" *ngIf="loading$ | async"></mat-progress-bar>

src/app/finance/transaction-type/transaction-type-list/transaction-type-list.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { MatPaginator, PageEvent } from '@angular/material';
 import { Store } from '@ngrx/store';
 import { map } from 'rxjs/operators';
@@ -10,7 +10,7 @@ import { transactionTypesPageChanged } from '../../store/actions/transaction-typ
     selector: 'app-transaction-type-list',
     templateUrl: './transaction-type-list.component.html',
 })
-export class TransactionTypeListComponent implements AfterViewInit {
+export class TransactionTypeListComponent {
     state$ = this.store.select(m => m.finance.transactionTypes);
     empty$ = this.state$.pipe(map(v => v.transactionTypes.empty));
     error$ = this.state$.pipe(map(v => v.transactionTypes.error));
@@ -23,13 +23,12 @@ export class TransactionTypeListComponent implements AfterViewInit {
     displayedColumns = ['code', 'label'];
 
     @ViewChild(MatPaginator, { static: false })
-    paginator: MatPaginator;
-
-    constructor(private readonly store: Store<{ finance: { transactionTypes: ITransactionTypeState } }>) { }
-
-    ngAfterViewInit() {
-        this.paginator.page.subscribe((pageEvent: PageEvent) => {
+    set(paginator: MatPaginator) {
+        paginator.page.subscribe((pageEvent: PageEvent) => {
             this.store.dispatch(transactionTypesPageChanged({ event: pageEvent }));
         });
     }
+
+    constructor(private readonly store: Store<{ finance: { transactionTypes: ITransactionTypeState } }>) { }
+
 }

src/app/finance/transaction-type/transaction-type.component.html

@@ -3,19 +3,29 @@
         <span>Tipos de Despesas </span>
     </mat-card-title>
 
-    <mat-form-field>
-        <mat-select placeholder="Clinica" [value]="selectedClinic$ | async" (selectionChange)="clinicSelected($event)">
-            <mat-option [value]="clinic"  *ngFor="let clinic of clinic$ | async">{{clinic.name}}</mat-option>
-        </mat-select>
-    </mat-form-field>
-    <div fxLayout="row" fxLayoutAlign="end end">
+    <ng-container *ngIf="hasClinics$ | async">
+        <mat-form-field>
+            <mat-select placeholder="Clinica" [value]="selectedClinic$ | async"
+                (selectionChange)="clinicSelected($event)">
+                <mat-option [value]="clinic" *ngFor="let clinic of clinic$ | async">{{clinic.name}}</mat-option>
+            </mat-select>
+        </mat-form-field>
+        <div fxLayout="row" fxLayoutAlign="end end">
 
-    </div>
-    <h1 *ngIf="empty$ | async">SEM RESULTADOS</h1>
-    <h1 *ngIf="error$ | async">ERROOO</h1>
-    <h1 *ngIf="loading$ | async">CARREGANDOOOO</h1>
+        </div>
+        <app-transaction-type-list></app-transaction-type-list>
+    </ng-container>
 
-    <app-transaction-type-list>
+    <app-empty-state image="empty-box" *ngIf="empty$ | async">
+        <p>Você ainda não tem clinicas cadastradas.</p>
+        <p>Cadastre uma clinica para começar a gestão financeira</p>
+    </app-empty-state>
+
+    <app-empty-state image="error-cloud" *ngIf="error$ | async">
+        <p>Ocorreu um erro ao recuperar os dados</p>
+        <p>Tente novamente mais tarde</p>
+    </app-empty-state>
+
+    <mat-progress-bar mode="query" *ngIf="loading$ | async"></mat-progress-bar>
 
-    </app-transaction-type-list>
 </mat-card>

src/app/finance/transaction-type/transaction-type.component.ts

@@ -22,6 +22,7 @@ export class TransactionTypeComponent implements OnInit {
     empty$ = this.state$.pipe(map(v => v.clinic.empty));
     error$ = this.state$.pipe(map(v => v.clinic.error));
     loading$ = this.state$.pipe(map(v => v.clinic.loading));
+    hasClinics$ = this.state$.pipe(map(v => !v.clinic.empty && !v.clinic.error && !v.clinic.loading));
 
     constructor(private readonly store: Store<{ finance: { transactionTypes: ITransactionTypeState } }>) {
     }