MME-34 Remove tanstack from recipe page.

src/app/pages/recipe-edit-page/recipe-edit-page.ts

@@ -31,7 +31,7 @@ export class RecipeEditPage implements OnInit {
             const username = paramMap.get('username')!;
             const slug = paramMap.get('slug')!;
             this.loadingRecipe.set(true);
-            this.recipeService.getRecipeView2(username, slug, true).subscribe({
+            this.recipeService.getRecipeView(username, slug, true).subscribe({
                 next: (recipeView) => {
                     this.loadingRecipe.set(false);
                     this.recipeView.set(recipeView);

src/app/pages/recipe-page/recipe-page.html

@@ -1,9 +1,7 @@
-@if (recipeView.isLoading()) {
+@if (loadingRecipe()) {
-    <p>Loading...</p>
+    <app-spinner></app-spinner>
-} @else if (recipeView.isSuccess()) {
+} @else if (loadRecipeError()) {
-    <app-recipe-page-content [recipeView]="recipeView.data()"></app-recipe-page-content>
-} @else if (recipeView.error(); as error) {
-    <p>{{ error.message }}</p>
-} @else {
     <p>There was an error loading the recipe.</p>
+} @else if (recipe(); as recipe) {
+    <app-recipe-page-content [recipeView]="recipe"></app-recipe-page-content>
 }

src/app/pages/recipe-page/recipe-page.ts

@@ -1,23 +1,38 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, OnInit, signal } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { RecipeService } from '../../shared/services/RecipeService';
 import { RecipePageContent } from './recipe-page-content/recipe-page-content';
-import { injectQuery } from '@tanstack/angular-query-experimental';
+import { FullRecipeViewWrapper } from '../../shared/models/Recipe.model';
+import { Spinner } from '../../shared/components/spinner/spinner';
 
 @Component({
     selector: 'app-recipe-page',
-    imports: [RecipePageContent],
+    imports: [RecipePageContent, Spinner],
     templateUrl: './recipe-page.html',
     styleUrl: './recipe-page.css',
 })
-export class RecipePage {
+export class RecipePage implements OnInit {
     private recipeService = inject(RecipeService);
     private route = inject(ActivatedRoute);
     private username = this.route.snapshot.paramMap.get('username') as string;
     private slug = this.route.snapshot.paramMap.get('slug') as string;
 
-    protected recipeView = injectQuery(() => ({
+    protected readonly loadingRecipe = signal(false);
-        queryKey: ['recipe', this.username, this.slug],
+    protected readonly loadRecipeError = signal<Error | null>(null);
-        queryFn: () => this.recipeService.getRecipeView(this.username, this.slug),
+    protected readonly recipe = signal<FullRecipeViewWrapper | null>(null);
-    }));
+
+    public ngOnInit(): void {
+        this.loadingRecipe.set(true);
+        this.recipeService.getRecipeView(this.username, this.slug).subscribe({
+            next: (recipe) => {
+                this.loadingRecipe.set(false);
+                this.recipe.set(recipe);
+            },
+            error: (e) => {
+                this.loadingRecipe.set(false);
+                this.loadRecipeError.set(e);
+                console.error(e);
+            },
+        });
+    }
 }

src/app/shared/services/RecipeService.ts

@@ -76,13 +76,7 @@ export class RecipeService {
             .pipe(map((res) => res.count));
     }
 
-    public getRecipeView(username: string, slug: string): Promise<FullRecipeViewWrapper> {
+    public getRecipeView(
-        return firstValueFrom(
-            this.http.get<FullRecipeViewWrapper>(this.endpointService.getUrl('recipes', [username, slug])),
-        );
-    }
-
-    public getRecipeView2(
         username: string,
         slug: string,
         includeRawText: boolean = false,