change barEffects to fetch all bars from server call

proxy.conf.json

 {
-  "/api": {
-    "target": "http://localhost:3000",
-		"secure": false
-  }
+	"/api/*": {
+		"target": "http://localhost:3000",
+		"secure": false,
+		"logLevel": "debug",
+		"changeOrigin": true
+	}
 }
\ No newline at end of file

src/app/app.module.ts

@@ -23,6 +23,7 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { environment } from 'src/environments/environment';
 import { reducersMap } from './share/store';
 import { AuthEffects } from './share/store/effects/auth.effects';
+import { BarEffects } from './share/store/effects/bar.effects';
 
 @NgModule({
   declarations: [AppComponent],
@@ -31,7 +32,7 @@ import { AuthEffects } from './share/store/effects/auth.effects';
 		BrowserAnimationsModule,
 		RouterModule.forRoot(APP_ROUTING),
 		StoreModule.forRoot(reducersMap),
-		EffectsModule.forRoot([AuthEffects]),
+		EffectsModule.forRoot([AuthEffects, BarEffects]),
 		StoreDevtoolsModule.instrument({
 			name: 'Ngrx',
 			logOnly: environment.production

src/app/components/bars/bars.component.html

@@ -3,6 +3,6 @@
 	<button mat-raised-button routerLink="/profile" color="primary">profile</button>
 	<button mat-raised-button routerLink="/photos" color="accent">photos</button>
 </p>
-	<ul>
-	<li *ngFor="let bar of bars">{{ bar.shortname }} - {{ bar.longname }}</li>
+<ul>
+	<li *ngFor="let bar of (bars$ | async)">{{ bar.shortname }} - {{ bar.longname }}</li>
 </ul>
\ No newline at end of file

src/app/components/bars/bars.component.ts

 import { Component, OnInit } from '@angular/core';
-import { EMPTY, of } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
+import { Observable } from 'rxjs';
 import { Bar } from '../../share/models/bar.model';
-import { BarsService } from '../../share/services/bars.service';
+import { Store } from '@ngrx/store';
+import { State } from '../../share/store';
+import { allBarsSelector } from '../../share/store/selectors/bar.selectors';
+import { BarActionsTypes, FetchBars, FetchBarsSuccess } from 'src/app/share/store/actions/bar.actions';
+import { BarService } from 'src/app/share/services/bar.service';
 
 @Component({
   selector: 'app-bars',
@@ -10,19 +13,13 @@ import { BarsService } from '../../share/services/bars.service';
   styleUrls: ['./bars.component.css']
 })
 export class BarsComponent implements OnInit {
-	public bars: Bar[];
+	public bars$: Observable<Bar[]> = this.store.select(allBarsSelector);
 
-  constructor(private barsService: BarsService) {}
+  constructor(
+		private store: Store<State>,
+	) {}
 
   ngOnInit(): void {
-		this.barsService.getAllBars().pipe(
-			map((bars: Bar[]) => {
-				this.bars = bars;
-			}),
-			catchError((error: any) => {
-				return EMPTY;
-			}
-			),
-		);
+		this.store.dispatch(new FetchBars());
 	}
 }

src/app/photos/shared/store/photos.effects.ts

 import { Injectable } from "@angular/core";
 import { Actions, Effect, ofType } from "@ngrx/effects";
 import { select, Store } from "@ngrx/store";
-import { debounceTime, map, switchMap, take } from "rxjs/operators";
+import { debounceTime, map, switchMap, take, tap } from "rxjs/operators";
 
 import { State } from "../../../share/store";
 import { Photo } from "../models/photo.model";

src/app/profile/profile.component.html

 <p>profile works!</p>
+<p *ngIf="(currentUser$ | async) as user">
+	{{ user.email }} - {{ user.pseudo }}
+</p>
 <p>
 	<button mat-raised-button routerLink="/bars" color="primary">Liste des bars</button>
 	<button mat-raised-button routerLink="/photos" color="accent">photos</button>