Merge pull request #52 from mihaiborbea/41-my-recipes-page-is-not-fil…

…tering-recipes

41 my recipes page is not filtering recipes

angular.json

@@ -11,24 +11,24 @@
         }
       },
       "root": "",
-      "sourceRoot": "src",
+      "sourceRoot": "client",
       "prefix": "app",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "outputPath": "dist/recipe-app",
-            "index": "src/index.html",
-            "main": "src/main.ts",
+            "index": "client/index.html",
+            "main": "client/main.ts",
             "aot": true,
-            "polyfills": "src/polyfills.ts",
+            "polyfills": "client/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "assets": [
-              "src/favicon.ico",
-              "src/assets",
-              "src/manifest.webmanifest"
+              "client/favicon.ico",
+              "client/assets",
+              "client/manifest.webmanifest"
             ],
-            "styles": ["src/scss/theme.scss", "src/scss/styles.scss"],
+            "styles": ["client/scss/theme.scss", "client/scss/styles.scss"],
             "scripts": [],
             "serviceWorker": true,
             "ngswConfigPath": "ngsw-config.json"
@@ -49,8 +49,8 @@
               ],
               "fileReplacements": [
                 {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
+                  "replace": "client/environments/environment.ts",
+                  "with": "client/environments/environment.prod.ts"
                 }
               ],
               "outputHashing": "all"
@@ -87,23 +87,23 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "main": "client/test.ts",
+            "polyfills": "client/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": [
-              "src/favicon.ico",
-              "src/assets",
-              "src/manifest.webmanifest"
+              "client/favicon.ico",
+              "client/assets",
+              "client/manifest.webmanifest"
             ],
