Oppdaterer typer og mock-data til GraphQL-schemaet (#70)

client/src/components/recipe/RecipeCard.tsx

@@ -9,13 +9,13 @@ type RecipeCardProps = {
 
 export function RecipeCard({ recipe }: RecipeCardProps) {
     return (
-        <Link to={`/recipes/${recipe.recipeId}`} className="block h-full rounded-lg focus-visible:outline-2 focus-visible:outline-primary">
+        <Link to={`/recipes/${recipe.id}`} className="block h-full rounded-lg focus-visible:outline-2 focus-visible:outline-primary">
             <article className="border border-olive rounded-lg p-4 text-black h-full bg-secondary/50 transition hover:shadow-lg hover:border-primary group flex flex-col">
-                <img className="w-full aspect-square object-cover rounded-md" src={recipe.imageURL} alt={recipe.title}/>
+                <img className="w-full aspect-square object-cover rounded-md" src={recipe.imageUrl ?? '/images/placeholder.webp'} alt={recipe.title}/>
                 <h3 className="text-lg font-semibold group-hover:underline min-h-14">{recipe.title}</h3>
                 <div className="flex justify-between">
-                    <p>{recipe.prepTime} minutter</p>
-                    <p>{recipe.portions} porsjoner</p>
+                    <p>{recipe.prepTimeMinutes} minutter</p>
+                    <p>{recipe.servings} porsjoner</p>
                 </div>
                 <div className="mt-auto">
                     {recipe.averageRating !== null ?(

client/src/components/recipe/RecipeDetail.tsx

@@ -17,8 +17,8 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
                 <div className="flex flex-wrap items-center justify-between gap-2 mb-4">
                     <ul className="flex flex-wrap gap-2">
                         {recipe.tags.map((tag) => (
-                            <li className="rounded-full bg-olive text-background px-3 py-1 text-sm" key={tag.tagId}>
-                                {tag.tagName}
+                            <li className="rounded-full bg-olive text-background px-3 py-1 text-sm" key={tag.id}>
+                                {tag.name}
                             </li>
                         ))}
                     </ul>
@@ -40,18 +40,18 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
                     <p>{recipe.description}</p>
                 </div>
                 <div className="flex justify-between">
-                    <p className="border border-olive rounded-full flex items-center gap-1"><AccessTimeIcon/>{recipe.prepTime} minutter</p>
-                    <p className="border border-olive rounded-full flex items-center gap-1"><RestaurantIcon/>{recipe.portions} porsjoner</p>
+                    <p className="border border-olive rounded-full flex items-center gap-1"><AccessTimeIcon/>{recipe.prepTimeMinutes} minutter</p>
+                    <p className="border border-olive rounded-full flex items-center gap-1"><RestaurantIcon/>{recipe.servings} porsjoner</p>
                 </div>
             </section>
             <section className="rounded-lg">
-                <img className="w-full h-72 object-cover bg-pink-dark rounded-lg" src={recipe.imageURL} alt={recipe.title}/>
+                <img className="w-full h-72 object-cover bg-pink-dark rounded-lg" src={recipe.imageUrl ?? '/images/placeholder.webp'} alt={recipe.title}/>
             </section>
             <section className="border border-olive rounded-lg p-4 bg-background">
                 <h2 className="text-2xl font-semibold">Ingredienser</h2>
                 <ul>
                     {recipe.ingredients.map((ingredient) => (
-                        <li key={ingredient.ingredientId}>
+                        <li key={ingredient.id}>
                             <FormControlLabel
                                 control={
                                     <Checkbox
@@ -71,7 +71,7 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
                 <h2 className="text-2xl font-semibold">Steg</h2>
                 <ol>
                     {recipe.steps.map((step) => (
-                        <li key={step.stepId}>
+                        <li key={step.id}>
                             <FormControlLabel
                                 control={
                                     <Checkbox

client/src/components/slideshow/RecipeSlideshow.tsx

@@ -52,25 +52,25 @@ export function RecipeSlideshow({ recipes, reversed = false, theme = 'light' }:
                 <div className="flex">
                     {recipes.map((recipe) => (
                         // Én slide som bruker hele bredden i vinduet
-                        <div key={recipe.recipeId} className="min-w-0 flex-[0_0_100%]">
+                        <div key={recipe.id} className="min-w-0 flex-[0_0_100%]">
                             <div className="grid md:grid-cols-2 overflow-hidden rounded-xl">
                                 {/* Tomt alternativ for bildet, ettersom tittelen allerede står rett ved siden av bildet. */}
-                                <img className={`w-full h-80 md:h-full object-cover ${reversed ? 'md:order-last' : ''}`} src={recipe.imageURL} alt=""/>
+                                <img className={`w-full h-80 md:h-full object-cover ${reversed ? 'md:order-last' : ''}`} src={recipe.imageUrl ?? '/images/placeholder.webp'} alt=""/>
                                  <div className={`py-8 px-20 flex flex-col justify-center gap-4 ${colors.panel}`}>
                                     <h3 className="font-heading text-4xl md:text-5xl">{recipe.title}</h3>
                                     <p>{recipe.description}</p>
                                     <div className="flex gap-6">
-                                        <p className="flex items-center gap-1"><AccessTimeIcon/>{recipe.prepTime} min</p>
-                                        <p className="flex items-center gap-1"><RestaurantIcon/>{recipe.portions} porsjoner</p>
+                                        <p className="flex items-center gap-1"><AccessTimeIcon/>{recipe.prepTimeMinutes} min</p>
+                                        <p className="flex items-center gap-1"><RestaurantIcon/>{recipe.servings} porsjoner</p>
                                     </div>
                                     <ul className="flex flex-wrap gap-2 mb-4">
                                         {recipe.tags.map((tag) => (
-                                            <li className="rounded-full border border-olive-dark text-olive-dark px-3 py-1 text-sm" key={tag.tagId}>
-                                                {tag.tagName}
+                                            <li className="rounded-full border border-olive-dark text-olive-dark px-3 py-1 text-sm" key={tag.id}>
+                                                {tag.name}
                                             </li>
                                         ))}
                                     </ul>
-                                    <Link to={`/recipes/${recipe.recipeId}`} className={`self-start rounded-full ${colors.button} px-6 py-3 hover:opacity-90 flex items-center gap-1`}>Se oppskrift<ArrowForwardIcon/></Link>
+                                    <Link to={`/recipes/${recipe.id}`} className={`self-start rounded-full ${colors.button} px-6 py-3 hover:opacity-90 flex items-center gap-1`}>Se oppskrift<ArrowForwardIcon/></Link>
                                 </div>
                             </div>
                         </div>
@@ -100,7 +100,7 @@ export function RecipeSlideshow({ recipes, reversed = false, theme = 'light' }:
             <div className={`absolute bottom-4 flex gap-2 ${reversed ? 'left-4' : 'right-4'}`}>
                 {recipes.map((recipe, index) => (
                     <button
-                        key={recipe.recipeId}
+                        key={recipe.id}
                         type="button"
                         aria-label={`Gå til ${recipe.title}`}
                         aria-current={index === selectedIndex}