MME-34 Remove tanstack from recipes search page.

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 (givenPrompt() !== null) {
+@if (loadingResults()) {
-    @if (resultsQuery.isLoading()) {
+    <app-spinner></app-spinner>
-        <p>Loading search results...</p>
+} @else if (loadResultsError()) {
-    } @else if (resultsQuery.isSuccess()) {
+    <p>There was an error during search. Try again.</p>
-        <p>Showing results for {{ givenPrompt() }}</p>
+} @else if (results()?.length) {
-        <app-recipe-card-grid [recipes]="resultsQuery.data()" />
+    <p>Showing results for '{{ submittedPrompt() }}'</p>
-    } @else if (resultsQuery.isError()) {
+    <app-recipe-card-grid [recipes]="results()!" />
-        <p>There was an error during search.</p>
+} @else if (results()?.length === 0) {
-    }
+    <p>There were no results for '{{ submittedPrompt() }}'</p>
 }

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

@@ -1,28 +1,30 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, inject, OnInit, 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: [ReactiveFormsModule, RecipeCardGrid, MatButton, MatFormField, MatInput, MatLabel],
+    imports: [RecipeCardGrid, MatButton, MatFormField, MatInput, MatLabel, ReactiveFormsModule, Spinner],
     templateUrl: './recipes-search-page.html',
     styleUrl: './recipes-search-page.css',
 })
-export class RecipesSearchPage {
+export class RecipesSearchPage implements OnInit {
     private readonly recipeService = inject(RecipeService);
     private readonly router = inject(Router);
     private readonly activatedRoute = inject(ActivatedRoute);
 
-    public constructor() {
+    public ngOnInit(): void {
         this.activatedRoute.queryParams.subscribe((queryParams) => {
             if (queryParams['prompt']) {
-                this.givenPrompt.set(queryParams['prompt']);
+                const prompt = queryParams['prompt'] as string;
-                this.searchRecipesForm.controls.prompt.setValue(queryParams['prompt']);
+                this.searchRecipesForm.controls.prompt.setValue(prompt);
+                this.loadResults(prompt);
             }
         });
     }
@@ -31,20 +33,34 @@ export class RecipesSearchPage {
         prompt: new FormControl('', [Validators.required]),
     });
 
-    protected readonly givenPrompt = signal<null | string>(null);
+    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 resultsQuery = injectQuery(() => ({
+    private loadResults(prompt: string): void {
-        queryFn: () => this.recipeService.aiSearch(this.givenPrompt()!),
+        this.submittedPrompt.set(prompt);
-        queryKey: ['recipes-search', this.givenPrompt()],
+        this.loadingResults.set(true);
-        enabled: () => !!this.givenPrompt(),
+        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 async onPromptSubmit() {
         if (this.searchRecipesForm.value.prompt) {
+            const prompt = this.searchRecipesForm.value.prompt;
             await this.router.navigate(['/recipes-search'], {
-                queryParams: { prompt: this.searchRecipesForm.value.prompt },
+                queryParams: { prompt },
             });
-            this.givenPrompt.set(this.searchRecipesForm.value.prompt);
+            this.loadResults(prompt);
         }
     }
 }

src/app/shared/services/RecipeService.ts

@@ -143,16 +143,15 @@ export class RecipeService {
         return comment;
     }
 
-    public async aiSearch(prompt: string): Promise<FullRecipeView[]> {
+    public aiSearch(prompt: string): Observable<FullRecipeView[]> {
-        const recipeInfoViews = await firstValueFrom(
+        return this.http
-            this.http.post<{ results: FullRecipeView[] }>(this.endpointService.getUrl('recipes'), {
+            .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> {