Commit 18392c4f authored by Michal Čaniga's avatar Michal Čaniga
Browse files

Merge branch 'feature/store' into 'master'

Feature/store

See merge request !2
parents f57a14bc ac98c53c
......@@ -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 {
......
......@@ -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 }
];
......
import { Typography } from 'antd';
import usePageTitle from '../hooks/usePageTitle';
const Store = () => {
usePageTitle('Store');
return <Typography>Store</Typography>;
};
export default Store;
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;
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;
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;
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment