dropdown fix + avoiding 4api calls in the same place

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

@@ -67,7 +67,7 @@ export default async function GameDetail({ params }: { params: { gameid: string
                                     className="object-cover rounded-lg" />
                             </Card>
                             <div className="flex justify-start p-6">
-                                <AddGameDropdown fullUser={fullUser!} gameid={params.gameid} />
+                                {user && < AddGameDropdown fullUser={fullUser!} gameid={params.gameid} />}
                             </div>
                         </div>
 

components/add-game-dropdown.tsx

@@ -11,6 +11,7 @@ import { Card } from "./ui/card"
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "./ui/select"
 
 export default function AddGameDropdown(props: { gameid: string, fullUser: User }) {
+
     return (
         <>
             <Select>
@@ -19,7 +20,6 @@ export default function AddGameDropdown(props: { gameid: string, fullUser: User
                 </SelectTrigger>
                 <SelectContent>
                     <SelectGroup>
-                        <SelectLabel>Status</SelectLabel>
                         <AddGameToPlanList user={props.fullUser!} gameId={props.gameid} />
                         <AddGameToFinishedList user={props.fullUser!} gameId={props.gameid} />
                         <AddGameToPlayingList user={props.fullUser!} gameId={props.gameid} />

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

@@ -32,7 +32,6 @@ export default function AddGameToFinishedList(props: { gameId: string, user: Use
 
         formData.id = user.id
         formData.finishedGameList = props.user.finishedGameList.filter((id) => id !== gameId)
-        console.log(formData.finishedGameList)
         const response = await fetch('/api/users/gamelists', {
             method: 'PUT',
             body: JSON.stringify(formData)
@@ -71,16 +70,16 @@ export default function AddGameToFinishedList(props: { gameId: string, user: Use
         if (!props.user.finishedGameList.includes(parseFloat(props.gameId))) {
             button = (
                 <form onSubmit={addGame}>
-                    <Button type="submit" size="lg">
-                        Add Game To finished-playing-List
+                    <Button type="submit" size="lg" variant="ghost">
+                        Finished
                     </Button>
                 </form>
             )
         } else {
             button = (
                 <form onSubmit={removeGame}>
-                    <Button type="submit" size="lg" variant={"secondary"}>
-                        Remove Game From finished-playing-List
+                    <Button type="submit" size="lg" variant="ghost">
+                        Remove Finished
                     </Button>
                 </form>
             )

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

@@ -32,7 +32,6 @@ export default function AddGameToPlanList(props: { gameId: string, user: User })
 
         formData.id = user.id
         formData.planningGameList = props.user.planningGameList.filter((id) => id !== gameId)
-        console.log(formData.planningGameList)
         const response = await fetch('/api/users/gamelists', {
             method: 'PUT',
             body: JSON.stringify(formData)
@@ -71,16 +70,16 @@ export default function AddGameToPlanList(props: { gameId: string, user: User })
         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 type="submit" size="lg" variant={"ghost"}>
+                        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 type="submit" size="lg" variant={"ghost"}>
+                        Remove Planning-to-play
                     </Button>
                 </form>
             )

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

@@ -32,7 +32,6 @@ export default function AddGameToPlayingList(props: { gameId: string, user: User
 
         formData.id = user.id
         formData.playingGameList = props.user.playingGameList.filter((id) => id !== gameId)
-        console.log(formData.playingGameList)
         const response = await fetch('/api/users/gamelists', {
             method: 'PUT',
             body: JSON.stringify(formData)
@@ -56,7 +55,7 @@ export default function AddGameToPlayingList(props: { gameId: string, user: User
             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.
@@ -71,16 +70,16 @@ export default function AddGameToPlayingList(props: { gameId: string, user: User
         if (!props.user.playingGameList.includes(parseFloat(props.gameId))) {
             button = (
                 <form onSubmit={addGame}>
-                    <Button type="submit" size="lg">
-                        Add Game To currently-playing-List
+                    <Button type="submit" size="lg" variant={"ghost"}>
+                        Currently Playing
                     </Button>
                 </form>
             )
         } else {
             button = (
                 <form onSubmit={removeGame}>
-                    <Button type="submit" size="lg" variant={"secondary"}>
-                        Remove Game From currently-playing-List
+                    <Button type="submit" size="lg" variant={"ghost"}>
+                        Remove Currently Playing
                     </Button>
                 </form>
             )

components/addGameToFavList.tsx

@@ -53,7 +53,7 @@ export default function AddGameToFavList(props: { userGameList: Number[], gameId
             button = (
                 <form onSubmit={addGame}>
                     <Button type="submit" size="lg">
-                        Add Game To Favorite List
+                        Add To Favorites
                     </Button>
                 </form>
             )
@@ -61,7 +61,7 @@ export default function AddGameToFavList(props: { userGameList: Number[], gameId
             button = (
                 <form onSubmit={removeGame}>
                     <Button type="submit" size="lg" variant={"secondary"}>
-                        Remove Game From Favorite List
+                        Remove From Favorites
                     </Button>
                 </form>
             )

components/profile/components/user-games.tsx

@@ -32,24 +32,39 @@ export const UserGames = async ({ username }: { username: string }) => {
         redirect('/home')
     }
 
-    let favoritegames = undefined
+    let favoritegames = undefined;
     let playingGames = undefined
     let finishedGames = undefined
     let planningGames = undefined
 
-    if (fullUser?.favGameList?.length !== 0 && fullUser?.favGameList?.length != undefined) {
-        favoritegames = await getFavoriteGames(fullUser?.favGameList!)
-    }
-    if (fullUser?.playingGameList?.length !== 0) {
-        playingGames = await getFavoriteGames(fullUser?.playingGameList!)
-    }
-    if (fullUser?.finishedGameList?.length !== 0) {
-        finishedGames = await getFavoriteGames(fullUser?.finishedGameList!)
-    }
-    if (fullUser?.planningGameList?.length !== 0) {
-        planningGames = await getFavoriteGames(fullUser?.planningGameList!)
+    // new Implementation
+    let allgames = fullUser.favGameList.concat(fullUser.playingGameList, fullUser.finishedGameList, fullUser.planningGameList);
+    let fetchedGames = undefined;
+    if (allgames.length !== 0) {
+        fetchedGames = await getFavoriteGames(allgames)
+
+        favoritegames = fetchedGames.filter(game => fullUser.favGameList.includes(game.id));
+        playingGames = fetchedGames.filter(game => fullUser.playingGameList.includes(game.id));
+        finishedGames = fetchedGames.filter(game => fullUser.finishedGameList.includes(game.id));
+        planningGames = fetchedGames.filter(game => fullUser.planningGameList.includes(game.id));
     }
 
+
+    //     Old Implementation
+
+    /*     if (fullUser?.favGameList?.length !== 0 && fullUser?.favGameList?.length != undefined) {
+            favoritegames = await getFavoriteGames(fullUser?.favGameList!)
+        }
+        if (fullUser?.playingGameList?.length !== 0) {
+            playingGames = await getFavoriteGames(fullUser?.playingGameList!)
+        }
+        if (fullUser?.finishedGameList?.length !== 0) {
+            finishedGames = await getFavoriteGames(fullUser?.finishedGameList!)
+        }
+        if (fullUser?.planningGameList?.length !== 0) {
+            planningGames = await getFavoriteGames(fullUser?.planningGameList!)
+        } */
+
     return (
         <div className="p-3 space-y-12">
             <div>