add back icon

apps/fantalytic-mobile/src/app/fantasy-football/fantasy-football.component.ts

@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 import { Store } from '@ngrx/store';
 import { BehaviorSubject, combineLatest, filter, map, Observable, Subject, take, takeUntil } from 'rxjs';
 import { PositionTypes } from '../../../../../libs/fantalytic-shared/src';
+import { setHasBackButton } from '../ngrx/actions/shared.actions';
 import { loadDefenses, loadQbs, loadRbs, loadReceivers, setPositionType, updateYearFilter } from './ngrx/actions/fantasy-football.actions';
 import { getDefenses, getPosition, getQbs, getRbs, getReceivers, getSelectedYear } from './ngrx/selectors/fantasy-football.selectors';
 
@@ -193,6 +194,7 @@ export class FantasyFootballComponent implements OnInit, OnDestroy {
   }
 
   handlePlayerSelected(playerId: string): void {
+    this._store.dispatch(setHasBackButton(true));
     this._router.navigate(['tabs', 'fantasy-football', `player-details`, playerId]);
   }
 

apps/fantalytic-mobile/src/app/fantasy-football/player-detail/player-detail.component.html

@@ -1,10 +1,3 @@
-<ion-header>
-    <ion-toolbar>
-        <ion-buttons slot="start">
-            <ion-back-button></ion-back-button>
-        </ion-buttons>
-    </ion-toolbar>
-</ion-header>
 <ion-content *ngIf="player$ | async as player">
 
     <ion-card>

apps/fantalytic-mobile/src/app/fantasy-football/player-detail/player-detail.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable arrow-body-style */
-import { Component, inject } from '@angular/core';
+import { Component, inject, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
 import { combineLatest, EMPTY, map, shareReplay, switchMap } from 'rxjs';
@@ -8,6 +8,7 @@ import { getDefenses, getPosition, getQbs, getRbs, getReceivers } from '../ngrx/
 import { PositionTypes } from '../../../../../../libs/fantalytic-shared/src';
 import { IonicModule } from '@ionic/angular';
 import { FANTASY_FOOTBALL_STAT_HEADER_MAP } from '../const/fantasy-football.const';
+import { setHasBackButton } from 'src/app/ngrx/actions/shared.actions';
 
 @Component({
   selector: 'pmt-player-detail',
@@ -16,7 +17,7 @@ import { FANTASY_FOOTBALL_STAT_HEADER_MAP } from '../const/fantasy-football.cons
   templateUrl: './player-detail.component.html',
   styleUrls: ['./player-detail.component.scss'],
 })
-export class PlayerDetailComponent {
+export class PlayerDetailComponent implements OnDestroy {
 
   private _route = inject(ActivatedRoute);
   private _store = inject(Store);
@@ -62,4 +63,8 @@ export class PlayerDetailComponent {
     })
   );
 
+  ngOnDestroy(): void {
+    this._store.dispatch(setHasBackButton(false));
+  }
+
 }

apps/fantalytic-mobile/src/app/header/header.component.html

@@ -1,6 +1,11 @@
 <ion-header>
     <ion-toolbar>
-        <ion-title>Fantalytic.io</ion-title>
+        <ion-buttons *ngIf="hasBackButton$ | async" slot="start">
+            <ion-button (click)="goBack()">
+                <ion-icon slot="start" name="chevron-back-outline"></ion-icon>
+            </ion-button>
+        </ion-buttons>
+        <ion-title>Fantalytic.io</ion-title>        
         <ion-buttons slot="end">
             <ion-button id="click-trigger">
                 <ion-icon slot="icon-only" name="american-football-outline"></ion-icon>

apps/fantalytic-mobile/src/app/header/header.component.scss

@@ -4,4 +4,4 @@
 
 .active {
     color: rgb(66,140,255);
-}
+}

apps/fantalytic-mobile/src/app/header/header.component.ts

@@ -1,7 +1,11 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { IonicModule } from '@ionic/angular';
+import { Component, inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, NavController } from '@ionic/angular';
+import { Store } from '@ngrx/store';
 import { BehaviorSubject } from 'rxjs';
+import { setHasBackButton } from '../ngrx/actions/shared.actions';
+import { selectHasBackButton } from '../ngrx/selectors/shared.selectors';
 
 @Component({
   selector: 'pmt-header',
@@ -12,9 +16,19 @@ import { BehaviorSubject } from 'rxjs';
   exportAs: 'pmt-header'
 })
 export class HeaderComponent {
+
+  _store = inject(Store);
+  _controller = inject(NavController);
+
   activeModule$ = new BehaviorSubject<string>('Football');
+  hasBackButton$ = this._store.select(selectHasBackButton);
 
   switchActiveModule(module: string): void {
     this.activeModule$.next(module);
   }
+
+  goBack(): void {
+    this._controller.back();
+    this._store.dispatch(setHasBackButton(false));
+  }
 }

apps/fantalytic-mobile/src/app/ngrx/actions/shared.actions.ts

@@ -0,0 +1,6 @@
+import { createAction } from '@ngrx/store';
+
+export const setHasBackButton = createAction(
+    '[Shared] Set Has Back Button',
+    (hasBackButton: boolean) => ({hasBackButton})
+);

apps/fantalytic-mobile/src/app/ngrx/reducers/shared.reducer.ts

@@ -0,0 +1,18 @@
+import { createReducer, on } from '@ngrx/store';
+import { setHasBackButton } from '../actions/shared.actions';
+
+export interface SharedState {
+    hasBackButton: boolean;
+}
+
+export const initialState: SharedState = {
+    hasBackButton: false
+};
+
+export const sharedReducer = createReducer(
+    initialState,
+    on(
+        setHasBackButton,
+        (state, {hasBackButton}) => ({...state, hasBackButton})
+    )
+);

apps/fantalytic-mobile/src/app/ngrx/selectors/shared.selectors.ts

@@ -0,0 +1,9 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { SharedState } from '../reducers/shared.reducer';
+
+const selectSharedState = createFeatureSelector<SharedState>('shared');
+
+export const selectHasBackButton = createSelector(
+    selectSharedState,
+    state => state.hasBackButton
+);

apps/fantalytic-mobile/src/main.ts

@@ -12,6 +12,7 @@ import { TopicEffects } from './app/topics/ngrx/effects/topics.effects';
 import { topicsReducer } from './app/topics/ngrx/reducer/topics.reducer';
 import { environment } from './environments/environment';
 import { IonicModule } from '@ionic/angular';
+import { sharedReducer } from './app/ngrx/reducers/shared.reducer';
 
 if (environment.production) {
   enableProdMode();
@@ -53,6 +54,7 @@ bootstrapApplication(
         RouterModule.forRoot(routes),
         IonicModule.forRoot(),
         StoreModule.forRoot({}),
+        StoreModule.forFeature('shared', sharedReducer),
         EffectsModule.forRoot([]),
         StoreDevtoolsModule.instrument({}),
         HttpClientModule,