added planning-to-play, currently-playing and finished-games lists ---- needs small layout fix

app/(content)/(gaming)/games/[gameid]/page.tsx

-import AddGameToList from "@/components/addGameToList";
+import AddGameToFinishedList from "@/components/add-game-to-finished-list";
+import AddGameToPlanList from "@/components/add-game-to-plan-list";
+import AddGameToPlayingList from "@/components/add-game-to-playing-list";
+import AddGameToFavList from "@/components/addGameToFavList";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -82,7 +85,10 @@ export default async function GameDetail({ params }: { params: { gameid: string
                 <div className="px-6 md:px-12">
                     <div className="border-b border-gray-400 dark:border-gray-200" />
                     <div className="p-6 w-full flex justify-center">
-                        {user && <AddGameToList userGameList={fullUser?.favGameList!} gameId={params.gameid} />}
+                        {user && <AddGameToFavList userGameList={fullUser?.favGameList!} gameId={params.gameid} />}
+                        <AddGameToPlanList user={fullUser!} gameId={params.gameid} />
+                        <AddGameToFinishedList user={fullUser!} gameId={params.gameid} />
+                        <AddGameToPlayingList user={fullUser!} gameId={params.gameid} />
                     </div>
                     {/* comments */}
                 </div>

app/(content)/(user)/[userid]/page.tsx

@@ -22,10 +22,22 @@ export default async function User({ params }: { params: { userid: string } }) {
   })
 
   let favoritegames = undefined
+  let playingGames = undefined
+  let finishedGames = undefined
+  let planningGames = undefined
+
   if (fullUser?.favGameList?.length !== 0) {
     favoritegames = await getFavoriteGames(fullUser?.favGameList!)
   }
-
+  if (fullUser?.favGameList?.length !== 0) {
+    playingGames = await getFavoriteGames(fullUser?.playingGameList!)
+  }
+  if (fullUser?.favGameList?.length !== 0) {
+    finishedGames = await getFavoriteGames(fullUser?.finishedGameList!)
+  }
+  if (fullUser?.favGameList?.length !== 0) {
+    planningGames = await getFavoriteGames(fullUser?.planningGameList!)
+  }
   return (
     <div className="main-content h-full">
       <Card className="w-full h-full overflow-hidden">
@@ -79,6 +91,39 @@ export default async function User({ params }: { params: { userid: string } }) {
             <p>You have no favorites currently</p>}
         </div>
       </Card>
+
+      <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
+        <h1 className="text-2xl font-bold pb-3">Currently Playing</h1>
+        <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8 items-center">
+          {playingGames ? playingGames.map((game: IGame) => (
+            <GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} />
+          ))
+            :
+            <p>You are currently not playing any games</p>}
+        </div>
+      </Card>
+
+      <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
+        <h1 className="text-2xl font-bold pb-3">Planning on Playing</h1>
+        <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8 items-center">
+          {planningGames ? planningGames.map((game: IGame) => (
+            <GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} />
+          ))
+            :
+            <p>You are currently not planning on playing any games</p>}
+        </div>
+      </Card>
+
+      <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
+        <h1 className="text-2xl font-bold pb-3">Finished Games</h1>
+        <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8 items-center">
+          {finishedGames ? finishedGames.map((game: IGame) => (
+            <GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} />
+          ))
+            :
+            <p>You have no Games in your finished-Games-List </p>}
+        </div>
+      </Card>
     </div >
 
 

app/api/gamelists/route.ts

+import { db } from "@/lib/db";
+import { getCurrentUser } from "@/lib/session";
+import { User } from "@prisma/client";
+import { revalidatePath } from "next/cache";
+import { NextRequest, NextResponse } from "next/server";
+
+
+export async function PUT(req: NextRequest) {
+    const sessionUser = await getCurrentUser();
+
+    const data: User = await req.json()
+    console.log("userid", sessionUser!.id, "formdataid", data.id)
+    if (!sessionUser || sessionUser.id != data.id) {
+        return NextResponse.json({ status: 401, message: 'Unauthorized' });
+    }
+    console.log("put list")
+    try {
+        const dbUser = await db.user.findFirst({
+            where: {
+                id: sessionUser.id
+            },
+            select: {
+                planningGameList: true,
+                playingGameList: true,
+                finishedGameList: true
+            },
+        });
+
+        if (dbUser) {
+            if (!data.finishedGameList) data.finishedGameList = dbUser?.finishedGameList
+            if (!data.planningGameList) data.planningGameList = dbUser?.planningGameList
+            if (!data.playingGameList) data.playingGameList = dbUser?.playingGameList
+
+            await db.user.update({
+                where: {
+                    id: sessionUser.id
+                },
+                data: {
+                    finishedGameList: data.finishedGameList,
+                    planningGameList: data.planningGameList,
+                    playingGameList: data.playingGameList
+                }
+            })
+        }
+    } catch (error) {
+
+    }
+    const path = req.nextUrl.searchParams.get('path') || '/';
+    revalidatePath(path);
+
+    return NextResponse.json({ status: 201, message: 'Game Hinzugefügt' })
+
+
+}
\ No newline at end of file

components/add-game-to-finished-list.tsx

+"use client"
+
+import { useRouter } from "next/navigation";
+import { startTransition } from "react";
+import { Button } from "./ui/button";
+import { User } from "@prisma/client";
+
+export default function AddGameToFinishedList(props: { gameId: string, user: User }) {
+
+    const router = useRouter();
+    const gameId = parseFloat(props.gameId);
+    const user = props.user;
+
+    let formData: {
+        id: String;
+        gameId: Number;
+        add: boolean;
+        planningGameList: number[] | undefined;
+        playingGameList: number[] | undefined;
+        finishedGameList: number[] | undefined;
+    } = {
+        id: "",
+        gameId: -1,
+        add: true,
+        planningGameList: undefined,
+        playingGameList: undefined,
+        finishedGameList: undefined
+    };
+
+    async function removeGame(e: any) {
+        e.preventDefault()
+
+        formData.id = user.id;
+        formData.finishedGameList = props.user.finishedGameList.filter((id) => id !== gameId)
+        console.log(formData.finishedGameList)
+        const response = await fetch('/api/gamelists', {
+            method: 'PUT',
+            body: JSON.stringify(formData)
+        })
+
+        startTransition(() => {
+            // Refresh the current route and fetch new data from the server without
+            // losing client-side browser or React state.
+            router.refresh();
+        });
+        return await response.json()
+    }
+
+    async function addGame(e: any) {
+        e.preventDefault()
+
+        formData.id = user.id;
+        props.user.finishedGameList.push(gameId)
+        formData.finishedGameList = props.user.finishedGameList;
+        const response = await fetch('/api/gamelists', {
+            method: 'PUT',
+            body: JSON.stringify(formData)
+        })
+
+        startTransition(() => {
+            // Refresh the current route and fetch new data from the server without
+            // losing client-side browser or React state.
+            router.refresh();
+        });
+        return await response.json()
+    }
+
+
+    let button = <div></div>;
+    try {
+        if (!props.user.finishedGameList.includes(parseFloat(props.gameId))) {
+            button = (
+                <form onSubmit={addGame}>
+                    <Button type="submit" size="lg">
+                        Add Game To finished-playing-List
+                    </Button>
+                </form>
+            )
+        } else {
+            button = (
+                <form onSubmit={removeGame}>
+                    <Button type="submit" size="lg" variant={"secondary"}>
+                        Remove Game From finished-playing-List
+                    </Button>
+                </form>
+            )
+        }
+    } catch (error) {
+        throw new Error("Failed to check finished-playing-List");
+    }
+
+    return (
+        button
+    )
+}
+

