Merge pull request #117 from kube-js/develop

fix: added cart to redux

Author: mariocoski

k8s/Chart.yaml

@@ -2,7 +2,7 @@ apiVersion: v1
 description: A Helm chart for kube-ts-react-client
 name: kube-ts-react-client
 version: 1.0.0
-appVersion: 1.6.12
+appVersion: 1.6.14
 home: https://cloud.docker.com/u/kubejs/repository/docker/kubejs/kube-ts-react-client
 icon: https://avatars2.githubusercontent.com/u/47761918?s=200&v=4
 sources:

k8s/values.yaml

@@ -6,7 +6,7 @@ replicaCount: 2
 
 image:
   repository: kubejs/kube-ts-react-client
-  tag: 1.6.12
+  tag: 1.6.14
   pullPolicy: Always
   containerPort: 80
 

package-lock.json

@@ -44,6 +44,7 @@
     "set-value": "3.0.1",
     "slick-carousel": "1.8.1",
     "store": "2.0.12",
+    "url-search-params-polyfill": "^7.0.0",
     "uuid": "3.3.3",
     "yup": "0.27.0"
   },

package.json

@@ -14,8 +14,10 @@ import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 import _isNil from 'ramda/src/isNil';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router';
 import courseImagePlaceholder from '../../images/course_400x180.png';
+import { State } from '../../redux/rootReducer';
 import assetsUrl from '../../utils/helpers/assetsUrl';
 import sumBy from '../../utils/helpers/sumBy';
 
