;
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [RecipeViewCard]
- })
- .compileComponents();
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [RecipeViewCard],
+ }).compileComponents();
- fixture = TestBed.createComponent(RecipeViewCard);
- component = fixture.componentInstance;
- await fixture.whenStable();
- });
+ fixture = TestBed.createComponent(RecipeViewCard);
+ component = fixture.componentInstance;
+ await fixture.whenStable();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/src/app/recipe-view/recipe-view-card/recipe-view-card.component.ts b/src/app/recipe-view/recipe-view-card/recipe-view-card.component.ts
index da788e3..338d62f 100644
--- a/src/app/recipe-view/recipe-view-card/recipe-view-card.component.ts
+++ b/src/app/recipe-view/recipe-view-card/recipe-view-card.component.ts
@@ -1,18 +1,22 @@
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
import { Recipe } from '../../model/Recipe.model';
-import { NgOptimizedImage } from '@angular/common';
+import { injectQuery } from '@tanstack/angular-query-experimental';
+import { ImageService } from '../../service/image.service';
@Component({
- selector: 'app-recipe-view-card',
- imports: [
- NgOptimizedImage
- ],
- templateUrl: './recipe-view-card.component.html',
- styleUrl: './recipe-view-card.component.css',
+ selector: 'app-recipe-view-card',
+ imports: [],
+ templateUrl: './recipe-view-card.component.html',
+ styleUrl: './recipe-view-card.component.css',
})
export class RecipeViewCard {
-
@Input({ required: true })
public recipe!: Recipe;
+ private readonly imageService = inject(ImageService);
+
+ protected mainImageUrl = injectQuery(() => ({
+ queryKey: ['images', this.recipe.mainImage.owner.username, this.recipe.mainImage.filename],
+ queryFn: () => this.imageService.getImage(this.recipe.mainImage.url),
+ }));
}
diff --git a/src/app/recipe-view/recipe-view.component.html b/src/app/recipe-view/recipe-view.component.html
index a423143..e2a3fae 100644
--- a/src/app/recipe-view/recipe-view.component.html
+++ b/src/app/recipe-view/recipe-view.component.html
@@ -1,5 +1,9 @@
@if (recipe.isLoading()) {
Loading...
-} @else if (recipe.hasValue()) {
-
+} @else if (recipe.isSuccess()) {
+
+} @else if (recipe.error(); as error) {
+ {{ error }}
+} @else {
+ There was an error loading the recipe.
}
diff --git a/src/app/recipe-view/recipe-view.component.ts b/src/app/recipe-view/recipe-view.component.ts
index 2eaddb7..25c3f24 100644
--- a/src/app/recipe-view/recipe-view.component.ts
+++ b/src/app/recipe-view/recipe-view.component.ts
@@ -2,12 +2,11 @@ import { Component, inject, resource } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { RecipeService } from '../recipe.service';
import { RecipeViewCard } from './recipe-view-card/recipe-view-card.component';
+import { injectQuery } from '@tanstack/angular-query-experimental';
@Component({
selector: 'app-recipe-view',
- imports: [
- RecipeViewCard
- ],
+ imports: [RecipeViewCard],
templateUrl: './recipe-view.component.html',
styleUrl: './recipe-view.component.css',
})
@@ -17,9 +16,8 @@ export class RecipeView {
private username = this.route.snapshot.paramMap.get('username') as string;
private slug = this.route.snapshot.paramMap.get('slug') as string;
- protected recipe = resource({
- loader: () => {
- return this.recipeService.getRecipe(this.username, this.slug);
- },
- });
+ protected recipe = injectQuery(() => ({
+ queryKey: ['recipe', this.username, this.slug],
+ queryFn: () => this.recipeService.getRecipe(this.username, this.slug),
+ }));
}
diff --git a/src/app/recipe.service.ts b/src/app/recipe.service.ts
index 7835d89..dc82330 100644
--- a/src/app/recipe.service.ts
+++ b/src/app/recipe.service.ts
@@ -1,6 +1,6 @@
import { inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
-import { map, Observable } from 'rxjs';
+import { firstValueFrom, map } from 'rxjs';
import { Recipe, RecipeInfoViews, RecipeView } from './model/Recipe.model';
@Injectable({
@@ -9,15 +9,19 @@ import { Recipe, RecipeInfoViews, RecipeView } from './model/Recipe.model';
export class RecipeService {
private readonly http = inject(HttpClient);
- public getRecipes(): Observable {
- return this.http
- .get('http://localhost:8080/recipes')
- .pipe(map((res) => res.content));
+ public getRecipes(): Promise {
+ return firstValueFrom(
+ this.http
+ .get('http://localhost:8080/recipes')
+ .pipe(map((res) => res.content)),
+ );
}
public async getRecipe(username: string, slug: string): Promise {
- const res = await fetch(`http://localhost:8080/recipes/${username}/${slug}`)
- const recipeView = await res.json() as RecipeView;
- return recipeView.recipe;
+ return firstValueFrom(
+ this.http
+ .get(`http://localhost:8080/recipes/${username}/${slug}`)
+ .pipe(map((recipeView) => recipeView.recipe)),
+ );
}
}
diff --git a/src/app/recipes-page/recipes-page.css b/src/app/recipes-page/recipes-page.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/recipes-page/recipes-page.html b/src/app/recipes-page/recipes-page.html
new file mode 100644
index 0000000..12779b7
--- /dev/null
+++ b/src/app/recipes-page/recipes-page.html
@@ -0,0 +1,11 @@
+@if (recipes.isSuccess()) {
+
+}
diff --git a/src/app/recipes-page/recipes-page.spec.ts b/src/app/recipes-page/recipes-page.spec.ts
new file mode 100644
index 0000000..e390e92
--- /dev/null
+++ b/src/app/recipes-page/recipes-page.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecipesPage } from './recipes-page';
+
+describe('RecipesPage', () => {
+ let component: RecipesPage;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [RecipesPage],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(RecipesPage);
+ component = fixture.componentInstance;
+ await fixture.whenStable();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/recipes-page/recipes-page.ts b/src/app/recipes-page/recipes-page.ts
new file mode 100644
index 0000000..f9e87a7
--- /dev/null
+++ b/src/app/recipes-page/recipes-page.ts
@@ -0,0 +1,19 @@
+import { Component, inject } from '@angular/core';
+import { RecipeService } from '../recipe.service';
+import { injectQuery } from '@tanstack/angular-query-experimental';
+import { RouterLink } from '@angular/router';
+
+@Component({
+ selector: 'app-recipes-page',
+ imports: [RouterLink],
+ templateUrl: './recipes-page.html',
+ styleUrl: './recipes-page.css',
+})
+export class RecipesPage {
+ private readonly recipeService = inject(RecipeService);
+
+ protected readonly recipes = injectQuery(() => ({
+ queryKey: ['recipes'],
+ queryFn: () => this.recipeService.getRecipes(),
+ }));
+}
diff --git a/src/app/service/auth.service.spec.ts b/src/app/service/auth.service.spec.ts
new file mode 100644
index 0000000..c8f820f
--- /dev/null
+++ b/src/app/service/auth.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('LoginService', () => {
+ let service: AuthService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(AuthService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/service/auth.service.ts b/src/app/service/auth.service.ts
new file mode 100644
index 0000000..21d4740
--- /dev/null
+++ b/src/app/service/auth.service.ts
@@ -0,0 +1,38 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { LoginView } from '../model/LoginView.model';
+import { firstValueFrom, tap } from 'rxjs';
+import { AuthStore } from './auth.store';
+import { QueryClient } from '@tanstack/angular-query-experimental';
+import { Router } from '@angular/router';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class AuthService {
+ private readonly http = inject(HttpClient);
+ private readonly authStore = inject(AuthStore);
+ private readonly queryClient = inject(QueryClient);
+ private readonly router = inject(Router);
+
+ public async login(username: string, password: string): Promise {
+ const loginView = await firstValueFrom(
+ this.http
+ .post('http://localhost:8080/auth/login', { username, password })
+ .pipe(
+ tap((loginView) => {
+ this.authStore.setAccessToken(loginView.accessToken);
+ this.authStore.setUsername(loginView.username);
+ }),
+ ),
+ );
+ await this.queryClient.invalidateQueries();
+ return loginView;
+ }
+
+ public async logout(): Promise {
+ await firstValueFrom(this.http.post('http://localhost:8080/auth/logout', null));
+ await this.queryClient.invalidateQueries();
+ await this.router.navigate(['/']);
+ }
+}
diff --git a/src/app/service/auth.store.ts b/src/app/service/auth.store.ts
new file mode 100644
index 0000000..425223e
--- /dev/null
+++ b/src/app/service/auth.store.ts
@@ -0,0 +1,25 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class AuthStore {
+ private readonly accessToken = signal(null);
+ private readonly username = signal(null);
+
+ public setAccessToken(accessToken: string | null): void {
+ this.accessToken.set(accessToken);
+ }
+
+ public getAccessToken(): string | null {
+ return this.accessToken();
+ }
+
+ public setUsername(username: string | null): void {
+ this.username.set(username);
+ }
+
+ public getUsername(): string | null {
+ return this.username();
+ }
+}
diff --git a/src/app/service/image.service.ts b/src/app/service/image.service.ts
new file mode 100644
index 0000000..ed4a7a3
--- /dev/null
+++ b/src/app/service/image.service.ts
@@ -0,0 +1,20 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { firstValueFrom, map } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class ImageService {
+ private readonly httpClient = inject(HttpClient);
+
+ public getImage(backendUrl: string): Promise {
+ return firstValueFrom(
+ this.httpClient
+ .get(backendUrl, {
+ responseType: 'blob',
+ })
+ .pipe(map((blob) => URL.createObjectURL(blob))),
+ );
+ }
+}