Implement wishlist functionality

.gitignore

@@ -22,10 +22,9 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-*.env
 
 # Coverage
 Coverage/
 
 #Env file
-.env
+.env

src/api/wishlistLogicFrontend.ts

@@ -0,0 +1,72 @@
+import { type Game } from '../backend/steam'
+
+const backendport = 'http://it2810-10.idi.ntnu.no:3001/'
+
+async function gql<T>(query: string, variables: Record<string, unknown>): Promise<T> {
+	const res = await fetch(backendport, {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({ query, variables }),
+	});
+	if (!res.ok) throw new Error(`Request failed: ${res.status}`);
+	const json = await res.json();
+	if (json.errors) throw new Error(json.errors[0].message);
+	return json.data;
+}
+
+// Frontend function for calling backend to fetch wishlisted games of a user
+export async function fetchWishlistFrontend(userId: number | null): Promise<Game[]> {
+	const data = await gql<{ wishlist: Game[] }>(
+		`query($userId: Int!) {
+			wishlist(userId: $userId) {
+				appid name price initialprice discount img genre description
+			}
+		}`,
+		{ userId }
+	);
+	return data.wishlist;
+}
+
+// Frontend function for calling backend to add wishlisted game to a user
+export async function addToWishlistFrontend(userId: number, gameId: number): Promise<void> {
+	await gql(
+		`mutation($userId: Int!, $gameId: Int!) { addToWishlist(userId: $userId, gameId: $gameId) }`,
+		{ userId, gameId }
+	);
+}
+
+// Frontend function for calling backend to remove wishlisted game from a user
+export async function removeFromWishlistFrontend(userId: number, gameId: number): Promise<void> {
+	await gql(
+		`mutation($userId: Int!, $gameId: Int!) { removeFromWishlist(userId: $userId, gameId: $gameId) }`,
+		{ userId, gameId }
+	);
+}
+
+// Frontend function for toggeling a game to and from the wishlist
+export function toggleGameWishlist(
+	userId: number,
+	gameId: number,
+	isWishlisted: boolean
+	): Promise<void> {
+	return isWishlisted
+		? removeFromWishlistFrontend(userId, gameId)
+		: addToWishlistFrontend(userId, gameId)
+	}
+
+export function saveSortOptionWishlist(query: string) {
+	try {
+		sessionStorage.setItem("GameStart:sortOptionWishlist", JSON.stringify(query));
+	} catch (error: any) {
+		console.log(`Searchpage: Could not save sorting option to session storage: ${error.message}`)
+	}
+}
+
+export function getSortOptionWishlist(): string {
+  try {
+		const parsed = JSON.parse(sessionStorage.getItem("GameStart:sortOptionWishlist") ?? '""');
+		return typeof parsed === "string" ? parsed : "";
+	} catch {
+		return "discount-desc";
+	}
+}

src/backend/server.ts

@@ -4,9 +4,21 @@ import { type Game } from './steam.ts'
 import { pool } from './db_connection.ts'
 import { fetchGenres } from './genres.ts'
 import { signin, signup } from './userlogic_backend.ts'
+import { addToWishlist, removeFromWishlist } from './wishlistLogic.ts'
 
 // Documentation on apollo: https://www.apollographql.com/docs/deploy-preview/5dc6222f824f9e089e2a5735/apollo-server/api/apollo-server
 
+// Shared column list so `games` and `wishlist` return the same Game shape
+const GAME_COLUMNS = `
+    g.game_id AS appid,
+    g.game_name AS name,
+    g.current_price::text AS price,
+    g.initial_price::text AS initialprice,
+    g.discount_percent::text AS discount,
+    g.image_url AS img,
+    g.genre,
+    g.description`
+
 //This is a schema for the server. It tells the shape of the data and which queries exist.
 const typeDefs = `#graphql
     type Game {
@@ -28,11 +40,14 @@ const typeDefs = `#graphql
 
     type Query {
         games(limit: Int = 500, offset: Int = 0): [Game!]!
+        wishlist(userId: Int!): [Game!]!
         game(appid: Int!): Game
         genres: [String!]!
     }
-    
+
     type Mutation {
+        addToWishlist(userId: Int!, gameId: Int!): Boolean!
+        removeFromWishlist(userId: Int!, gameId: Int!): Boolean!
         signup(username: String!, email: String!, password: String!): User!
         signin(email: String!, password: String!): User!
     }
