43 lines
1.8 KiB
TypeScript
43 lines
1.8 KiB
TypeScript
import { Component, computed, inject, input } from '@angular/core';
|
|
import { RecipeView } from '../../../shared/models/Recipe.model';
|
|
import { injectMutation, injectQuery } from '@tanstack/angular-query-experimental';
|
|
import { ImageService } from '../../../shared/services/ImageService';
|
|
import { faGlobe, faLock, faStar, faUser } from '@fortawesome/free-solid-svg-icons';
|
|
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
|
import { RecipeService } from '../../../shared/services/RecipeService';
|
|
import { AuthService } from '../../../shared/services/AuthService';
|
|
import { RecipeCommentsList } from '../../../shared/components/recipe-comments-list/recipe-comments-list';
|
|
|
|
@Component({
|
|
selector: 'app-recipe-page-content',
|
|
imports: [FaIconComponent, RecipeCommentsList],
|
|
templateUrl: './recipe-page-content.html',
|
|
styleUrl: './recipe-page-content.css',
|
|
})
|
|
export class RecipePageContent {
|
|
public recipeView = input.required<RecipeView>();
|
|
|
|
private readonly imageService = inject(ImageService);
|
|
private readonly recipeService = inject(RecipeService);
|
|
private readonly authService = inject(AuthService);
|
|
|
|
protected readonly isLoggedIn = computed(() => !!this.authService.accessToken());
|
|
|
|
protected readonly mainImageUrl = injectQuery(() => {
|
|
const recipe = this.recipeView().recipe;
|
|
return {
|
|
queryKey: ['images', recipe.mainImage.owner.username, recipe.mainImage.filename],
|
|
queryFn: () => this.imageService.getImage(recipe.mainImage.url),
|
|
};
|
|
});
|
|
|
|
protected readonly starMutation = injectMutation(() => ({
|
|
mutationFn: () => this.recipeService.toggleStar(this.recipeView()),
|
|
}));
|
|
|
|
protected readonly faStar = faStar;
|
|
protected readonly faUser = faUser;
|
|
protected readonly faGlobe = faGlobe;
|
|
protected readonly faLock = faLock;
|
|
}
|