From 3e1f2d9b59959981885d3e8ef6f5f9efe0f7dddc Mon Sep 17 00:00:00 2001
From: Amalie <amalisso@stud.ntnu.no>
Date: Wed, 14 Oct 2026 15:47:08 +0200
Subject: [PATCH 1/2] =?UTF-8?q?Henter=20n=C3=A5r=20oppskriftslista=20fra?=
 =?UTF-8?q?=20GraphQL=20med=20lasting=20og=20feilmelding.=20Har=20ogs?=
 =?UTF-8?q?=C3=A5=20fikset=20sm=C3=A5feil=20som=20hang=20igjen=20fra=20for?=
 =?UTF-8?q?rige=20pull=20request.=20(#70)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/recipe/RecipeList.tsx |  2 +-
 client/src/graphql/recipes.ts               | 17 +++++++++++++++++
 client/src/routes/RecipeDetailPage.tsx      |  2 +-
 client/src/routes/RecipeListPage.tsx        | 16 ++++++++++++++--
 4 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 client/src/graphql/recipes.ts

diff --git a/client/src/components/recipe/RecipeList.tsx b/client/src/components/recipe/RecipeList.tsx
index cf72f88..31bb7be 100644
--- a/client/src/components/recipe/RecipeList.tsx
+++ b/client/src/components/recipe/RecipeList.tsx
@@ -10,7 +10,7 @@ export function RecipeList({ recipes }: RecipeListProps) {
     return (
         <ul className="mt-8 grid grid-cols-2 gap-6 sm:grid-cols-2 lg:grid-cols-4">
             {recipes.map((recipe)=> (
-                <li key={recipe.recipeId} className="h-full">
+                <li key={recipe.id} className="h-full">
                     <RecipeCard recipe={recipe} />
                 </li>
             ))}
diff --git a/client/src/graphql/recipes.ts b/client/src/graphql/recipes.ts
new file mode 100644
index 0000000..fba0b40
--- /dev/null
+++ b/client/src/graphql/recipes.ts
@@ -0,0 +1,17 @@
+import { gql, type TypedDocumentNode } from '@apollo/client';
+import type { Recipe } from '../types/recipe';
+
+type GetRecipesData = { recipes: Recipe[] };
+type GetRecipesVariables = { page?: number ; pageSize?: number };
+
+export const GET_RECIPES: TypedDocumentNode<GetRecipesData, GetRecipesVariables> = gql`
+    query GetRecipes($page: Int, $pageSize: Int) {
+        recipes(page: $page, pageSize: $pageSize) {
+            id
+            imageUrl
+            title
+            prepTimeMinutes
+            servings
+        }
+    }
+`
\ No newline at end of file
diff --git a/client/src/routes/RecipeDetailPage.tsx b/client/src/routes/RecipeDetailPage.tsx
index 1eeb6fb..2a0060d 100644
--- a/client/src/routes/RecipeDetailPage.tsx
+++ b/client/src/routes/RecipeDetailPage.tsx
@@ -5,7 +5,7 @@ import { RecipeDetail } from '../components/recipe/RecipeDetail';
 // Placeholder for en oppskrift. Henter id fra URL-en. som /recipes/5 gir id = 5
 export default function RecipeDetailPage() {
   const { id } = useParams();
-  const recipe = recipes.find((r) => r.recipeId === id);
+  const recipe = recipes.find((r) => r.id === id);
   if (!recipe) {
     return <p>Fant ikke oppskriften.</p>
   }
diff --git a/client/src/routes/RecipeListPage.tsx b/client/src/routes/RecipeListPage.tsx
index 9db5c1a..89bb567 100644
--- a/client/src/routes/RecipeListPage.tsx
+++ b/client/src/routes/RecipeListPage.tsx
@@ -1,6 +1,7 @@
 import { useSearchParams } from 'react-router';
 import { RecipeList } from '../components/recipe/RecipeList';
-import { recipes} from '../mocks/recipes';
+import { useQuery } from '@apollo/client/react';
+import { GET_RECIPES } from '../graphql/recipes';
 
 // Listen over alle oppskrifter eller søksresultatet
 // Selve søkefeltet ligger i headeren. Resultatene kobles til senere.
@@ -8,12 +9,23 @@ export default function RecipeListPage() {
   const [searchParams] = useSearchParams();
   const query = searchParams.get('q') ?? '';
 
+  const { data, loading, error } = useQuery(GET_RECIPES, {
+    variables: { page: 1, pageSize: 12 },
+  });
+
+  if (loading) {
+    return <p role="status">Laster oppskrifter...</p>
+  }
+  if(error) {
+    return <p role="alert">Kunne ikke hente oppskriftene. Prøv igjen senere.</p>
+  }
+
   return (
     <>
       <h1 className="font-heading text-4xl md:text-5xl">Oppskrifter</h1>
 
       {query && <p className="mt-4">Alt med «{query}»</p>}
-      <RecipeList recipes={ recipes } />
+      <RecipeList recipes={data?.recipes ?? []} />
     </>
   );
 }

From c8cb82251fb03cac31e8c074347e831672a70b63 Mon Sep 17 00:00:00 2001
From: Amalie <amalisso@stud.ntnu.no>
Date: Wed, 14 Oct 2026 16:08:50 +0200
Subject: [PATCH 2/2] Legg til paginering med Last flere (#70)

---
 client/src/routes/RecipeListPage.tsx | 48 +++++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/client/src/routes/RecipeListPage.tsx b/client/src/routes/RecipeListPage.tsx
index 89bb567..85325eb 100644
--- a/client/src/routes/RecipeListPage.tsx
+++ b/client/src/routes/RecipeListPage.tsx
@@ -2,6 +2,9 @@ import { useSearchParams } from 'react-router';
 import { RecipeList } from '../components/recipe/RecipeList';
 import { useQuery } from '@apollo/client/react';
 import { GET_RECIPES } from '../graphql/recipes';
+import { useState } from 'react';
+
+const PAGE_SIZE = 12;
 
 // Listen over alle oppskrifter eller søksresultatet
 // Selve søkefeltet ligger i headeren. Resultatene kobles til senere.
@@ -9,23 +12,60 @@ export default function RecipeListPage() {
   const [searchParams] = useSearchParams();
   const query = searchParams.get('q') ?? '';
 
-  const { data, loading, error } = useQuery(GET_RECIPES, {
-    variables: { page: 1, pageSize: 12 },
+  const { data, loading, error, fetchMore } = useQuery(GET_RECIPES, {
+    variables: { page: 1, pageSize: PAGE_SIZE },
   });
 
-  if (loading) {
+  const [hasMore, setHasMore] = useState(true);
+
+  if (loading && !data) {
     return <p role="status">Laster oppskrifter...</p>
   }
   if(error) {
     return <p role="alert">Kunne ikke hente oppskriftene. Prøv igjen senere.</p>
   }
 
+  const recipes = data?.recipes ?? [];
+
+  async function handleLoadMore() {
+    // Regner ut hvilke side som er neste. 
+    const nextPage = Math.floor(recipes.length / PAGE_SIZE) + 1;
+
+    // Henter neste side
+    const result = await fetchMore({
+      variables: {page: nextPage},
+      // Legger de nye oppskriftene etter de gamle
+      updateQuery: (previous, { fetchMoreResult }) => ({
+        recipes: [...previous.recipes, ...fetchMoreResult.recipes],
+      }),
+    });
+
+    // Dersom det er færre enn 12 er det ikke flere oppskrifter igjen.
+    if ((result.data?.recipes.length ?? 0) < PAGE_SIZE) {
+      setHasMore(false);
+    }
+  }
+
   return (
     <>
       <h1 className="font-heading text-4xl md:text-5xl">Oppskrifter</h1>
 
       {query && <p className="mt-4">Alt med «{query}»</p>}
-      <RecipeList recipes={data?.recipes ?? []} />
+      <RecipeList recipes={recipes} />
+
+      {/*Knappen vises bare hvis det kan finnes flere oppskrifter og første side er full*/}
+      {hasMore && recipes.length >= PAGE_SIZE && (
+        <div className="mt-8 flex justify-center">
+          <button
+            type="button"
+            onClick={handleLoadMore}
+            disabled={loading}
+            className="rounded-full bg-primary text-background px-6 py-3 hover:opacity-90 disabled:opacity-50"
+          >
+            {loading ? 'Laster...' : 'Last flere'}
+          </button>
+        </div>
+      )}
     </>
   );
 }