@@ -48,21 +63,25 @@ const resolvers = {
             const safeLimit = Math.min(Math.max(limit, 0), 500)
             const safeOffset = Math.max(offset, 0)
             const { rows } = await pool.query(
-                `SELECT game_id AS appid,
-                        game_name AS name,
-                        current_price::text AS price,
-                        initial_price::text AS initialprice,
-                        discount_percent::text AS discount,
-                        image_url AS img,
-                        genre,
-                        description
-                 FROM games
-                 ORDER BY game_id
+                `SELECT ${GAME_COLUMNS}
+                 FROM games g
+                 ORDER BY g.game_id
                  LIMIT $1 OFFSET $2`,
                 [safeLimit, safeOffset],
             )
             return rows
         },
+        wishlist: async (_: unknown, { userId }: { userId: number }): Promise<Game[]> => {
+            const { rows } = await pool.query(
+                `SELECT ${GAME_COLUMNS}
+                 FROM wishlist w
+                 JOIN games g ON g.game_id = w.game_id
+                 WHERE w.user_id = $1
+                 ORDER BY g.game_name`,
+                [userId]
+            )
+            return rows
+        },
         game: async (_parent: unknown, { appid }: { appid: number }): Promise<Game | null> => {
             const { rows } = await pool.query(
                 `SELECT game_id AS appid,
@@ -82,6 +101,14 @@ const resolvers = {
         genres: () => fetchGenres(),
     },
     Mutation: {
+        addToWishlist: async (_: unknown, { userId, gameId }: { userId: number; gameId: number }) => {
+            await addToWishlist(userId, gameId)
+            return true
+        },
+        removeFromWishlist: async (_: unknown, { userId, gameId }: { userId: number; gameId: number }) => {
+            await removeFromWishlist(userId, gameId)
+            return true
+        },
         signup: (_parent: unknown, { username, email, password }: { username: string; email:string; password: string }) =>
             signup(username, email, password),
         signin: (_p: unknown, { email, password }: { email: string; password: string }) =>

src/backend/wishlistLogic.ts

@@ -0,0 +1,31 @@
+import { pool } from './db_connection.ts'
+
+export async function addToWishlist(userId: number, gameId: number): Promise<{ ok: true; gameId: number }> {
+    if (!userId) throw new Error("addToWishlist: userId can not be empty")
+    if (!gameId) throw new Error("addToWishlist: gameId can not be empty")
+
+    try {
+        await pool.query(
+            `INSERT INTO wishlist (user_id, game_id)
+             VALUES ($1, $2)
+             ON CONFLICT (user_id, game_id) DO NOTHING`,
+            [userId, gameId]
+        )
+    } catch (err: any) {
+        // 23503 = foreign key violation (user or game doesn't exist)
+        if (err.code === '23503') throw new Error("addToWishlist: user or game does not exist")
+        throw err
+    }
+    return { ok: true, gameId }
+}
+
+export async function removeFromWishlist(userId: number, gameId: number): Promise<{ ok: true; gameId: number }> {
+    if (!userId) throw new Error("removeFromWishlist: userId can not be empty")
+    if (!gameId) throw new Error("removeFromWishlist: gameId can not be empty")
+
+    await pool.query(
+        'DELETE FROM wishlist WHERE user_id = $1 AND game_id = $2',
+        [userId, gameId]
+    )
+    return { ok: true, gameId }
+}

src/components/WishlistCard.tsx

@@ -8,14 +8,9 @@ export const WishlistCard = styled(MuiCard)(({ theme }) => ({
     boxSizing: 'border-box',
     padding: theme.spacing(2),
     gap: theme.spacing(2),
-    // margin: 'auto',
     boxShadow:
         '0px 5px 15px 0px var(--box-shadow-color), 0px 15px 35px -5px var(--box-shadow-color)',
     [theme.breakpoints.up('sm')]: {
         padding: theme.spacing(4),
     },
-    ...theme.applyStyles('dark', {
-        boxShadow:
-            '0px 5px 15px 0px var(--box-shadow-color), 0px 15px 35px -5px var(--box-shadow-color)',
-    }),
 }))

src/components/activegamecard.tsx

@@ -1,22 +1,80 @@
-import Box from '@mui/material/Box'
-import Button from '@mui/material/Button'
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import CardMedia from '@mui/material/CardMedia'
-import Chip from '@mui/material/Chip'
-import Divider from '@mui/material/Divider'
-import Typography from '@mui/material/Typography'
+import { Box, Button, Card, CardContent, CardMedia, Chip, Divider, Typography } from '@mui/material'
 import '../css/activegamecard.css'
 import type { GameData } from '../types/game'
+import { getSavedUser } from '../api/userlogic_frontend'
+import { useState, useEffect } from 'react'
+import { removeFromWishlistFrontend, 
+    addToWishlistFrontend, 
+    fetchWishlistFrontend } 
+    from '../api/wishlistLogicFrontend'
 
 type ActiveGameCardProps = {
     game: GameData
+    onRemoveFromWishlist?: (gameId: number) => void
     onAddToWishlist?: (gameId: number) => void
 }
 
-export default function ActiveGameCard({ game, onAddToWishlist }: ActiveGameCardProps) {
+export default function ActiveGameCard({ game, onAddToWishlist, onRemoveFromWishlist }: ActiveGameCardProps) {
+    const [isWishlisted, setIsWishlisted] = useState(false)
+    const [isChecking, setIsChecking] = useState(true)
+    const [isBusy, setIsBusy] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
     const isOnSale =
         game.salePercent !== undefined && game.salePercent > 0 && game.salePercent <= 100
+
+    // Finds out if the signed in user already has this game on their wishlist
+    useEffect(() => {
+        let cancelled = false
+        const user = getSavedUser()
+
+        if (!user) {
+            setIsChecking(false)
+            return
+        }
+
+        fetchWishlistFrontend(user.id)
+            .then((wishlist) => {
+                if (!cancelled) setIsWishlisted(wishlist.some((wishlisted) => wishlisted.appid === game.id))
+            })
+            .catch(() => {
+                if (!cancelled) setError('Could not check your wishlist')
+            })
+            .finally(() => {
+                if (!cancelled) setIsChecking(false)
+            })
+
+        return () => {
+            cancelled = true
+        }
+    }, [game.id])
+
+    // Adds the game to the wishlist, or removes it if it is already there
+    async function handleToggleWishlist() {
+        const user = getSavedUser()
+        if (!user) {
+            setError('You need to sign in to change your wishlist')
+            return
+        }
+
+        setIsBusy(true)
+        setError(null)
+        try {
+            if (isWishlisted) {
+                await removeFromWishlistFrontend(user.id, game.id)
+                setIsWishlisted(false)
+                onRemoveFromWishlist?.(game.id)
+            } else {
+                await addToWishlistFrontend(user.id, game.id)
+                setIsWishlisted(true)
+                onAddToWishlist?.(game.id)
+            }
+        } catch (err: unknown) {
+            setError(err instanceof Error ? err.message : 'Could not update wishlist')
+        } finally {
+            setIsBusy(false)
+        }
+    }
 
     return (
         <Box component="main" className="activeGameLayout">
@@ -30,10 +88,12 @@ export default function ActiveGameCard({ game, onAddToWishlist }: ActiveGameCard
                 <Button
                     className="activeGameWishlistButton"
                     variant="contained"
-                    onClick={() => onAddToWishlist?.(game.id)}
+                    disabled={isChecking || isBusy}
+                    onClick={handleToggleWishlist}
                 >
-                    Add to wishlist
+                    {isWishlisted ? 'Remove from wishlist' : 'Add to wishlist'}
                 </Button>
+                {error && <p role="alert">{error}</p>}
             </Card>
             <Box className="activeGameDetails">
                 <Card className="activeGameInfoCard">

src/components/passivegamecard.tsx

@@ -9,14 +9,20 @@ import type { PassiveGameData } from '../types/game'
 
 type Props = {
     game: PassiveGameData
+    rank?: number
 }
 
-export default function PassiveGameCard({ game }: Props) {
+export default function PassiveGameCard({ game, rank }: Props) {
     const isOnSale =
         game.salePercent !== undefined && game.salePercent > 0 && game.salePercent <= 100
 
     return (
-        <Card className="passiveGameCard">
+        <Card className={`passiveGameCard${rank === undefined ? '' : ' rankedPassiveGameCard'}`}>
+            {rank !== undefined && (
+                <span className="passiveGameCardRank" aria-label={`Rank ${rank}`}>
+                    #{rank}
+                </span>
+            )}
             <CardActionArea
                 className="passiveGameCardAction"
                 component={Link}
@@ -37,7 +43,7 @@ export default function PassiveGameCard({ game }: Props) {
                     <div className="GamePrice">
                         <div className="GameSale">{isOnSale ? `-${game.salePercent}%` : ''}</div>
                         <Typography className="passiveGameCardPrice" component="p">
-                            {game.price.toFixed(2)}
+                            {game.price.toFixed(2)} $
                         </Typography>
                     </div>
                 </CardContent>