fikset forfatter

client/src/graphql/profile.ts

@@ -0,0 +1,15 @@
+import { gql, type TypedDocumentNode } from '@apollo/client';
+import type { Recipe } from '../types/recipe';
+
+// oppskriftene innlogget bruker har laget
+export const MY_RECIPES: TypedDocumentNode<{ myRecipes: Recipe[] }> = gql`
+  query MyRecipes {
+    myRecipes {
+      id
+      imageUrl
+      title
+      prepTimeMinutes
+      servings
+    }
+  }
+`;

client/src/routes/ProfilePage.tsx

@@ -3,6 +3,9 @@ import { Link, useNavigate } from 'react-router';
 import { Button } from '../components/ui/Button';
 import { PreferencesForm } from '../components/profile/PreferencesForm';
 import { useCurrentUser } from '../lib/useCurrentUser';
+import { useQuery } from '@apollo/client/react';
+import { RecipeList } from '../components/recipe/RecipeList';
+import { MY_RECIPES } from '../graphql/profile';
 
 type Tab = 'preferences' | 'favorites' | 'shared' | 'sharedWithMe';
 type RecipeTab = Exclude<Tab, 'preferences'>;
@@ -37,10 +40,16 @@ export default function ProfilePage() {
   const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState<Tab>('preferences');
 
+  // oppskriftene brukeren har laget og den henter på nytt hver gang siden åpnes på nytt
+  const { data: myRecipesData } = useQuery(MY_RECIPES, {
+    fetchPolicy: 'cache-and-network',
+  });
+
   // RequireAuth sørger for at user finnes
   if (!user) return null;
 
   const isGuest = user.authProvider === 'GUEST';
+  const myRecipes = myRecipesData?.myRecipes ?? [];
 
   // på desktop vises preferanser alltid til venstre, så høyre side viser favoritter i stedet
   const desktopTab: RecipeTab =
@@ -80,7 +89,7 @@ export default function ProfilePage() {
             {/* TODO: hent ekte tall fra backend */}
             <ul className="mt-5 flex flex-wrap gap-x-6 gap-y-3">
               {[
-                { count: 0, label: 'mine oppskrifter' },
+                { count: myRecipes.length, label: 'mine oppskrifter' },
                 { count: 0, label: 'favoritter' },
                 { count: 0, label: 'delte' },
                 { count: 0, label: 'delt med deg' },
@@ -199,17 +208,21 @@ export default function ProfilePage() {
           ))}
         </div>
 
-        <section className="rounded-large border border-dashed border-peach p-8 text-center">
-          <p>{RECIPE_TABS[desktopTab].empty}</p>
-          {desktopTab === 'favorites' && (
-            <Link
-              to="/"
-              className={`mt-3 inline-block text-primary underline ${FOCUS_RING}`}
-            >
-              Utforsk oppskrifter
-            </Link>
-          )}
-        </section>
+        {desktopTab === 'shared' && myRecipes.length > 0 ? (
+          <RecipeList recipes={myRecipes} />
+        ) : (
+          <section className="rounded-large border border-dashed border-peach p-8 text-center">
+            <p>{RECIPE_TABS[desktopTab].empty}</p>
+            {desktopTab === 'favorites' && (
+              <Link
+                to="/"
+                className={`mt-3 inline-block text-primary underline ${FOCUS_RING}`}
+              >
+                Utforsk oppskrifter
+              </Link>
+            )}
+          </section>
+        )}
       </div>
     </div>
   );

client/src/routes/RegisterPage.tsx

@@ -113,7 +113,7 @@ export default function RegisterPage() {
         </Field>
 
         {error && (
-          <p role="alert" className="font-bold text-primary">
+          <p role="alert" className="font-bold text-primary wrap-anywhere">
             {error}
           </p>
         )}

client/src/routes/TestUserLoginPage.tsx

@@ -83,7 +83,7 @@ export default function TestUserLoginPage() {
         </Field>
 
         {error && (
-          <p role="alert" className="font-bold text-primary">
+          <p role="alert" className="font-bold text-primary wrap-anywhere">
             {error}
           </p>
         )}

server/src/schema/resolvers/recipe.ts

@@ -1,4 +1,6 @@
 import { prisma } from '../../db/client';
+import { GraphQLError } from 'graphql';
+import type { Context } from '../../auth/session';
 
 export const recipeResolvers = {
   Query: {
@@ -24,13 +26,19 @@ export const recipeResolvers = {
     },
   },
   Mutation: {
-    createRecipe: async (_: unknown, args: { input: any }) => {
+    createRecipe: async (_: unknown, args: { input: any }, context: Context) => {
+      // gjøre sånn at bare innloggede brukere og gjestebrukere kan lage oppskrift
+      if (!context.userId) {
+        throw new GraphQLError('Du må være logget inn for å lage oppskrift.', {
+          extensions: { code: 'UNAUTHENTICATED' },
+        });
+      }
       const { ingredients, steps, tagNames, ...rest } = args.input;
       return prisma.recipe.create({
         data: {
           ...rest,
           status: 'PUBLISHED',
-          authorId: 'dev-user', // bytt ut når Person 2 har auth klart
+          authorId: context.userId,
           ingredients: { create: ingredients },
           steps: { create: steps },
           tags: tagNames

server/src/schema/resolvers/user.ts

@@ -20,6 +20,15 @@ export const userResolvers = {
       if (!context.userId) return null;
       return prisma.user.findUnique({ where: { id: context.userId } });
     },
+    // oppskriftenen innlogget bruker har laget, der nyest vises først
+    myRecipes: async (_: unknown, __: unknown, context: Context) => {
+      if (!context.userId) return [];
+      return prisma.recipe.findMany({
+        where: { authorId: context.userId },
+        orderBy: { createdAt: 'desc' },
+        include: { ingredients: true, steps: true, tags: true },
+      });
+    },
   },
 
   Mutation: {

server/src/schema/typeDefs/user.graphql

@@ -10,6 +10,8 @@ type User {
 extend type Query {
   # innlogget bruker og null hvis ingen er logget inn
   me: User
+  # oppskrifter innlogget bruker har laget
+  myRecipes: [Recipe!]!
 }
 
 extend type Mutation {