purchase functionality added

src/pages/Store.tsx

@@ -7,6 +7,7 @@ import { Food, food } from '../data/food';
 import { Pokeball, pokeballs } from '../data/pokeballs';
 import { useLoggedInUser } from '../hooks/useLoggedInUser';
 import { Loading } from '../utils/Loading';
+import { updateUserDataInFirebase } from '../utils/firebase';
 
 const Store = () => {
 	usePageTitle('Store');
@@ -18,6 +19,54 @@ const Store = () => {
 		[selectedItem]
 	);
 
+	const buyItem = async (item: Food | Pokeball) => {
+		const modal = Modal.confirm({
+			title: 'Confirm purchase',
+			content: `Are you sure that you want to buy ${item.name}?`,
+			onOk: () => {
+				if (!userData) {
+					return;
+				}
+
+				if (userData.actualScore < item.price) {
+					modal.destroy();
+					Modal.error({ title: 'Insufficient funds' });
+					return;
+				}
+
+				const foodIds = userData.foodIds;
+				const pokeballIds = userData.pokeballIds;
+
+				if ((item as Food).restores !== undefined) {
+					foodIds.push(item.id);
+				} else {
+					pokeballIds.push(item.id);
+				}
+
+				// TODO fix this -> userData.id ?? ''
+				modal.destroy();
+				updateUserDataInFirebase(userData.id ?? '', {
+					...userData,
+					actualScore: userData.actualScore - item.price,
+					foodIds,
+					pokeballIds
+				})
+					.then(() =>
+						Modal.success({
+							title: 'Success',
+							content: `You are now a proud owner of the ${item.name}`
+						})
+					)
+					.catch(() =>
+						Modal.error({
+							title: 'Oops ... an error occured',
+							content: 'An error occured during a purchase. Try again later'
+						})
+					);
+			}
+		});
+	};
+
 	if (!userData) {
 		return <Loading />;
 	}
@@ -47,13 +96,15 @@ const Store = () => {
 							<p>
 								Price: {item.price} <DollarOutlined />
 							</p>
-							<Button type="primary" onClick={() => setSelectedItem(item)}>
+							{/* <Button type="primary" onClick={() => setSelectedItem(item)}> */}
+							<Button type="primary" onClick={() => buyItem(item)}>
 								Buy
 							</Button>
 						</Card>
 					</Col>
 				))}
 			</Row>
+
 			<Modal
 				title="Confirm purchase"
 				visible={isModalVisible}