Switched to using AbortSignal in api deps. Recipes page updated.

src/api/getRecipe.ts

@@ -7,21 +7,23 @@ export interface GetRecipeDeps {
     token: string | null
     username: string
     slug: string
-    abortController: AbortController
+    abortSignal: AbortSignal
 }
 
-const getRecipe = async (
-    token: string | null,
-    ownerUsername: string,
-    slug: string
-): Promise<FullRecipeView> => {
+const getRecipe = async ({
+    token,
+    username,
+    slug,
+    abortSignal
+}: GetRecipeDeps): Promise<FullRecipeView> => {
     const headers = new Headers()
     if (token !== null) {
         headers.set('Authorization', `Bearer ${token}`)
     }
     const response = await fetch(
-        import.meta.env.VITE_MME_API_URL + `/recipes/${ownerUsername}/${slug}`,
+        import.meta.env.VITE_MME_API_URL + `/recipes/${username}/${slug}`,
         {
+            signal: abortSignal,
             headers,
             mode: 'cors'
         }

src/api/getRecipeInfos.ts

@@ -2,11 +2,19 @@ import { ApiError } from './ApiError'
 import { toImageView } from './types/ImageView'
 import RecipeInfosView, { RawRecipeInfosView } from './types/RecipeInfosView'
 
-const getRecipeInfos = async (
-    token: string | null,
-    pageNumber: number,
+export interface GetRecipeInfosDeps {
+    abortSignal: AbortSignal
+    token: string | null
+    pageNumber: number
     pageSize: number
-): Promise<RecipeInfosView> => {
+}
+
+const getRecipeInfos = async ({
+    abortSignal,
+    token,
+    pageNumber,
+    pageSize
+}: GetRecipeInfosDeps): Promise<RecipeInfosView> => {
     const headers = new Headers()
     if (token !== null) {
         headers.set('Authorization', `Bearer ${token}`)
@@ -15,6 +23,7 @@ const getRecipeInfos = async (
         import.meta.env.VITE_MME_API_URL +
             `/recipes?page=${pageNumber}&size=${pageSize}`,
         {
+            signal: abortSignal,
             headers,
             mode: 'cors'
         }

src/pages/recipes/Recipes.tsx

@@ -13,7 +13,13 @@ const Recipes = () => {
 
     const { data, isPending, error } = useQuery({
         queryKey: ['recipeInfos'],
-        queryFn: () => getRecipeInfos(token, pageNumber, pageSize)
+        queryFn: ({ signal }) =>
+            getRecipeInfos({
+                abortSignal: signal,
+                pageNumber,
+                pageSize,
+                token
+            })
     })
 
     if (isPending) {

src/routes/recipes_/$username.$slug.tsx

@@ -12,7 +12,7 @@ export const Route = createFileRoute('/recipes/$username/$slug')({
             queryKey: ['recipe', params.username, params.slug],
             queryFn: () =>
                 getRecipe({
-                    abortController,
+                    abortSignal: abortController.signal,
                     token: context.auth.token,
                     username: params.username,
                     slug: params.slug