Skip to content

Commit 1f72744

Browse files
mariocoskimariocoski
authored
Merge pull request #116 from kube-js/develop
fix: added cart view
2 parents 77981da + c7b03f9 commit 1f72744

File tree

13 files changed

+307
-23
lines changed

13 files changed

+307
-23
lines changed

‎assets/jscpd-badge.svg‎

Lines changed: 2 additions & 2 deletions
Loading

‎k8s/Chart.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ apiVersion: v1
22
description: A Helm chart for kube-ts-react-client
33
name: kube-ts-react-client
44
version: 1.0.0
5-
appVersion: 1.6.8
5+
appVersion: 1.6.12
66
home: https://cloud.docker.com/u/kubejs/repository/docker/kubejs/kube-ts-react-client
77
icon: https://avatars2.githubusercontent.com/u/47761918?s=200&v=4
88
sources:

‎k8s/values.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ replicaCount: 2
66

77
image:
88
repository: kubejs/kube-ts-react-client
9-
tag: 1.6.8
9+
tag: 1.6.12
1010
pullPolicy: Always
1111
containerPort: 80
1212

‎src/atoms/CartDropdown/index.tsx‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,11 @@ import { withStyles } from '@material-ui/core/styles';
1313
import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
1414
import _isNil from 'ramda/src/isNil';
1515
import React from 'react';
16+
import { useTranslation } from 'react-i18next';
1617
import { useHistory } from 'react-router';
1718
import courseImagePlaceholder from '../../images/course_400x180.png';
1819
import assetsUrl from '../../utils/helpers/assetsUrl';
20+
import sumBy from '../../utils/helpers/sumBy';
1921

