Merge pull request #49 from mihaiborbea/40-avatar-is-not-taken-from-s…

…ocial-login

40 avatar is not taken from social login

src/app/auth/state/auth.effects.ts

@@ -216,8 +216,12 @@ export class AuthEffects {
 
   private async handleAutomaticAuthentication(authData) {
     const token = await authData.getIdToken();
-    console.log('AUTOLOGIN', authData);
-    const user = new User(authData.uid, authData.email, token, '');
+    const user = new User(
+      authData.uid,
+      authData.email,
+      token,
+      authData.photoURL
+    );
     return AuthActions.authenticateSuccess({ user, redirect: true });
   }
 

src/app/layout/header/header.component.html

@@ -1,29 +1,27 @@
 <mat-toolbar color="primary">
-  <div class="flex flex-row lg:place-content-center items-center justify-between justify-items-stretch w-full">
-    <div *ngIf="user$ | async" class="sm:hidden">
+  <div class="flex flex-row gap-8 items-center w-full">
+    <div id="hamburger" *ngIf="user$ | async" class="md:hidden">
       <button mat-icon-button (click)="onToggleSidenav()">
         <mat-icon>menu</mat-icon>
       </button>
     </div>
-    <div class="place-content-start w-1/9 sm:w-[10%] w-[90%] mr-4">
+    <div id="logo" class="content-center md:content-start">
       <a routerLink="/">
         <img title="logo" src="../../../assets/logo/brand-logo-mono-black.png" class="sm:max-w-[70px] max-w-[60px]" />
       </a>
     </div>
-    <div class="hidden sm:flex flex-row grow 2xl:content-center 2xl:justify-center max-w-[80%]">
+    <div id="menu" class="hidden md:flex flex-row content-center">
       <ul class="flex gap-4 list-none text-xl">
         <li *ngIf="(user$ | async)">
           <a routerLink="/" routerLinkActive="active">Recipes</a>
         </li>
       </ul>
     </div>
-    <div *ngIf="(user$ | async)" class="flex flex-row content-center place-content-end justify-end w-[5%] mr-4">
-      <button mat-basic-button routerLink="/shopping-list">
+    <div id="toolbar" *ngIf="(user$ | async)" class="flex flex-row grow justify-end gap-10 mr-4">
+      <button class="block" mat-basic-button routerLink="/shopping-list">
         <mat-icon matBadge="0" matBadgeOverlap="false" matBadgeColor="accent">add_shopping_cart</mat-icon>
       </button>
-    </div>
-    <div *ngIf="(user$ | async)" class="hidden sm:flex flex-row grow content-center justify-end max-w-[5%]">
-      <button mat-basic-button [matMenuTriggerFor]="menu">
+      <button class="hidden md:block" mat-basic-button [matMenuTriggerFor]="menu">
         <img
           [src]="(user$ | async).profile.avatarUrl ? (user$ | async).profile.avatarUrl : '../../../assets/icons/user-avatar.svg'" />
       </button>

src/app/recipes/recipe-list/recipe-item/recipe-item.component.html

@@ -1,15 +1,24 @@
 <a [routerLink]="[recipe.id]" routerLinkActive="active" class="no-underline">
-  <mat-card class="flex flex-col h-[100%] p-3">
-    <mat-card-header class="p-0">
-      <mat-card-title class="p-0">
-        <span class="font-semibold text-lg m-0">{{ recipe.name }}</span>
-      </mat-card-title>
-    </mat-card-header>
-    <mat-card-content class="flex flex-row content-start justify-start grow p-0 w-full h-[120px]">
-      <div class="w-[70%] h-32 overflow-hidden p-0">
-        <span>{{ recipe.description }}</span>
-      </div>
-      <img class="w-[30%] h-[90%]" mat-card-image [src]="recipe?.image?.url" [alt]="recipe.name" />
-    </mat-card-content>
+  <mat-card class="flex flex-row h-[100%]">
+    <div class="flex flex-col w-[60%] py-3 pl-3">
+      <mat-card-header class="p-0">
+        <mat-card-title class="p-0">
+          <span class="font-semibold text-lg m-0">{{ recipe.name }}</span>
+        </mat-card-title>
+      </mat-card-header>
+      <mat-card-content class="flex flex-row content-start justify-start grow p-0 w-full h-[120px]">
+        <div class="w-[70%] h-32 overflow-hidden p-0">
+          <span>{{ recipe.description }}</span>
+        </div>
+      </mat-card-content>
+      <mat-card-actions align="start">
+        <button mat-flat-button color="primary" type=" button" (click)="onAddToShoppingList()">
+          <span>Add to shopping list</span>
+        </button>
+      </mat-card-actions>
+    </div>
+    <div class="h-[225px] w-[40%] ">
+      <img class="h-full w-full rounded-r-md" mat-card-image [src]="recipe?.image?.url" [alt]="recipe.name" />
+    </div>
   </mat-card>
 </a>

src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts

@@ -1,5 +1,9 @@
 import { Component, Input } from '@angular/core';
+import { Store } from '@ngrx/store';
+
 import { Recipe } from '../../domain/recipe.model';
+import * as RecipesActions from '../../state/recipes.actions';
+import { AppState } from 'src/app/core/state/app.store';
 
 @Component({
   selector: 'app-recipe-item',
@@ -25,4 +29,14 @@ import { Recipe } from '../../domain/recipe.model';
 })
 export class RecipeItemComponent {
   @Input() recipe: Recipe;
+
+  constructor(private store: Store<AppState>) {}
+
+  onAddToShoppingList() {
+    this.store.dispatch(
+      RecipesActions.addRecipeToShoppingList({
+        recipe: this.recipe,
+      })
+    );
+  }
 }