SHARE
TWEET

Untitled

a guest Jun 16th, 2019 56 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component, Fragment } from "react";
  2. import { connect } from "react-redux";
  3. import { removeFromCart } from "./../redux/actions";
  4.  
  5. import { withStyles } from "@material-ui/core/styles";
  6. import IconButton from "@material-ui/core/IconButton";
  7. import Badge from "@material-ui/core/Badge";
  8. import AccountCircle from "@material-ui/icons/AccountCircle";
  9. import Typography from "@material-ui/core/Typography";
  10. import ShoppingCartIcon from "@material-ui/icons/ShoppingCart";
  11. import Drawer from "@material-ui/core/Drawer";
  12. import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
  13. import Divider from "@material-ui/core/Divider";
  14.  
  15. import List from "@material-ui/core/List";
  16. import ListItem from "@material-ui/core/ListItem";
  17. import ListItemText from "@material-ui/core/ListItemText";
  18. import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
  19. import DeleteIcon from "@material-ui/icons/Delete";
  20.  
  21. const styles = theme => ({
  22.   badge: {
  23.     top: "50%",
  24.     right: -3
  25.   },
  26.   cart: {
  27.     color: "#fff"
  28.   },
  29.   drawer: {
  30.     width: 300,
  31.     padding: "1rem"
  32.   }
  33. });
  34.  
  35. class NavBarRight extends Component {
  36.   state = {
  37.     right: false
  38.   };
  39.  
  40.   handleDelete = id => {
  41.     this.props.removeFromCart(id);
  42.   };
  43.  
  44.   toggleDrawer = (side, open) => event => {
  45.     if (
  46.       event.type === "keydown" &&
  47.       (event.key === "Tab" || event.key === "Shift")
  48.     ) {
  49.       return;
  50.     }
  51.     this.setState({
  52.       [side]: open
  53.     });
  54.   };
  55.  
  56.   getProductList = () => {
  57.     const { cart, products } = this.props;
  58.     return cart.map(item => {
  59.       return products.find(product => product.id === item);
  60.     });
  61.   };
  62.  
  63.   renderCartList = () => {
  64.     return this.getProductList().map((data, index) => {
  65.       return (
  66.         <ListItem key={index}>
  67.           <ListItemText primary={data.name} secondary={data.points} />
  68.           <ListItemSecondaryAction>
  69.             <IconButton
  70.               aria-label="Delete"
  71.               onClick={() => this.handleDelete(data.id)}
  72.             >
  73.               <DeleteIcon />
  74.             </IconButton>
  75.           </ListItemSecondaryAction>
  76.         </ListItem>
  77.       );
  78.     });
  79.   };
  80.  
  81.   render() {
  82.     const { points, classes, cartItems } = this.props;
  83.     return (
  84.       <Fragment>
  85.         <IconButton color="inherit">
  86.           <AccountCircle />
  87.         </IconButton>
  88.         <Typography variant="overline" color="inherit">
  89.           {points} Puntos
  90.         </Typography>
  91.         <IconButton
  92.           className={classes.badge}
  93.           onClick={this.toggleDrawer("right", true)}
  94.         >
  95.           <Badge badgeContent={cartItems} color="secondary">
  96.             <ShoppingCartIcon className={classes.cart} />
  97.           </Badge>
  98.         </IconButton>
  99.  
  100.         <Drawer anchor="right" open={this.state.right}>
  101.           <div tabIndex={0} role="button" className={classes.drawer}>
  102.             <div className={classes.drawerHeader}>
  103.               <IconButton onClick={this.toggleDrawer("right", false)}>
  104.                 <ChevronLeftIcon />
  105.               </IconButton>
  106.             </div>
  107.             <Divider />
  108.             <Typography variant="h5" component="h5">
  109.               Rewards Cart
  110.             </Typography>
  111.             {console.log(this.getProductList())}
  112.             <List dense>{this.renderCartList()}</List>
  113.           </div>
  114.         </Drawer>
  115.       </Fragment>
  116.     );
  117.   }
  118. }
  119.  
  120. const mapStateToProps = ({ points, products, cart }) => {
  121.   return {
  122.     points,
  123.     products,
  124.     cart
  125.   };
  126. };
  127.  
  128. const mapDispatchToProps = dispatch => {
  129.   return {
  130.     removeFromCart: product => dispatch(removeFromCart(product))
  131.   };
  132. };
  133. const addStyles = withStyles(styles)(NavBarRight);
  134.  
  135. export default connect(
  136.   mapStateToProps,
  137.   mapDispatchToProps
  138. )(addStyles);
  139.      
  140. export default (state = [], action) => {
  141.   switch (action.type) {
  142.     case "ADD_TO_CART":
  143.       console.log("ADDED TO CART");
  144.       return [...state, action.payload];
  145.  
  146.     case "REMOVE_FROM_CART":
  147.       console.log("REMOVED FROM CART");
  148.       return [...state, state.filter(item => action.payload !== item)];
  149.  
  150.     default:
  151.       return state;
  152.   }
  153. };
  154.      
  155. import products from "./../../apis/products";
  156.  
  157. export const fetchProducts = () => async dispatch => {
  158.   const response = await products.get("/products");
  159.  
  160.   dispatch({
  161.     type: "FETCH_PRODUCTS",
  162.     payload: response.data
  163.   });
  164. };
  165.  
  166. export const addToCart = payload => {
  167.   return {
  168.     type: "ADD_TO_CART",
  169.     payload: payload
  170.   };
  171. };
  172.  
  173. export const removeFromCart = payload => {
  174.   return {
  175.     type: "REMOVE_FROM_CART",
  176.     payload: payload
  177.   };
  178. };
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top