components/add-game-to-plan-list.tsx

+"use client"
+
+import { useRouter } from "next/navigation";
+import { startTransition } from "react";
+import { Button } from "./ui/button";
+import { User } from "@prisma/client";
+
+export default function AddGameToPlanList(props: { gameId: string, user: User }) {
+
+    const router = useRouter();
+    const gameId = parseFloat(props.gameId);
+    const user = props.user;
+
+    let formData: {
+        id: String;
+        gameId: Number;
+        add: boolean;
+        planningGameList: number[] | undefined;
+        playingGameList: number[] | undefined;
+        finishedGameList: number[] | undefined;
+    } = {
+        id: "",
+        gameId: -1,
+        add: true,
+        planningGameList: undefined,
+        playingGameList: undefined,
+        finishedGameList: undefined
+    };
+
+    async function removeGame(e: any) {
+        e.preventDefault()
+
+        formData.id = user.id;
+        formData.planningGameList = props.user.planningGameList.filter((id) => id !== gameId)
+        console.log(formData.planningGameList)
+        const response = await fetch('/api/gamelists', {
+            method: 'PUT',
+            body: JSON.stringify(formData)
+        })
+
+        startTransition(() => {
+            // Refresh the current route and fetch new data from the server without
+            // losing client-side browser or React state.
+            router.refresh();
+        });
+        return await response.json()
+    }
+
+    async function addGame(e: any) {
+        e.preventDefault()
+
+        formData.id = user.id;
+        props.user.planningGameList.push(gameId)
+        formData.planningGameList = props.user.planningGameList;
+        const response = await fetch('/api/gamelists', {
+            method: 'PUT',
+            body: JSON.stringify(formData)
+        })
+
+        startTransition(() => {
+            // Refresh the current route and fetch new data from the server without
+            // losing client-side browser or React state.
+            router.refresh();
+        });
+        return await response.json()
+    }
+
+
+    let button = <div></div>;
+    try {
+        if (!props.user.planningGameList.includes(parseFloat(props.gameId))) {
+            button = (
+                <form onSubmit={addGame}>
+                    <Button type="submit" size="lg">
+                        Add Game To Planning-to-play-List
+                    </Button>
+                </form>
+            )
+        } else {
+            button = (
+                <form onSubmit={removeGame}>
+                    <Button type="submit" size="lg" variant={"secondary"}>
+                        Remove Game From Planning-to-play-List
+                    </Button>
+                </form>
+            )
+        }
+    } catch (error) {
+        throw new Error("Failed to check Planning-to-play-List");
+    }
+
+    return (
+        button
+    )
+}
+

components/add-game-to-playing-list.tsx

