Use environments for base api url; some service url refactoring.

angular.json

@@ -46,7 +46,13 @@
                         "development": {
                             "optimization": false,
                             "extractLicenses": false,
-                            "sourceMap": true
+                            "sourceMap": true,
+                            "fileReplacements": [
+                              {
+                                "replace": "src/environments/environment.ts",
+                                "with": "src/environments/environment.development.ts"
+                              }
+                            ]
                         }
                     },
                     "defaultConfiguration": "production"

src/app/endpoints.ts

@@ -1,3 +1,6 @@
 export const Endpoints = {
+    authLogin: 'auth/login',
+    authLogout: 'auth/logout',
+    authRefresh: 'auth/refresh',
     recipes: 'recipes',
 };

src/app/shared/services/AuthService.ts

@@ -4,6 +4,7 @@ import { LoginView } from '../models/LoginView.model';
 import { firstValueFrom, Observable, tap } from 'rxjs';
 import { QueryClient } from '@tanstack/angular-query-experimental';
 import { Router } from '@angular/router';
+import { EndpointService } from './EndpointService';
 
 @Injectable({
     providedIn: 'root',
@@ -18,11 +19,12 @@ export class AuthService {
     private readonly http = inject(HttpClient);
     private readonly queryClient = inject(QueryClient);
     private readonly router = inject(Router);
+    private readonly endpointService = inject(EndpointService);
 
     public async login(username: string, password: string): Promise<LoginView> {
         const loginView = await firstValueFrom(
             this.http.post<LoginView>(
-                'http://localhost:8080/auth/login',
+                this.endpointService.getUrl('authLogin'),
                 { username, password },
                 {
                     withCredentials: true,
@@ -36,7 +38,7 @@ export class AuthService {
     }
 
     public async logout(): Promise<void> {
-        await firstValueFrom(this.http.post('http://localhost:8080/auth/logout', null));
+        await firstValueFrom(this.http.post(this.endpointService.getUrl('authLogout'), null));
         this._username.set(null);
         this._accessToken.set(null);
         await this.router.navigate(['/']);
@@ -47,7 +49,7 @@ export class AuthService {
         this._accessToken.set(null);
         this._username.set(null);
         return this.http
-            .post<LoginView>('http://localhost:8080/auth/refresh', null, {
+            .post<LoginView>(this.endpointService.getUrl('authRefresh'), null, {
                 withCredentials: true,
             })
             .pipe(

src/app/shared/services/EndpointService.ts

@@ -1,12 +1,13 @@
 import { Injectable } from '@angular/core';
 import { Endpoints } from '../../endpoints';
 import { QueryParams } from '../models/Query.model';
+import { environment } from '../../../environments/environment';
 
 @Injectable({
     providedIn: 'root',
 })
 export class EndpointService {
-    public getUrl(endpoint: keyof typeof Endpoints, pathParams?: string[], queryParams?: QueryParams): string {
+    public getUrl(endpoint: keyof typeof Endpoints, pathParts?: string[], queryParams?: QueryParams): string {
         const urlSearchParams = new URLSearchParams();
         if (queryParams?.page !== undefined) {
             urlSearchParams.set('page', queryParams.page.toString());
@@ -29,7 +30,7 @@ export class EndpointService {
             }
         });
 
-        let pathString = pathParams?.join('/') || '';
+        let pathString = pathParts?.join('/') || '';
         if (pathString?.length) {
             pathString = '/' + pathString;
         }
@@ -39,6 +40,6 @@ export class EndpointService {
             queryString = '?' + queryString;
         }
 
-        return `http://localhost:8080/${Endpoints[endpoint]}${pathString}${queryString}`;
+        return environment.apiBaseUrl + '/' + Endpoints[endpoint] + pathString + queryString;
     }
 }

src/app/shared/services/RecipeService.ts

@@ -19,24 +19,29 @@ export class RecipeService {
 
     public getRecipes(): Promise<Recipe[]> {
         return firstValueFrom(
-            this.http.get<RecipeInfoViews>('http://localhost:8080/recipes').pipe(map((res) => res.content)),
+            this.http.get<RecipeInfoViews>(this.endpointService.getUrl('recipes'))
+                .pipe(map((res) => res.content))
         );
     }
 
     public getRecipeView(username: string, slug: string): Promise<RecipeView> {
-        return firstValueFrom(this.http.get<RecipeView>(`http://localhost:8080/recipes/${username}/${slug}`));
+        return firstValueFrom(this.http.get<RecipeView>(
+            this.endpointService.getUrl('recipes', [username, slug])
+        ));
     }
 
-    private getRecipeUrl(recipeView: RecipeView): string {
+    private getRecipeBaseUrl(recipeView: RecipeView): string {
-        return `http://localhost:8080/recipes/${recipeView.recipe.owner.username}/${recipeView.recipe.slug}`;
+        return this.endpointService.getUrl(
+            'recipes', [recipeView.recipe.owner.username, recipeView.recipe.slug]
+        );
     }
 
     public async toggleStar(recipeView: RecipeView): Promise<void> {
         if (this.authService.accessToken()) {
             if (recipeView.isStarred) {
-                await lastValueFrom(this.http.delete(this.getRecipeUrl(recipeView) + '/star'));
+                await lastValueFrom(this.http.delete(this.getRecipeBaseUrl(recipeView) + '/star'));
             } else {
-                await lastValueFrom(this.http.post(this.getRecipeUrl(recipeView) + '/star', null));
+                await lastValueFrom(this.http.post(this.getRecipeBaseUrl(recipeView) + '/star', null));
             }
             await this.queryClient.invalidateQueries({
                 queryKey: ['recipe', recipeView.recipe.owner.username, recipeView.recipe.slug],
@@ -56,9 +61,10 @@ export class RecipeService {
 
     public async addComment(username: string, slug: string, commentText: string): Promise<RecipeComment> {
         const comment = await firstValueFrom(
-            this.http.post<RecipeComment>(`http://localhost:8080/recipes/${username}/${slug}/comments`, {
+            this.http.post<RecipeComment>(
-                text: commentText,
+                this.endpointService.getUrl('recipes', [username, slug, 'comments']),
-            }),
+                { text: commentText }
+            )
         );
         await this.queryClient.invalidateQueries({
             queryKey: ['recipeComments', username, slug],

src/environments/environment.development.ts

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

src/environments/environment.ts

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