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.getRecipeView(username, slug, true).subscribe({
+            this.recipeService.getRecipeView2(username, slug, true).subscribe({
                 next: (recipeView) => {
                     this.loadingRecipe.set(false);
                     this.recipeView.set(recipeView);

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

@@ -1,7 +1,9 @@
-@if (loadingRecipe()) {
-    <app-spinner></app-spinner>
-} @else if (loadRecipeError()) {
+@if (recipeView.isLoading()) {
+    <p>Loading...</p>
+} @else if (recipeView.isSuccess()) {
+    <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,38 +1,23 @@
-import { Component, inject, OnInit, signal } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { RecipeService } from '../../shared/services/RecipeService';
 import { RecipePageContent } from './recipe-page-content/recipe-page-content';
-import { FullRecipeViewWrapper } from '../../shared/models/Recipe.model';
-import { Spinner } from '../../shared/components/spinner/spinner';
+import { injectQuery } from '@tanstack/angular-query-experimental';
 
 @Component({
     selector: 'app-recipe-page',
-    imports: [RecipePageContent, Spinner],
+    imports: [RecipePageContent],
     templateUrl: './recipe-page.html',
     styleUrl: './recipe-page.css',
 })
-export class RecipePage implements OnInit {
+export class RecipePage {
     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 readonly loadingRecipe = signal(false);
-    protected readonly loadRecipeError = signal<Error | null>(null);
-    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);
-            },
-        });
-    }
+    protected recipeView = injectQuery(() => ({
+        queryKey: ['recipe', this.username, this.slug],
+        queryFn: () => this.recipeService.getRecipeView(this.username, this.slug),
+    }));
 }

src/app/pages/recipes-search-page/recipes-search-page.html

@@ -6,13 +6,13 @@
     </mat-form-field>
     <button matButton="filled" type="submit" [disabled]="!searchRecipesForm.valid">Search</button>
 </form>
-@if (loadingResults()) {
-    <app-spinner></app-spinner>
-} @else if (loadResultsError()) {
-    <p>There was an error during search. Try again.</p>
-} @else if (results()?.length) {
-    <p>Showing results for '{{ submittedPrompt() }}'</p>
-    <app-recipe-card-grid [recipes]="results()!" />
-} @else if (results()?.length === 0) {
-    <p>There were no results for '{{ submittedPrompt() }}'</p>
+@if (givenPrompt() !== null) {
+    @if (resultsQuery.isLoading()) {
+        <p>Loading search results...</p>
+    } @else if (resultsQuery.isSuccess()) {
+        <p>Showing results for {{ givenPrompt() }}</p>
+        <app-recipe-card-grid [recipes]="resultsQuery.data()" />
+    } @else if (resultsQuery.isError()) {
+        <p>There was an error during search.</p>
+    }
 }

src/app/pages/recipes-search-page/recipes-search-page.ts

@@ -1,30 +1,28 @@
-import { Component, inject, OnInit, signal } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { injectQuery } from '@tanstack/angular-query-experimental';
 import { RecipeService } from '../../shared/services/RecipeService';
 import { RecipeCardGrid } from '../../shared/components/recipe-card-grid/recipe-card-grid';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatButton } from '@angular/material/button';
 import { MatFormField, MatInput, MatLabel } from '@angular/material/input';
-import { RecipeInfoView } from '../../shared/models/Recipe.model';
-import { Spinner } from '../../shared/components/spinner/spinner';
 
 @Component({
     selector: 'app-recipes-search-page',
-    imports: [RecipeCardGrid, MatButton, MatFormField, MatInput, MatLabel, ReactiveFormsModule, Spinner],
+    imports: [ReactiveFormsModule, RecipeCardGrid, MatButton, MatFormField, MatInput, MatLabel],
     templateUrl: './recipes-search-page.html',
     styleUrl: './recipes-search-page.css',
 })
-export class RecipesSearchPage implements OnInit {
+export class RecipesSearchPage {
     private readonly recipeService = inject(RecipeService);
     private readonly router = inject(Router);
     private readonly activatedRoute = inject(ActivatedRoute);
 
-    public ngOnInit(): void {
+    public constructor() {
         this.activatedRoute.queryParams.subscribe((queryParams) => {
             if (queryParams['prompt']) {
-                const prompt = queryParams['prompt'] as string;
-                this.searchRecipesForm.controls.prompt.setValue(prompt);
-                this.loadResults(prompt);
+                this.givenPrompt.set(queryParams['prompt']);
+                this.searchRecipesForm.controls.prompt.setValue(queryParams['prompt']);
             }
         });
     }
@@ -33,34 +31,20 @@ export class RecipesSearchPage implements OnInit {
         prompt: new FormControl('', [Validators.required]),
     });
 
-    protected readonly submittedPrompt = signal<string | null>(null);
-    protected readonly loadingResults = signal(false);
-    protected readonly loadResultsError = signal<Error | null>(null);
-    protected readonly results = signal<RecipeInfoView[] | null>(null);
+    protected readonly givenPrompt = signal<null | string>(null);
 
-    private loadResults(prompt: string): void {
-        this.submittedPrompt.set(prompt);
-        this.loadingResults.set(true);
-        this.recipeService.aiSearch(prompt).subscribe({
-            next: (results) => {
-                this.loadingResults.set(false);
-                this.results.set(results);
-            },
-            error: (e) => {
-                this.loadingResults.set(false);
-                this.loadResultsError.set(e);
-                console.error(e);
-            },
-        });
-    }
+    protected readonly resultsQuery = injectQuery(() => ({
+        queryFn: () => this.recipeService.aiSearch(this.givenPrompt()!),
+        queryKey: ['recipes-search', this.givenPrompt()],
+        enabled: () => !!this.givenPrompt(),
+    }));
 
     protected async onPromptSubmit() {
         if (this.searchRecipesForm.value.prompt) {
-            const prompt = this.searchRecipesForm.value.prompt;
             await this.router.navigate(['/recipes-search'], {
-                queryParams: { prompt },
+                queryParams: { prompt: this.searchRecipesForm.value.prompt },
             });
-            this.loadResults(prompt);
+            this.givenPrompt.set(this.searchRecipesForm.value.prompt);
         }
     }
 }

src/app/shared/services/RecipeService.ts

@@ -76,7 +76,13 @@ export class RecipeService {
             .pipe(map((res) => res.count));
     }
 
-    public getRecipeView(
+    public getRecipeView(username: string, slug: string): Promise<FullRecipeViewWrapper> {
+        return firstValueFrom(
+            this.http.get<FullRecipeViewWrapper>(this.endpointService.getUrl('recipes', [username, slug])),
+        );
+    }
+
+    public getRecipeView2(
         username: string,
         slug: string,
         includeRawText: boolean = false,
@@ -143,15 +149,16 @@ export class RecipeService {
         return comment;
     }
 
-    public aiSearch(prompt: string): Observable<FullRecipeView[]> {
-        return this.http
-            .post<{ results: FullRecipeView[] }>(this.endpointService.getUrl('recipes'), {
+    public async aiSearch(prompt: string): Promise<FullRecipeView[]> {
+        const recipeInfoViews = await firstValueFrom(
+            this.http.post<{ results: FullRecipeView[] }>(this.endpointService.getUrl('recipes'), {
                 type: 'AI_PROMPT',
                 data: {
                     prompt,
                 },
-            })
-            .pipe(map((res) => res.results));
+            }),
+        );
+        return recipeInfoViews.results;
     }
 
     public deleteRecipe(username: string, slug: string): Observable<void> {