MME-34 Remove tanstack from recipes search 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/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

@@ -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,
@@ -149,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> {