2022
const StyledMenu = withStyles({
2123
list: {
@@ -46,6 +48,7 @@ const StyledMenu = withStyles({
4648
const CartDropdown = () => {
4749
// TODO: refactor component
4850
const [anchorEl, setAnchorEl] = React.useState(null);
51+
const { t } = useTranslation();
4952
const history = useHistory();
5053

5154
const handleClick = (event: any) => {
@@ -56,7 +59,8 @@ const CartDropdown = () => {
5659
setAnchorEl(null);
5760
};
5861

59-
const goToCart = () => {
62+
const goToCart = (e: any) => {
63+
e.preventDefault();
6064
handleClose();
6165
history.push('/cart');
6266
};
@@ -66,37 +70,43 @@ const CartDropdown = () => {
6670
history.push(`/courses/${slug}`);
6771
};
6872

69-
const cartItems: any[] = [
73+
const items: any[] = [
7074
{
7175
author: 'Martin Cook',
72-
price: '£19.99',
76+
id: 1,
77+
price: 19.99,
7378
slug: 'designing-microservices-architecture',
7479
title: 'Designing microservices architecture',
7580
},
7681
{
7782
author: 'Thomas Tik',
78-
price: '£19.99',
83+
id: 2,
84+
price: 19.99,
7985
slug: 'designing-microservices-architecture',
8086
title: 'Designing microservices architecture',
8187
},
8288
{
8389
author: 'Thomas Tik',
84-
price: '£19.99',
90+
id: 3,
91+
price: 19.99,
8592
slug: 'designing-microservices-architecture',
8693
title: 'Designing microservices architecture',
8794
},
8895
];
8996

97+
const total = sumBy('price')(items);
98+
9099
return (
91100
<div style={{ display: 'flex', alignItems: 'center' }}>
92101
<Button
93102
aria-controls="customized-menu"
94103
aria-haspopup="true"
95104
color="inherit"
96-
onClick={handleClick}
97-
onMouseOver={handleClick}
105+
variant="outlined"
106+
onClick={goToCart}
107+
onMouseEnter={handleClick}
98108
>
99-
<Badge badgeContent={cartItems.length || null} color="secondary" >
109+
<Badge badgeContent={items.length || null} color="secondary">
100110
<ShoppingCartIcon />
101111
</Badge>
102112
</Button>
@@ -112,13 +122,13 @@ const CartDropdown = () => {
112122
disablePadding
113123
style={{ maxWidth: 400, width: '100%' }}
114124
>
115-
{cartItems.map(item => {
125+
{items.map(item => {
116126
const imageUrl = _isNil(item.imageUrl)
117127
? courseImagePlaceholder
118128
: assetsUrl(item.imageUrl);
119129

120130
return (
121-
<MenuItem onClick={goToCourse(item.slug)}>
131+
<MenuItem onClick={goToCourse(item.slug)} key={item.id}>
122132
<ListItemAvatar style={{ marginRight: 10 }}>
123133
<img
124134
src={imageUrl}
@@ -130,9 +140,11 @@ const CartDropdown = () => {
130140
primary={item.title}
131141
secondary={
132142
<>
133-
<span>Instructor: {item.author}</span>
143+
<span>
144+
{t('cart.instructor')}: {item.author}
145+
</span>
134146
<br />
135-
Price:
147+
{t('cart.price')}:
136148
<span
137149
style={{
138150
color: '#000',
@@ -141,7 +153,7 @@ const CartDropdown = () => {
141153
textAlign: 'right',
142154
}}
143155
>
144-
{item.price}
156+
£{item.price}
145157
</span>
146158
</>
147159
}
@@ -150,15 +162,17 @@ const CartDropdown = () => {
150162
);
151163
})}
152164
<li style={{ padding: 10 }}>
153-
<Typography variant="h6" style={{marginBottom: 10}}>Total: £59.97</Typography>
165+
<Typography variant="h6" style={{ marginBottom: 10 }}>
166+
{t('cart.total')}: £{total}
167+
</Typography>
154168

155169
<Button
156170
variant="contained"
157171
fullWidth
158172
color="secondary"
159173
onClick={goToCart}
160174
>
161-
Go to cart
175+
{t('cart.goToCart')}
162176
</Button>
163177
</li>
164178
</MenuList>

‎src/components/Cart/index.tsx‎

Lines changed: 75 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,77 @@
1-
import React from 'react';
1+
// tslint:disable:no-magic-numbers
2+
import { Container, Grid, Typography } from '@material-ui/core';
3+
import _isNil from 'ramda/src/isNil';
4+
import React, { memo } from 'react';
5+
import { useTranslation } from 'react-i18next';
6+
import CartCheckoutSidebar from '../CartCheckoutSidebar';
7+
import CartItems from '../CartItems';
8+
import useStyles from './styles';
29

3-
const Cart = () => <div>Cart</div>;
10+
// TODO: get data from redux
11+
const items: any[] = [
12+
{
13+
author: 'Martin Cook',
14+
id: 1,
15+
price: 19.99,
16+
slug: 'designing-microservices-architecture',
17+
title: 'Designing microservices architecture',
18+
},
19+
{
20+
author: 'Thomas Tik',
21+
id: 2,
22+
price: 19.99,
23+
slug: 'designing-microservices-architecture',
24+
title: 'Designing microservices architecture',
25+
},
26+
{
27+
author: 'Thomas Tik',
28+
id: 3,
29+
price: 19.99,
30+
slug: 'designing-microservices-architecture',
31+
title: 'Designing microservices architecture',
32+
},
33+
];
434

5-
export default Cart;
35+
const CartView = () => {
36+
const classes = useStyles();
37+
const { t } = useTranslation();
38+
39+
// const { course, getCourseDetailsLoading } = useSelector(
40+
// (state: State) => state.courseDetails
41+
// );
42+
43+
// const dispatch = useDispatch();
44+
45+
return (
46+
<div className={classes.root}>
47+
<Container
48+
component="div"
49+
className={classes.topSection}
50+
maxWidth={false}
51+
>
52+
<Container component="div" maxWidth="lg">
53+
<Grid container spacing={3}>
54+
<Grid item xs={12} sm={9}>
55+
<Typography variant="h1" className={classes.mainHeadline}>
56+
{t('cart.mainHeadline')}
57+
</Typography>
58+
</Grid>
59+
</Grid>
60+
</Container>
61+
</Container>
62+
<Container>
63+
<Grid container spacing={3}>
64+
<Grid item xs={12} sm={9}>
65+
<CartItems items={items} />
66+
</Grid>
67+
<Grid item xs={12} sm={3}>
68+
<CartCheckoutSidebar items={items} />
69+
</Grid>
70+
</Grid>
71+
</Container>
72+
</div>
73+
);
74+
};
75+
76+
// tslint:disable-next-line:max-file-line-count
77+
export default memo(CartView);

‎src/components/Cart/styles.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// tslint:disable:no-magic-numbers
2+
import { makeStyles } from '@material-ui/core/styles';
3+
4+
const useStyles = makeStyles(theme => ({
5+
avatar: {
6+
backgroundColor: 'orange',
7+
color: '#fff',
8+
margin: 10,
9+
},
10+
contentHeadline: {
11+
fontSize: '1.5rem',
12+
lineHeight: '2rem',
13+
margin: '1rem 0',
14+
},
15+
mainHeadline: {
16+
color: '#fff',
17+
fontSize: '1.8rem',
18+
fontWeight: 'bold',
19+
marginBottom: '1rem',
20+
marginTop: '1rem',
21+
},
22+
root: {
23+
flexGrow: 1,
24+
},
25+
topSection: {
26+
backgroundColor: '#24292e',
27+
padding: '40px 0',
28+
width: '100%',
29+
},
30+
}));
31+
32+
export default useStyles;

‎src/components/CartCheckoutSidebar/index.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// tslint:disable:no-magic-numbers
2+
import { Button, Typography } from '@material-ui/core';
3+
import Paper from '@material-ui/core/Paper';
4+
import _isNil from 'ramda/src/isNil';
5+
import React from 'react';
6+
import { useTranslation } from 'react-i18next';
7+
import sumBy from '../../utils/helpers/sumBy';
8+
import useStyles from './styles';
9+
10+
const CartItems = ({ items }: any) => {
11+
const classes = useStyles();
12+
const { t } = useTranslation();
13+
const courses = items.length === 1 ? t('cart.item') : t('cart.items');
14+
const total = sumBy('price')(items);
15+
16+
return (
17+
<Paper className={classes.paper} square>
18+
<Typography>
19+
{t('cart.total')} ({items.length} {courses}): £{total}
20+
</Typography>
21+
22+
<Button variant="contained" fullWidth color="secondary">
23+
{t('cart.proceedToCheckout')}
24+
</Button>
25+
</Paper>
26+
);
27+
};
28+
29+
export default CartItems;

‎src/components/CartCheckoutSidebar/styles.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// tslint:disable:no-magic-numbers
2+
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
3+
4+
const useStyles = makeStyles((theme: Theme) =>
5+
createStyles({
6+
paper: {
7+
border: '1px solid rgba(0, 0, 0, .125)',
8+
color: theme.palette.text.primary,
9+
marginTop: theme.spacing(3),
10+
padding: theme.spacing(2),
11+
},
12+
})
13+
);
14+
15+
export default useStyles;

0 commit comments

Comments
 (0)