create action, reducer, effect and selector for fetching bars

need to handle error in FetchBars effect

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

@@ -2,4 +2,7 @@
 <p>
 	<button mat-raised-button routerLink="/profile" color="primary">profile</button>
 	<button mat-raised-button routerLink="/photos" color="accent">photos</button>
-</p>
+</p>
\ No newline at end of file
+	<ul>
+	<li *ngFor="let bar of bars">{{ 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 { Observable } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+import { Bar } from '../../share/models/bar.model';
+import { BarsService } from '../../share/services/bars.service';
 
 @Component({
   selector: 'app-bars',
@@ -6,9 +10,19 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./bars.component.css']
 })
 export class BarsComponent implements OnInit {
+	public bars: Bar[];
 
-  constructor() {}
-
-  ngOnInit(): void {}
+  constructor(private barsService: BarsService) {}
 
+  ngOnInit(): void {
+		this.barsService.getAllBars().pipe(
+			map((bars: Bar[]) => {
+				console.log(bars);
+				this.bars = bars;
+			}),
+			catchError((err) => {
+				console.log(err);
+			})
+		);
+	}
 }

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

@@ -3,7 +3,7 @@ import { Photo } from "../models/photo.model";
 
 export interface PhotosState {
 	photos: Photo[];
-	filter:string;
+	filter: string;
 }
 
 const defaultPhotoState = {

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

@@ -2,5 +2,7 @@ import { createFeatureSelector, createSelector } from "@ngrx/store";
 import { PhotosState } from "./photos.reducers";
 
 export const baseSelector = createFeatureSelector('photos');
+
 export const filterPhotosSelector = createSelector(baseSelector, (photosState: PhotosState) => photosState?.filter);
+
 export const photosSelector = createSelector(baseSelector, (photosState: PhotosState) => photosState?.photos);
\ No newline at end of file

src/app/share/models/bar.model.ts

+export interface Bar {
+	shortname: string;
+	longname: string;
+	description: string;
+	adress: string;
+	logo: string;
+}
\ No newline at end of file

src/app/share/services/bars.service.ts

+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Bar } from '../models/bar.model';
 
 @Injectable({
   providedIn: 'root'
 })
 export class BarsService {
 
-  constructor() { }
+  constructor(private http: HttpClient) {}
+
+	// authInterceptor add the token in the HTTP request
+	public getAllBars(): Observable<Bar[]> {
+		return this.http.get<Bar[]>('/api/bars');
+	}
 }

src/app/share/store/actions/bars.actions.ts

+import { Action } from "@ngrx/store";
+import { Bar } from "../../models/bar.model";
+
+export enum BarsActionsTypes {
+	FETCH_BARS = '[bars/api] fetch all bars',
+	FETCH_BARS_SUCCESS = '[bars/api] fetch bars success'
+}
+
+export class FetchBars implements Action {
+	readonly type = BarsActionsTypes.FETCH_BARS;
+}
+
+export class FetchBarsSuccess implements Action {
+	readonly type = BarsActionsTypes.FETCH_BARS_SUCCESS;
+	constructor(public payload: Bar[]) {}
+}
+
+export type BarsAction = FetchBars | FetchBarsSuccess;
\ No newline at end of file

src/app/share/store/effects/bars.effects.ts

+import { Injectable } from "@angular/core";
+import { Actions, Effect, ofType } from "@ngrx/effects";
+import { Store } from "@ngrx/store";
+import { catchError, map, switchMap } from "rxjs/operators";
+
+import { State } from "../../../share/store";
+import { Bar } from "../../models/bar.model";
+import { BarsService } from "../../services/bars.service";
+import { BarsActionsTypes, FetchBarsSuccess } from "../actions/bars.actions";
+
+@Injectable()
+export class BarsEffect {
+	constructor(
+		private actions$: Actions,
+		private store: Store<State>,
+		private barssService: BarsService
+	) {}
+
+	@Effect()
+	FetchBars$ = this.actions$.pipe(
+		ofType(BarsActionsTypes.FETCH_BARS),
+		switchMap(() => {
+			return this.barssService.getAllBars();
+		}),
+		map((bars: Bar[]) => {
+			return new FetchBarsSuccess(bars);
+		}),
+		// catchError((err) => {
+		// 	console.log(err);
+		// })
+	);
+}
\ No newline at end of file

src/app/share/store/index.ts

 import { ActionReducerMap } from "@ngrx/store";
 import { authReducer, AuthState } from "./reducers/auth.reducers";
+import { barsReducer, BarsState } from "./reducers/bars.reducers";
 
 export interface State {
 	auth: AuthState;
+	bars: BarsState;
 }
 
 export const reducersMap: ActionReducerMap<State> = {
-	auth: authReducer
+	auth: authReducer,
+	bars: barsReducer
 };
\ No newline at end of file

src/app/share/store/reducers/bars.reducers.ts

+import { PhotosAction, PhotosActionsTypes } from "./photos.actions";
+import { Photo } from "../models/photo.model";
+import { Bar } from "../../models/bar.model";
+import { BarsAction, BarsActionsTypes } from "../actions/bars.actions";
+
+export interface BarsState {
+	bars: Bar[];
+	currentBar: Bar;
+}
+
+const defaultBarState = {
+	bars: [],
+	currentBar: null
+}
+
+export function barsReducer(state: BarsState = defaultBarState, action: BarsAction): BarsState {
+	switch (action.type) {
+
+		case BarsActionsTypes.FETCH_BARS_SUCCESS: {
+			return {
+				...state,
+				bars: action.payload
+			};
+		}
+	}
+
+	return state;
+}
\ No newline at end of file

src/app/share/store/selectors/bars.selectors.ts

+import { createFeatureSelector, createSelector } from "@ngrx/store";
+import { BarsState } from "../reducers/bars.reducers";
+
+export const baseSelector = createFeatureSelector('bars');
+
+export const allBarsSelector = createSelector(baseSelector, (barsState: BarsState) => barsState?.bars);
+
+export const currentBarSelector = createSelector(baseSelector, (barsState: BarsState) => barsState?.currentBar);
\ No newline at end of file