@@ -49,6 +51,7 @@ const CartDropdown = () => {
   // TODO: refactor component
   const [anchorEl, setAnchorEl] = React.useState(null);
   const { t } = useTranslation();
+  const { items } = useSelector((state: State) => state.cart);
   const history = useHistory();
 
   const handleClick = (event: any) => {
@@ -70,31 +73,10 @@ const CartDropdown = () => {
     history.push(`/courses/${slug}`);
   };
 
-  const items: any[] = [
-    {
-      author: 'Martin Cook',
-      id: 1,
-      price: 19.99,
-      slug: 'designing-microservices-architecture',
-      title: 'Designing microservices architecture',
-    },
-    {
-      author: 'Thomas Tik',
-      id: 2,
-      price: 19.99,
-      slug: 'designing-microservices-architecture',
-      title: 'Designing microservices architecture',
-    },
-    {
-      author: 'Thomas Tik',
-      id: 3,
-      price: 19.99,
-      slug: 'designing-microservices-architecture',
-      title: 'Designing microservices architecture',
-    },
-  ];
+  // TODO: implements pricing on server
+  const courseItems = items.map(item => ({ ...item, price: 19.99 }));
 
-  const total = sumBy('price')(items);
+  const total = sumBy('price')(courseItems);
 
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -106,7 +88,7 @@ const CartDropdown = () => {
         onClick={goToCart}
         onMouseEnter={handleClick}
       >
-        <Badge badgeContent={items.length || null} color="secondary">
+        <Badge badgeContent={items.length} color="secondary">
           <ShoppingCartIcon />
         </Badge>
       </Button>
@@ -122,7 +104,7 @@ const CartDropdown = () => {
           disablePadding
           style={{ maxWidth: 400, width: '100%' }}
         >
-          {items.map(item => {
+          {courseItems.map(item => {
             const imageUrl = _isNil(item.imageUrl)
               ? courseImagePlaceholder
               : assetsUrl(item.imageUrl);
@@ -141,7 +123,8 @@ const CartDropdown = () => {
                   secondary={
                     <>
                       <span>
-                        {t('cart.instructor')}: {item.author}
+                        {t('cart.instructor')}: {item.user.firstName}{' '}
+                        {item.user.lastName}
                       </span>
                       <br />
                       {t('cart.price')}:
@@ -163,7 +146,7 @@ const CartDropdown = () => {
           })}
           <li style={{ padding: 10 }}>
             <Typography variant="h6" style={{ marginBottom: 10 }}>
-              {t('cart.total')}: £{total}
+              {t('cart.total')}: £{total.toFixed(2)}
             </Typography>
 
             <Button

src/atoms/CartDropdown/index.tsx

@@ -1,46 +1,46 @@
 // tslint:disable:no-magic-numbers
 import { Container, Grid, Typography } from '@material-ui/core';
 import _isNil from 'ramda/src/isNil';
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router';
+import { removeCartItem } from '../../redux/cart/actionCreators';
+import { State } from '../../redux/rootReducer';
 import CartCheckoutSidebar from '../CartCheckoutSidebar';
 import CartItems from '../CartItems';
 import useStyles from './styles';
 
-// TODO: get data from redux
-const items: any[] = [
-  {
-    author: 'Martin Cook',
-    id: 1,
-    price: 19.99,
-    slug: 'designing-microservices-architecture',
-    title: 'Designing microservices architecture',
-  },
-  {
-    author: 'Thomas Tik',
-    id: 2,
-    price: 19.99,
-    slug: 'designing-microservices-architecture',
-    title: 'Designing microservices architecture',
-  },
-  {
-    author: 'Thomas Tik',
-    id: 3,
-    price: 19.99,
-    slug: 'designing-microservices-architecture',
-    title: 'Designing microservices architecture',
-  },
-];
-
 const CartView = () => {
   const classes = useStyles();
   const { t } = useTranslation();
 
-  // const { course, getCourseDetailsLoading } = useSelector(
-  //   (state: State) => state.courseDetails
-  // );
+  const { search } = useLocation();
+
+  const params = new URLSearchParams(search);
+
+  const newItemId = params.get('newItemId');
+
+  const initialState = !newItemId;
+
+  const [editMode, setEditMode] = useState(initialState);
+
+  const toggleEditMode = (e: any) => {
+    e.preventDefault();
 
-  // const dispatch = useDispatch();
+    return setEditMode(!editMode);
+  };
+
+  const { items } = useSelector((state: State) => state.cart);
+
+  const dispatch = useDispatch();
+
+  const courseItems = items.map(item => ({ ...item, price: 19.99 }));
+
+  const removeItem = (id: string) => (e: any) => {
+    e.preventDefault();
+    dispatch(removeCartItem(id));
+  };
 
   return (
     <div className={classes.root}>
@@ -61,12 +61,16 @@ const CartView = () => {
       </Container>
       <Container>
         <Grid container spacing={3}>
-          <Grid item xs={12} sm={9}>
-            <CartItems items={items} />
-          </Grid>
-          <Grid item xs={12} sm={3}>
-            <CartCheckoutSidebar items={items} />
-          </Grid>
+          {editMode ? (
+            <>
+              <Grid item xs={12} sm={9}>
+                <CartItems items={courseItems} removeItem={removeItem} />
+              </Grid>
+              <Grid item xs={12} sm={3}>
+                <CartCheckoutSidebar items={courseItems} />
+              </Grid>
+            </>
+          ) : null}
         </Grid>
       </Container>
     </div>

src/components/Cart/index.tsx

@@ -16,7 +16,7 @@ const CartItems = ({ items }: any) => {
   return (
     <Paper className={classes.paper} square>
       <Typography>
-        {t('cart.total')} ({items.length} {courses}): £{total}
+        {t('cart.total')} ({items.length} {courses}): £{total.toFixed(2)}
       </Typography>
 
       <Button variant="contained" fullWidth color="secondary">

src/components/CartCheckoutSidebar/index.tsx

@@ -16,7 +16,7 @@ import assetsUrl from '../../utils/helpers/assetsUrl';
 import sumBy from '../../utils/helpers/sumBy';
 import useStyles from './styles';
 
-const CartItems = ({ items }: any) => {
+const CartItems = ({ items, removeItem }: any) => {
   const classes = useStyles();
   const history = useHistory();
   const { t } = useTranslation();
@@ -60,7 +60,7 @@ const CartItems = ({ items }: any) => {
                   >
                     {item.title}
                   </a>
-                  <Button size="small">
+                  <Button size="small" onClick={removeItem(item.id)}>
                     <DeleteIcon />
                   </Button>
                 </TableCell>

src/components/CartItems/index.tsx

@@ -11,40 +11,54 @@ import _isNil from 'ramda/src/isNil';
 import _propEq from 'ramda/src/propEq';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useHistory } from 'react-router-dom';
 // tslint:disable:no-import-side-effect
 import 'slick-carousel/slick/slick-theme.css';
 import 'slick-carousel/slick/slick.css';
 // TODO: check slow rendering issue
 // import CourseRating from '../../atoms/CourseRating';
 import courseImagePlaceholder from '../../images/course_400x180.png';
+import { addCartItem } from '../../redux/cart/actionCreators';
 import { EnhancedCourse } from '../../redux/discoveryItems/actionCreators';
+import { State } from '../../redux/rootReducer';
 import assetsUrl from '../../utils/helpers/assetsUrl';
+import useStyles from './styles';
 
-const Slide = ({
-  course,
-  classes,
-}: {
-  classes: any;
-  course: EnhancedCourse;
-}) => {
+const Slide = ({ course }: { course: EnhancedCourse }) => {
   const { t } = useTranslation();
+  const { items } = useSelector((state: State) => state.cart);
+  const classes = useStyles();
   // TODO: get real rating and price
   // const courseRating = Number((Math.random() * 5).toFixed(1));
   // tslint:disable-next-line:no-magic-numbers
   const coursePrice = Number(Math.random() * 10 + 9).toFixed(2);
 
-  const imageUrl = !_isNil(course.imageUrl) ? assetsUrl(course.imageUrl) : courseImagePlaceholder;
+  const imageUrl = !_isNil(course.imageUrl)
+    ? assetsUrl(course.imageUrl)
+    : courseImagePlaceholder;
+
+  const dispatch = useDispatch();
+  const history = useHistory();
+
+  const addItem = (item: EnhancedCourse) => (e: any) => {
+    e.preventDefault();
+    dispatch(addCartItem(item));
+    history.push({ pathname: '/cart', search: `?newItemId=${item.id}` });
+  };
+
+  const hasAddedToCart =
+    items.find(item => item.id === course.id) !== undefined;
 
   return (
-    <Card className={classes.card}>
-      <Link className={classes.courseLink} to={`/courses/${course.slug}`}>
-        <CardMedia
-          className={classes.cardMedia}
-          image={imageUrl}
-          title={course.title}
-        />
-        <CardContent className={classes.cardContent}>
+    <Card>
+      <CardMedia
+        className={classes.cardMedia}
+        image={imageUrl}
+        title={course.title}
+      />
+      <CardContent className={classes.cardContent}>
+        <Link className={classes.courseLink} to={`/courses/${course.slug}`}>
           <Typography
             variant="subtitle1"
             component="div"
@@ -65,19 +79,29 @@ const Slide = ({
           {/* <CourseRating value={courseRating} /> */}
 
           <div className={classes.cardPrice}>{`£${coursePrice}`}</div>
-        </CardContent>
-        <CardActions>
+        </Link>
+      </CardContent>
+      <CardActions className={classes.cardActions}>
+        {!hasAddedToCart ? (
           <Button
             size="small"
             color="primary"
-            style={{ textTransform: 'capitalize' }}
+            onClick={addItem(course)}
+            className={classes.cartAction}
           >
             {t('cart.addToCart')}
           </Button>
-        </CardActions>
-      </Link>
+        ) : null}
+
+        {hasAddedToCart ? (
+          <Typography className={classes.cartAction}>
+            {t('cart.addedToCart')}
+          </Typography>
+        ) : null}
+      </CardActions>
     </Card>
   );
 };
 
-export default Slide;
+// tslint:disable-next-line:max-file-line-count
+export default Slide;