Prettier.

src/app/app.routes.ts

@@ -17,7 +17,7 @@ export const routes: Routes = [
     {
         path: 'recipe-upload',
         component: RecipeUploadPage,
-        canActivate: [authGuard]
+        canActivate: [authGuard],
     },
     {
         path: 'recipes/:username/:slug',

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

@@ -5,7 +5,7 @@
                 'step-complete': step.completed,
                 'step-in-progress': step.inProgress,
                 'step-incomplete': !step.completed,
-                'step-displayed': displayStep() === step.index
+                'step-displayed': displayStep() === step.index,
             }"
         >
             @if (step.completed || step.inProgress) {

src/app/pages/recipe-upload-page/steps/ai-or-manual/ai-or-manual.html

@@ -5,7 +5,9 @@
         <app-file-upload [files]="sourceFilesArray()" (fileChange)="onFileChange($event)"></app-file-upload>
         <div id="ai-or-manual-buttons">
             <button matButton="outlined" type="button" (click)="onFormSubmit('manual')">Enter Manually</button>
-            <button matButton="filled" type="button" [disabled]="!sourceFile()" (click)="onFormSubmit('ai-assist')">Use AI Assist</button>
+            <button matButton="filled" type="button" [disabled]="!sourceFile()" (click)="onFormSubmit('ai-assist')">
+                Use AI Assist
+            </button>
         </div>
     </form>
 </section>

src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.html

@@ -2,11 +2,11 @@
 <form [formGroup]="recipeFormGroup">
     <mat-form-field>
         <mat-label>Title</mat-label>
-        <input matInput [formControl]="recipeFormGroup.controls.title">
+        <input matInput [formControl]="recipeFormGroup.controls.title" />
     </mat-form-field>
     <mat-form-field>
         <mat-label>Slug</mat-label>
-        <input matInput [formControl]="recipeFormGroup.controls.slug">
+        <input matInput [formControl]="recipeFormGroup.controls.slug" />
     </mat-form-field>
     <mat-form-field>
         <mat-label>Recipe Text</mat-label>

src/app/shared/components/nav/nav.html

@@ -3,7 +3,9 @@
     <ul>
         @for (link of links(); track link.relativeUrl) {
             @if (!link.disabled) {
-                <li><a [routerLink]="link.relativeUrl">{{ link.title }}</a></li>
+                <li>
+                    <a [routerLink]="link.relativeUrl">{{ link.title }}</a>
+                </li>
             }
         }
     </ul>

src/app/shared/components/nav/nav.ts

@@ -10,7 +10,6 @@ import { NavLinkConfig } from './NavLinkConfig';
     styleUrl: './nav.css',
 })
 export class Nav {
-
     private readonly authService = inject(AuthService);
 
     protected readonly links = computed<NavLinkConfig[]>(() => {
@@ -26,9 +25,8 @@ export class Nav {
             {
                 relativeUrl: '/recipe-upload',
                 title: 'Upload Recipe',
-                disabled: this.authService.accessToken() === null
+                disabled: this.authService.accessToken() === null,
-            }
+            },
         ];
     });
-
 }

src/app/shared/services/RecipeService.ts

@@ -19,21 +19,16 @@ export class RecipeService {
 
     public getRecipes(): Promise<Recipe[]> {
         return firstValueFrom(
-            this.http.get<RecipeInfoViews>(this.endpointService.getUrl('recipes'))
+            this.http.get<RecipeInfoViews>(this.endpointService.getUrl('recipes')).pipe(map((res) => res.content)),
-                .pipe(map((res) => res.content))
         );
     }
 
     public getRecipeView(username: string, slug: string): Promise<RecipeView> {
-        return firstValueFrom(this.http.get<RecipeView>(
+        return firstValueFrom(this.http.get<RecipeView>(this.endpointService.getUrl('recipes', [username, slug])));
-            this.endpointService.getUrl('recipes', [username, slug])
-        ));
     }
 
     private getRecipeBaseUrl(recipeView: RecipeView): string {
-        return this.endpointService.getUrl(
+        return this.endpointService.getUrl('recipes', [recipeView.recipe.owner.username, recipeView.recipe.slug]);
-            'recipes', [recipeView.recipe.owner.username, recipeView.recipe.slug]
-        );
     }
 
     public async toggleStar(recipeView: RecipeView): Promise<void> {
@@ -61,10 +56,9 @@ export class RecipeService {
 
     public async addComment(username: string, slug: string, commentText: string): Promise<RecipeComment> {
         const comment = await firstValueFrom(
-            this.http.post<RecipeComment>(
+            this.http.post<RecipeComment>(this.endpointService.getUrl('recipes', [username, slug, 'comments']), {
-                this.endpointService.getUrl('recipes', [username, slug, 'comments']),
+                text: commentText,
-                { text: commentText }
+            }),
-            )
         );
         await this.queryClient.invalidateQueries({
             queryKey: ['recipeComments', username, slug],

src/app/shared/services/RecipeUploadService.ts

@@ -13,7 +13,7 @@ export class RecipeUploadService {
     public getRecipeUploadModel(draftId: number): Observable<RecipeUploadModel> {
         return of({
             inProgressStep: RecipeUploadStep.ENTER_DATA,
-            id: 42
+            id: 42,
         });
     }
 
@@ -24,8 +24,7 @@ export class RecipeUploadService {
             inferredTitle: 'Some recipe',
             inferredSlug: 'some-recipe',
             inferredText: 'Some text.',
-            inferredIngredients: []
+            inferredIngredients: [],
         }).pipe(delay(5_000));
     }
-
 }

src/environments/environment.development.ts

@@ -1,3 +1,3 @@
 export const environment = {
-    apiBaseUrl: 'http://localhost:8080'
+    apiBaseUrl: 'http://localhost:8080',
 };

src/environments/environment.ts

@@ -1,3 +1,3 @@
 export const environment = {
-    apiBaseUrl: 'http://localhost:8080'
+    apiBaseUrl: 'http://localhost:8080',
 };