Merge branch '1-front-creer-la-page-choix-des-bars' into 'master'

Resolve "[FRONT] Créer la page : choix des bars"

Closes #1

See merge request !1

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

@@ -18,19 +18,21 @@ import { APP_ROUTING } from './app.routing';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+
+// others
 import { environment } from 'src/environments/environment';
 import { reducersMap } from './share/store';
 import { AuthEffects } from './share/store/effects/auth.effects';
-import { WelcomeComponent } from './components/welcome/welcome.component';
+import { BarEffects } from './share/store/effects/bar.effects';
 
 @NgModule({
-  declarations: [AppComponent, WelcomeComponent],
+  declarations: [AppComponent],
   imports: [
 		BrowserModule,
 		BrowserAnimationsModule,
 		RouterModule.forRoot(APP_ROUTING),
 		StoreModule.forRoot(reducersMap),
-		EffectsModule.forRoot([AuthEffects]),
+		EffectsModule.forRoot([AuthEffects, BarEffects]),
 		StoreDevtoolsModule.instrument({
 			name: 'Ngrx',
 			logOnly: environment.production

src/app/app.routing.ts

 import { Route } from "@angular/router";
+import { BarsComponent } from "./components/bars/bars.component";
 import { SigninComponent } from "./components/signin/signin.component";
 import { SignupComponent } from "./components/signup/signup.component";
 import { WelcomeComponent } from "./components/welcome/welcome.component";
@@ -9,9 +10,9 @@ export const APP_ROUTING: Route[] = [
 	{ path: 'welcome', canActivate: [AlreadyLoggedInGuard], component: WelcomeComponent },
 	{ path: 'photos', canActivate: [AuthGuard], loadChildren: () => import('./photos/photos.module').then(m => m.PhotosModule) },
 	{ path: 'profile', canActivate: [AuthGuard], loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) },
-	// { path: 'bars', canActivate: [AuthGuard], loadChildren: () => import('./bars/bars.module').then(m => m.BarsModule) },
+	{ path: 'bars', canActivate: [AuthGuard], component: BarsComponent },
 	{ path: 'signup', canActivate: [AlreadyLoggedInGuard], component: SignupComponent },
 	{ path: 'signin', canActivate: [AlreadyLoggedInGuard], component: SigninComponent },
-	{ path: '', redirectTo: 'welcome', pathMatch: 'full' },
-	{ path: '**', redirectTo: 'welcome', pathMatch: 'full' },
+	{ path: '', redirectTo: '', pathMatch: 'full' },
+	{ path: '**', redirectTo: '', pathMatch: 'full' },
 ];
\ No newline at end of file

src/app/components/bars/bars.component.css

+.logo-img {
+	height: 60px;
+	width: 60px;
+}
+
+.row-container {
+	display: flex;
+	flex-flow: row nowrap;
+	padding: 2px;
+}
+
+.center {
+	justify-content: center;
+	align-items: center;
+}
+
+.card {
+	background-color: #FFFFFF;
+	border-radius: 4px;
+	margin: 8px 15px;
+	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(34, 34, 34, 0.2);
+}
+
+.card-header, .card-actions {
+	background-color: inherit;
+	border: 0;
+	flex-grow: 0;
+	margin: 0;
+	padding: 0;
+}
+
+.card-actions {
+	flex-grow: 1;
+}
+
+.card-content {
+	flex-grow: 100;
+	text-align: start;
+}
+
+.card-content > p {
+	font-size: 0.9em;
+	font-weight: bold;
+	color: #6E2424;
+}
+
+
+.card-content > div {
+	font-size: 0.8em;
+}
+
+.card-action {
+	flex-grow: 1;
+}
+
+/* TOP NOTE */
+.top-note {
+	margin: 40px 15px;
+}
+
+.top-note > mat-icon {
+	weight: 50px;
+	height: 50px;
+	font-size: 50px;
+}
+
+.top-note > p {
+	font-weight: 500;
+} 
\ No newline at end of file

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

+<div class="row-container center top-note">
+	<mat-icon>store_mall_directory</mat-icon>
+	<p>Choisis ton lieu de beuverie.
+		Tu pourras ensuite accéder à la carte des boissons.</p>
+	</div>
+<section>
+	<div *ngFor="let bar of (bars$ | async)" class=" card row-container center">
+		<div class="card-header">
+			<img class="logo-img" src="https://fakeimg.pl/300/" alt="fake-img">
+		</div>
+		<div class="card-content">
+			<p>{{ bar.longname }}</p>
+			<div>{{ bar.address }}</div>
+		</div>
+		<div class="card-action">
+			<button mat-raised-button color='accent'>choisir</button>
+		</div>
+	</div>
+</section>
+<!-- <section>
+	<div class=" card row-container center">
+		<div class="card-header">
+			<img class="logo-img" src="https://fakeimg.pl/300/" alt="fake-img">
+		</div>
+		<div class="card-content">
+			<p>Déliriuem Café clermont-ferrand</p>
+			<div>{{ bar.address }}</div>
+		</div>
+		<div class="card-action">
+			<button mat-raised-button color='accent'>choisir</button>
+		</div>
+	</div>
+</section> -->

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

+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Bar } from '../../share/models/bar.model';
+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',
+  templateUrl: './bars.component.html',
+  styleUrls: ['./bars.component.css']
+})
+export class BarsComponent implements OnInit {
+	public bars$: Observable<Bar[]> = this.store.select(allBarsSelector);
+
+  constructor(
+		private store: Store<State>,
+	) {}
+
+  ngOnInit(): void {
+		this.store.dispatch(new FetchBars());
+	}
+}

src/app/photos/photos.component.ts

@@ -22,8 +22,6 @@ export class PhotosComponent implements OnInit {
 		private notificationService: NotificationService
 	) {
 		this.swUpdate.available.subscribe((version) => {
-			console.log(version);
-
 			if (version) {
 				this.swUpdate.activateUpdate().then(() => {
 					window.location.reload();

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/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/profile/profile.component.html

-<p>profile works!</p>
\ No newline at end of file
+<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>
+</p>
\ No newline at end of file

src/app/profile/profile.component.ts

@@ -19,7 +19,6 @@ export class ProfileComponent implements OnInit {
   ngOnInit(): void {
 		this.currentUser$ = this.store.pipe(select(userAuthSelector));
 		this.store.dispatch(new TryFetchCurrentUser());
-		console.log('finishing init');
 	}
 
 }

src/app/share/components/topbar/topbar.component.html

 <mat-toolbar *ngIf="isLoggedIn$ | async" color="primary" fxLayoutGap="15px">
-	<span routerLink="/">Mon logo</span>
+	<span routerLink="/welcome">Mon logo</span>
 	<!-- <span *ngIf="!(isLoggedIn$ | async)" fxLayoutGap="15px" fxLayout="row" fxLayoutAlign="center center">
 		<mat-icon class="link" routerLink="/signin">login</mat-icon>
 		<mat-icon class="link" routerLink="/signup">launch</mat-icon>

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/modules/core.module.ts

@@ -21,10 +21,14 @@ import { TopbarComponent } from '../components/topbar/topbar.component';
 // Interceptors
 import { AuthInterceptor } from '../interceptors/auth.interceptor';
 import { ReactiveFormsModule } from '@angular/forms';
+import { WelcomeComponent } from 'src/app/components/welcome/welcome.component';
+import { BarsComponent } from 'src/app/components/bars/bars.component';
 
 const COMPONENTS = [
 	SignupComponent,
 	SigninComponent,
+	WelcomeComponent,
+	BarsComponent,
 	TopbarComponent
 ];
 

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

@@ -50,14 +50,14 @@ export class AuthService {
 	}
 
 	public refreshToken(): Observable<string> {
-		return this.http.get<string>('/api/auth/refresh_token');
+		return this.http.get<string>('/api/v1/auth/refresh_token');
 	}
 	
 	public signup(user: User): Observable<User> {
-		return this.http.post<User>('/api/auth/signup', user);
+		return this.http.post<User>('/api/v1/auth/signup', user);
 	}
 
 	public signin(credentials: { email: string, password: string}): Observable<string> {
-		return this.http.post<string>('/api/auth/signin', credentials);
+		return this.http.post<string>('/api/v1/auth/signin', credentials);
 	}
 }

src/app/share/services/bar.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 BarService {
+
+  constructor(private http: HttpClient) {}
+
+	// authInterceptor add the token in the HTTP request
+	public getAll(): Observable<Bar[]> {
+		return this.http.get<Bar[]>('/api/v1/bars');
+	} 
+}

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

@@ -22,7 +22,7 @@ export class NotificationService {
 		.then((sub: PushSubscription) => {
 			console.log(`l'utilisateur a accepté les notifications`, sub);
 		
-			this.http.post(`/api/notifications`, sub)
+			this.http.post(`/api/v1/notifications`, sub)
 			.subscribe(
 				() => {
 					console.log(`La souscription a bien été enregistrée pour cet utilisateur`);
@@ -37,6 +37,6 @@ export class NotificationService {
 	}
 
 	public sendTestNotification(): void {
-		this.http.get('/api/notifications/test').subscribe();
+		this.http.get('/api/v1/notifications/test').subscribe();
 	}
 }

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

@@ -11,6 +11,6 @@ export class UserService {
 	
 	// on crée un interceptor pour ajouter le token dans la requete HTTP
 	public getCurrentUser(): Observable<User> {
-		return this.http.get<User>('/api/user/current');
+		return this.http.get<User>('/api/v1/user/current');
 	}
 }

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

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