Shop Purchase Update

src/app/(app)/shop/page.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import { useDevice } from "@/lib/context/DeviceContext";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
-// Default Profile Pictures are /avatar/p1.png to /avatar/p5.png
 const defaultPics = [
 	{ src: "/avatar/p1.png", id: 1 },
 	{ src: "/avatar/p2.png", id: 2 },
@@ -12,26 +11,34 @@ const defaultPics = [
 	{ src: "/avatar/p5.png", id: 5 },
 ];
 
-// Purchaseable Profile Pictures are /avatar/p6.png to /avatar/p16.png
 const purchasablePics = [
-    { src: "/avatar/p6.png", price: 250 },
+	{ id: 6, src: "/avatar/p6.png", price: 250 },
-    { src: "/avatar/p7.png", price: 250 },
+	{ id: 7, src: "/avatar/p7.png", price: 250 },
-    { src: "/avatar/p8.png", price: 2000 },
+	{ id: 8, src: "/avatar/p8.png", price: 2000 },
-    { src: "/avatar/p9.png", price: 2000 },
+	{ id: 9, src: "/avatar/p9.png", price: 2000 },
-    { src: "/avatar/p10.png", price: 2000 },
+	{ id: 10, src: "/avatar/p10.png", price: 2000 },
-    { src: "/avatar/p11.png", price: 2000 },
+	{ id: 11, src: "/avatar/p11.png", price: 2000 },
-    { src: "/avatar/p12.png", price: 2000 },
+	{ id: 12, src: "/avatar/p12.png", price: 2000 },
-    { src: "/avatar/p13.png", price: 10000 },
+	{ id: 13, src: "/avatar/p13.png", price: 10000 },
-    { src: "/avatar/p14.png", price: 10000 },
+	{ id: 14, src: "/avatar/p14.png", price: 10000 },
-    { src: "/avatar/p15.png", price: 10000 },
+	{ id: 15, src: "/avatar/p15.png", price: 10000 },
-    { src: "/avatar/p16.png", price: 10000 },
+	{ id: 16, src: "/avatar/p16.png", price: 10000 },
 ];
 
 export default function ShopPage() {
 	const { isAuthenticated, session } = useDevice();
-    const [points, setPoints] = useState(session?.points || 0);
+
-    const [avatar, setAvatar] = useState(session?.avatar || 1);
+	const [points, setPoints] = useState(0);
-    const [ownedPics, setOwnedPics] = useState<string[]>(session?.ownedPics || []);
+	const [avatar, setAvatar] = useState(1);
+	const [ownedPics, setOwnedPics] = useState<number[]>([]);
+
+	useEffect(() => {
+		if (isAuthenticated && session) {
+			setPoints(session.points || 0);
+			setAvatar(session.avatar || 1);
+			setOwnedPics(session.inventory || []);
+		}
+	}, [session]);
 
 	const handleAvatarSelect = async (id: number) => {
 		const formData = new FormData();
@@ -56,16 +63,17 @@ export default function ShopPage() {
 		}
 	};
 
-    const handlePurchase = async (src: string, price: number) => {
+	const handlePurchase = async (id: number, price: number) => {
 		if (points < price) {
 			alert("You don't have enough points to purchase this profile picture.");
 			return;
 		}
 
-        // Update the user's avatar and points on the server
+		// Update the user's avatar, points, and inventory on the server
 		const formData = new FormData();
-        formData.append("avatar", src);
+		formData.append("avatar", id.toString());
 		formData.append("points", (points - price).toString());
+		formData.append("inventory", id.toString());
 
 		try {
 			const response = await fetch("/api/me", {
@@ -77,8 +85,8 @@ export default function ShopPage() {
 			if (response.ok) {
 				alert("Profile picture purchased successfully!");
 				setPoints(points - price);
-                setAvatar(src);
+				setAvatar(id);
-                setOwnedPics([...ownedPics, src]);
+				setOwnedPics(prev => [...prev, id]);
 			} else {
 				alert(data.message || "Failed to purchase profile picture.");
 			}
@@ -89,7 +97,7 @@ export default function ShopPage() {
 	};
 
 	return (
-        <div className="px-6 py-10 max-w-full lg:max-w-4xl mx-auto font-sans text-neutral-100">
+		<div className="px-6 py-10 my-10 max-w-full lg:max-w-4xl mx-auto font-sans text-neutral-100">
 			{/* User Header */}
 			<div className="items-center gap-4 mb-6">
 				<div className="w-full text-center bg-[color:var(--color-surface-600)]/60 backdrop-blur-md rounded-xl px-6 py-5 my-6 gap-4 shadow-sm inline-flex items-center">
@@ -148,22 +156,34 @@ export default function ShopPage() {
 				<div className="grid grid-cols-2 sm:grid-cols-4 gap-6">
 					{purchasablePics.map((pic) => (
 						<div
-                            key={pic.src}
+							key={pic.id}
 							className="bg-[color:var(--color-surface-600)] rounded-lg p-3 flex flex-col items-center text-center shadow-sm"
 						>
 							<img
 								src={pic.src}
 								alt="PFP"
-                                className="w-24 h-24 object-cover rounded border border-gray-500 mb-2"
+								className="w-24 h-24 object-cover rounded mb-2"
 							/>
 							<p className="text-sm mb-1">{pic.price} pts</p>
+							{ownedPics.includes(pic.id) ? (
+								<button
+									className={`px-3 py-1 ${
+										avatar === pic.id
+											? "bg-success-700 text-white"
+											: "bg-success-600 text-white hover:bg-success-700"
+									} text-sm rounded`}
+									onClick={() => handleAvatarSelect(pic.id)}
+								>
+									{avatar === pic.id ? "Selected" : "Select"}
+								</button>
+							) : (
 								<button
 									className="px-3 py-1 bg-success-600 text-sm text-white rounded hover:bg-success-700"
-                                onClick={() => handlePurchase(pic.src, pic.price)}
+									onClick={() => handlePurchase(pic.id, pic.price)}
-                                disabled={ownedPics.includes(pic.src)}
 								>
-                                {ownedPics.includes(pic.src) ? "Owned" : "Buy"}
+									Purchase
 								</button>
+							)}
 						</div>
 					))}
 				</div>

src/app/api/me/route.ts

@@ -42,7 +42,7 @@ export async function POST(req: Request) {
 		if(inventory) {
 			let inventoryData = userData.inventory;
 			if (!inventoryData) inventoryData = [];
-			inventoryData.push(inventory.toString());
+			inventoryData.push(parseInt(inventory.toString()));
 
 			userData = await db.users.update(userData.id, { inventory: inventoryData });
 			if (!userData) return NextResponse.json({ message: "Failed to update inventory" }, { status: 500 });

src/lib/scripts/User.ts

@@ -12,7 +12,7 @@ const userSchema = new mongoose.Schema({
     bio: String,
     avatar: Number,
 	points: Number,
-	inventory: Array,
+	inventory: Array<Number>,
 	friends: Array<String>,
 	requests: Array<String>,
 });