Merge branch 'feature/store' into 'master'

Feature/store

See merge request !2

src/App.tsx

@@ -21,7 +21,7 @@ import { useMemo } from 'react';
 import Encyclopedia from './pages/Encyclopedia';
 import Home from './pages/Home/Home';
 import Leaderboard from './pages/Leaderboard/Leaderboard';
-import Store from './pages/Store';
+import Store from './pages/Store/Store';
 import { signOut } from './utils/firebase';
 import { useLoggedInUser, UserProvider } from './hooks/useLoggedInUser';
 import {

src/data/pokeballs.ts

@@ -9,7 +9,13 @@ export type Pokeball = {
 };
 
 export const pokeballs: Pokeball[] = [
-	{ id: 1, name: 'Pokeball 1', price: 12, catches: 1 },
+	{
+		id: 1,
+		name: 'Pokeball 1',
+		price: 12,
+		catches: 1,
+		image: 'https://www.downloadclipart.net/large/pokeball-png-photos.png'
+	},
 	{ id: 2, name: 'Pokeball 2', price: 48, catches: 2 },
 	{ id: 3, name: 'Pokeball 3', price: 19, catches: 3 }
 ];

src/pages/Store.tsx

-import { Typography } from 'antd';
-
-import usePageTitle from '../hooks/usePageTitle';
-
-const Store = () => {
-	usePageTitle('Store');
-	return <Typography>Store</Typography>;
-};
-
-export default Store;

src/pages/Store/Funds.tsx

+import { DollarOutlined } from '@ant-design/icons';
+import { Typography } from 'antd';
+
+const Funds = ({ funds }: { funds: number }) => (
+	<div style={{ textAlign: 'right', margin: '1rem' }}>
+		<Typography>
+			Current funds: {funds} <DollarOutlined />
+		</Typography>
+	</div>
+);
+
+export default Funds;

src/pages/Store/ItemCard.tsx

+import { DollarOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { Button, Card, Col } from 'antd';
+
+import { Food } from '../../data/food';
+import { Pokeball } from '../../data/pokeballs';
+
+type Item = Food | Pokeball;
+const ItemCard = ({
+	item,
+	callback
+}: {
+	item: Item;
+	callback: (item: Item) => Promise<void>;
+}) => (
+	<Col style={{ width: '200px' }}>
+		<Card
+			title={item.name}
+			hoverable
+			cover={
+				item.image ? (
+					<img alt={item.name} src={item.image} />
+				) : (
+					<QuestionCircleOutlined style={{ fontSize: '190px' }} />
+				)
+			}
+		>
+			<p>
+				Price: {item.price} <DollarOutlined />
+			</p>
+			<Button type="primary" onClick={() => callback(item)}>
+				Buy
+			</Button>
+		</Card>
+	</Col>
+);
+
+export default ItemCard;

src/pages/Store/Store.tsx

+import { Modal, Row } from 'antd';
+
+import usePageTitle from '../../hooks/usePageTitle';
+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';
+
+import Funds from './Funds';
+import ItemCard from './ItemCard';
+
+const Store = () => {
+	usePageTitle('Store');
+	const { userData } = useLoggedInUser();
+
+	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: `Congratulation! 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 />;
+	}
+
+	return (
+		<>
+			<Funds funds={userData?.actualScore} />
+
+			<Row gutter={[10, 10]} align="middle">
+				{[...food, ...pokeballs].map((item, index) => (
+					<ItemCard item={item} key={index} callback={buyItem} />
+				))}
+			</Row>
+		</>
+	);
+};
+
+export default Store;