+"use client"
+
+import { useRouter } from "next/navigation";
+import { startTransition } from "react";
+import { Button } from "./ui/button";
+import { User } from "@prisma/client";
+
+export default function AddGameToPlayingList(props: { gameId: string, user: User }) {
+
+    const router = useRouter();
+    const gameId = parseFloat(props.gameId);
+    const user = props.user;
+
+    let formData: {
+        id: String;
+        gameId: Number;
+        add: boolean;
+        planningGameList: number[] | undefined;
+        playingGameList: number[] | undefined;
+        finishedGameList: number[] | undefined;
+    } = {
+        id: "",
+        gameId: -1,
+        add: true,
+        planningGameList: undefined,
+        playingGameList: undefined,
+        finishedGameList: undefined
+    };
+
+    async function removeGame(e: any) {
+        e.preventDefault()
+
+        formData.id = user.id;
+        formData.playingGameList = props.user.playingGameList.filter((id) => id !== gameId)
+        console.log(formData.playingGameList)
+        const response = await fetch('/api/gamelists', {
+            method: 'PUT',
+            body: JSON.stringify(formData)
+        })
+
+        startTransition(() => {
+            // Refresh the current route and fetch new data from the server without
+            // losing client-side browser or React state.
+            router.refresh();
+        });
+        return await response.json()
+    }
+
+    async function addGame(e: any) {
+        e.preventDefault()
+
+        formData.id = user.id;
+        props.user.playingGameList.push(gameId)
+        formData.playingGameList = props.user.playingGameList;
+        const response = await fetch('/api/gamelists', {
+            method: 'PUT',
+            body: JSON.stringify(formData)
+        })
+        console.log("add game")
+        startTransition(() => {
+            // Refresh the current route and fetch new data from the server without
+            // losing client-side browser or React state.
+            router.refresh();
+        });
+        return await response.json()
+    }
+
+
+    let button = <div></div>;
+    try {
+        if (!props.user.playingGameList.includes(parseFloat(props.gameId))) {
+            button = (
+                <form onSubmit={addGame}>
+                    <Button type="submit" size="lg">
+                        Add Game To currently-playing-List
+                    </Button>
+                </form>
+            )
+        } else {
+            button = (
+                <form onSubmit={removeGame}>
+                    <Button type="submit" size="lg" variant={"secondary"}>
+                        Remove Game From currently-playing-List
+                    </Button>
+                </form>
+            )
+        }
+    } catch (error) {
+        throw new Error("Failed to check playing-to-play-List");
+    }
+
+    return (
+        button
+    )
+}
+

components/addGameToList.tsx → components/addGameToFavList.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/navigation";
 import { startTransition } from "react";
 import { Button } from "./ui/button";
 
-export default function AddGameToList(props: { userGameList: Number[], gameId: string }) {
+export default function AddGameToFavList(props: { userGameList: Number[], gameId: string }) {
 
     const router = useRouter();
     const gameId = props.gameId
@@ -53,7 +53,7 @@ export default function AddGameToList(props: { userGameList: Number[], gameId: s
             button = (
                 <form onSubmit={addGame}>
                     <Button type="submit" size="lg">
-                        Add Game To List
+                        Add Game To Favorite List
                     </Button>
                 </form>
             )
@@ -61,13 +61,13 @@ export default function AddGameToList(props: { userGameList: Number[], gameId: s
             button = (
                 <form onSubmit={removeGame}>
                     <Button type="submit" size="lg" variant={"secondary"}>
-                        Remove Game From List
+                        Remove Game From Favorite List
                     </Button>
                 </form>
             )
         }
     } catch (error) {
-        throw new Error("Failed to fetch comments");
+        throw new Error("Failed to check list");
     }
 
     return (

prisma/schema.prisma

@@ -41,23 +41,26 @@ model Session {
 }
 
 model User {
-  id            String    @id @default(cuid())
-  name          String?
-  username      String?   @unique
-  email         String?   @unique
-  emailVerified DateTime?
-  password      String?
-  image         String?
-  createdAt     DateTime  @default(now()) @map("created_at")
-  updatedAt     DateTime  @default(now()) @map("updated_at")
-  favGameList   Int[]
-  accounts      Account?
-  Comment       Comment[]
-  following     Follows[] @relation("following")
-  followers     Follows[] @relation("follower")
-  Like          Like[]
-  Post          Post[]
-  sessions      Session?
+  id               String    @id @default(cuid())
+  name             String?
+  username         String?   @unique
+  email            String?   @unique
+  emailVerified    DateTime?
+  password         String?
+  image            String?
+  createdAt        DateTime  @default(now()) @map("created_at")
+  updatedAt        DateTime  @default(now()) @map("updated_at")
+  favGameList      Int[]
+  planningGameList Int[]
+  playingGameList  Int[]
+  finishedGameList Int[]
+  accounts         Account?
+  Comment          Comment[]
+  following        Follows[] @relation("following")
+  followers        Follows[] @relation("follower")
+  Like             Like[]
+  Post             Post[]
+  sessions         Session?
 
   @@map("users")
 }