-            "styles": ["src/scss/theme.scss", "src/scss/styles.scss"],
+            "styles": ["client/scss/theme.scss", "client/scss/styles.scss"],
             "scripts": []
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+            "lintFilePatterns": ["client/**/*.ts", "client/**/*.html"]
           }
         },
         "deploy": {

src/app/core/core.module.ts → client/app/core/core.module.ts

@@ -14,7 +14,7 @@ import { getStorage, provideStorage } from '@angular/fire/storage';
 import { metaReducers } from './state/meta.reducers';
 import { CoreEffects } from './state/core.effects';
 import { AuthEffects } from '../auth/state/auth.effects';
-import { environment } from 'src/environments/environment';
+import { environment } from 'client/environments/environment';
 import { appReducer } from './state/app.store';
 
 @NgModule({

client/app/core/resolvers/recipes.resolver.ts

@@ -0,0 +1,58 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Observable, of } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { Actions, ofType } from '@ngrx/effects';
+import { switchMap, take } from 'rxjs/operators';
+
+import { Recipe } from '../../recipes/domain/recipe.model';
+import * as RecipesActions from '../../recipes/state/recipes.actions';
+import {
+  selectAllRecipes,
+  selectUserRecipes,
+} from 'client/app/recipes/state/recipes.selectors';
+import { AppState } from '../state/app.store';
+
+@Injectable({ providedIn: 'root' })
+export class RecipesResolver {
+  constructor(private store: Store<AppState>, private actions$: Actions) {}
+
+  resolve(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ):
+    | { recipes: Recipe[] }
+    | Observable<{ recipes: Recipe[] }>
+    | Promise<{ recipes: Recipe[] }> {
+    console.log('recipes.resolver: state', state);
+    const userOrAllRecipes = state.url.startsWith('/my-recipes')
+      ? 'User'
+      : 'All';
+    console.log('recipes.resolver: userOrAllRecipes', userOrAllRecipes);
+    return this.store
+      .select(
+        userOrAllRecipes === 'User' ? selectUserRecipes : selectAllRecipes
+      )
+      .pipe(
+        take(1),
+        switchMap((recipes) => {
+          if (recipes.length === 0) {
+            this.store.dispatch(
+              RecipesActions[`fetch${userOrAllRecipes}Recipes`]()
+            );
+            return userOrAllRecipes === 'User'
+              ? this.actions$.pipe(
+                  ofType(RecipesActions.SET_USER_RECIPES),
+                  take(1)
+                )
+              : this.actions$.pipe(
+                  ofType(RecipesActions.SET_ALL_RECIPES),
+                  take(1)
+                );
+          } else {
+            return of({ recipes });
+          }
+        })
+      );
+  }
+}

src/app/core/resolvers/shopping-list.resolver.ts → client/app/core/resolvers/shopping-list.resolver.ts

@@ -5,8 +5,8 @@ import { Store } from '@ngrx/store';
 import { Actions, ofType } from '@ngrx/effects';
 import { switchMap, take } from 'rxjs/operators';
 
-import { ShoppingList } from 'src/app/shopping-list/domain/shopping-list.model';
-import { selectShoppingList } from 'src/app/shopping-list/state/shopping-list.selectors';
+import { ShoppingList } from 'client/app/shopping-list/domain/shopping-list.model';
+import { selectShoppingList } from 'client/app/shopping-list/state/shopping-list.selectors';
 import * as ShoppingListActions from '../../shopping-list/state/shopping-list.actions';
 import { AppState } from '../state/app.store';
 

src/app/core/services/auth.service.ts → client/app/core/services/auth.service.ts

@@ -17,7 +17,7 @@ import {
   getRedirectResult,
 } from '@angular/fire/auth';
 import { from, Observable } from 'rxjs';
-import { AuthErrorCodes } from 'src/app/auth/domain/errorCodes';
+import { AuthErrorCodes } from 'client/app/auth/domain/errorCodes';
 
 @Injectable({ providedIn: 'root' })
 export class AuthService {

src/app/core/services/environment-service.service.ts → client/app/core/services/environment-service.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 
-import { IEnvironment } from 'src/environments/ienvironment';
-import { environment } from 'src/environments/environment';
+import { IEnvironment } from 'client/environments/ienvironment';
+import { environment } from 'client/environments/environment';
 
 @Injectable({
   providedIn: 'root',

src/app/core/state/core.effects.ts → client/app/core/state/core.effects.ts

@@ -25,7 +25,8 @@ export class CoreEffects {
   hideLoadingBar$ = createEffect(() =>
     this.actions$.pipe(
       ofType(
-        RecipesActions.setRecipes,
+        RecipesActions.setAllRecipes,
+        RecipesActions.setUserRecipes,
         ShoppingListActions.setShoppingList,
         AuthActions.authenticateSuccess,
         AuthActions.authenticateFail

src/app/layout/header/header.component.ts → client/app/layout/header/header.component.ts

@@ -3,9 +3,9 @@ import { Subject } from 'rxjs';
 import { Store } from '@ngrx/store';
 
 import * as AuthActions from '../../auth/state/auth.actions';
-import { selectAuthUser } from 'src/app/auth/state/auth.selectors';
-import { AppState } from 'src/app/core/state/app.store';
-import { selectIngredientsCount } from 'src/app/shopping-list/state/shopping-list.selectors';
+import { selectAuthUser } from 'client/app/auth/state/auth.selectors';
+import { AppState } from 'client/app/core/state/app.store';
+import { selectIngredientsCount } from 'client/app/shopping-list/state/shopping-list.selectors';
 
 @Component({
   selector: 'app-header',

src/app/layout/loading-bar/loading-bar.component.ts → client/app/layout/loading-bar/loading-bar.component.ts

@@ -8,8 +8,8 @@ import {
 import { Store } from '@ngrx/store';
 import { Subscription } from 'rxjs';
 
-import { AppState } from 'src/app/core/state/app.store';
-import { selectCoreLoading } from 'src/app/core/state/core.selector';
+import { AppState } from 'client/app/core/state/app.store';
+import { selectCoreLoading } from 'client/app/core/state/core.selector';
 
 @Component({
   selector: 'app-loading-bar',

src/app/layout/sidenav-list/sidenav-list.component.html → client/app/layout/sidenav-list/sidenav-list.component.html

@@ -1,11 +1,11 @@
 <mat-nav-list class="flex flex-col list-none justify-items-stretch h-full">
-  <mat-list-item class="justify-start" routerLink="/recipes" (click)="onSidenavClose()">
+  <mat-list-item class="justify-start" routerLink="/recipes" (click)="onSidenavClose()" routerLinkActive="active">
     <span class="flex flex-row items-center">
       <mat-icon>restaurant_menu</mat-icon>
       <span class="nav-caption">Recipes</span>
     </span>
   </mat-list-item>
-  <mat-list-item class="justify-end" routerLink="/my-recipes" routerLinkActive="active">
+  <mat-list-item class="justify-end" routerLink="/my-recipes" (click)="onSidenavClose()" routerLinkActive="active">
     <span class="flex flex-row items-center">
       <mat-icon>menu_book</mat-icon>
       <span>My Recipes</span>

src/app/layout/sidenav-list/sidenav-list.component.ts → client/app/layout/sidenav-list/sidenav-list.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 import { Store } from '@ngrx/store';
 
-import { AppState } from 'src/app/core/state/app.store';
+import { AppState } from 'client/app/core/state/app.store';
 import * as AuthActions from '../../auth/state/auth.actions';
 
 @Component({

src/app/recipes/recipe-detail/recipe-detail.component.ts → client/app/recipes/recipe-detail/recipe-detail.component.ts

@@ -6,8 +6,11 @@ import { Subject } from 'rxjs';
 
 import { Recipe } from '../domain/recipe.model';
 import * as RecipesActions from '../state/recipes.actions';
-import { selectRecipes } from '../state/recipes.selectors';
-import { AppState } from 'src/app/core/state/app.store';
+import {
+  selectAllRecipes,
+  selectUserRecipes,
+} from '../state/recipes.selectors';
+import { AppState } from 'client/app/core/state/app.store';
 
 @Component({
   selector: 'app-recipe-detail',
@@ -25,11 +28,20 @@ export class RecipeDetailComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
+    console.log('recipes.resolver: this.router', this.router);
+    const userOrAllRecipes = this.router.url.startsWith('/my-recipes')
+      ? 'User'
+      : 'All';
+    console.log('recipes.resolver: userOrAllRecipes', userOrAllRecipes);
     this.route.params
       .pipe(
         takeUntil(this.destroy$),
         map((params) => params['id']),
-        withLatestFrom(this.store.select(selectRecipes)),
+        withLatestFrom(
+          this.store.select(
+            userOrAllRecipes === 'User' ? selectUserRecipes : selectAllRecipes
+          )
+        ),
         map(([id, recipes]) => {
           return recipes.find((recipe) => recipe.id === id);
         })

src/app/recipes/recipe-edit/recipe-edit.component.ts → client/app/recipes/recipe-edit/recipe-edit.component.ts

@@ -1,17 +1,25 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { UntypedFormArray, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import {
+  UntypedFormArray,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { takeUntil, withLatestFrom } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 
 import * as RecipesActions from '../state/recipes.actions';
-import { selectRecipes } from '../state/recipes.selectors';
+import {
+  selectAllRecipes,
+  selectUserRecipes,
+} from '../state/recipes.selectors';
 import { Recipe } from '../domain/recipe.model';
-import { AppState } from 'src/app/core/state/app.store';
-import { User } from 'src/app/auth/domain/user.model';
-import { selectAuthUser } from 'src/app/auth/state/auth.selectors';
-import { FileUpload } from 'src/app/shared/domain/fileupload.model';
+import { AppState } from 'client/app/core/state/app.store';
+import { User } from 'client/app/auth/domain/user.model';
+import { selectAuthUser } from 'client/app/auth/state/auth.selectors';
+import { FileUpload } from 'client/app/shared/domain/fileupload.model';
 
 @Component({
   selector: 'app-recipe-edit',
@@ -36,12 +44,18 @@ export class RecipeEditComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    console.log('HERE');
+    console.log('recipes.resolver: this.router', this.router);
+    const userOrAllRecipes = this.router.url.startsWith('/my-recipes')
+      ? 'User'
+      : 'All';
+    console.log('recipes.resolver: userOrAllRecipes', userOrAllRecipes);
     this.route.params
       .pipe(
         takeUntil(this.destroy$),
         withLatestFrom(
-          this.store.select(selectRecipes),
+          this.store.select(
+            userOrAllRecipes === 'User' ? selectUserRecipes : selectAllRecipes
+          ),
           this.store.select(selectAuthUser)
         )
       )

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

@@ -3,7 +3,7 @@ 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';
+import { AppState } from 'client/app/core/state/app.store';
 
 @Component({
   selector: 'app-recipe-item',

src/app/recipes/recipe-list/recipe-list.component.ts → client/app/recipes/recipe-list/recipe-list.component.ts

@@ -5,8 +5,11 @@ import { Store } from '@ngrx/store';
 import { takeUntil } from 'rxjs/operators';
 
 import { Recipe } from '../domain/recipe.model';
-import { selectRecipes } from '../state/recipes.selectors';
-import { AppState } from 'src/app/core/state/app.store';
+import {
+  selectAllRecipes,
+  selectUserRecipes,
+} from '../state/recipes.selectors';
+import { AppState } from 'client/app/core/state/app.store';
 
 @Component({
   selector: 'app-recipe-list',
@@ -24,8 +27,15 @@ export class RecipeListComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
+    console.log('recipes.resolver: this.router', this.router);
+    const userOrAllRecipes = this.router.url.startsWith('/my-recipes')
+      ? 'User'
+      : 'All';
+    console.log('recipes.resolver: userOrAllRecipes', userOrAllRecipes);
     this.store
-      .select(selectRecipes)
+      .select(
+        userOrAllRecipes === 'User' ? selectUserRecipes : selectAllRecipes
+      )
       .pipe(takeUntil(this.destroy$))
       .subscribe((recipes: Recipe[]) => {
         this.recipes = recipes;

client/app/recipes/recipe-start/recipe-start.component.html

@@ -0,0 +1 @@
+<span class="hidden md:flex flex-row text-2xl font-bold">Please select a recipe!</span>

client/app/recipes/recipe-start/recipe-start.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-recipe-start',
+  templateUrl: './recipe-start.component.html',
+})
+export class RecipeStartComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {
+    console.log('WHYYYYYYYYYYYYYYYYYYY?!');
+  }
+}

src/app/recipes/recipes.component.html → client/app/recipes/recipes.component.html

@@ -3,7 +3,7 @@
     <app-recipe-list></app-recipe-list>
   </div>
   <div class="flex flex-row w-[6%] md:hidden content-center" [ngClass]="{'hidden': hideBackBtn || !hideList }"
-    routerLink="/recipes">
+    routerLink="..">
     <button type="button" class="flex flex-row items-center gap-2 p-0">
       <mat-icon color="accent">arrow_back</mat-icon>
       <span class="text-lime-300">Back</span>