itemDetails addToCart functionality #66

ashatat · Nov 19, 2018 · f5e51eb · f5e51eb
1 parent 7fecad7
commit f5e51eb
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 5 deletions.
diff --git a/client/src/components/ItemDetails/ItemDetails.css b/client/src/components/ItemDetails/ItemDetails.css
@@ -211,6 +211,22 @@
   transition: all ease-in-out 1s;
 }
 
+.item-details__add-to-cart--not-allowed {
+  cursor: not-allowed;
+}
+
+.item-details__add-to-cart--icon-spin {
+  animation: icon-spin 2s infinite linear;
+}
+@keyframes icon-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
+
 .item-details__add-to-cart svg{
   font-size: 24px;
   vertical-align: -4px;

diff --git a/client/src/components/ItemDetails/index.jsx b/client/src/components/ItemDetails/index.jsx
@@ -8,15 +8,22 @@ import {
   MdKeyboardArrowDown,
   MdAddShoppingCart,
   MdPlaylistAdd,
+  MdDone,
 } from 'react-icons/md';
-import { FaPinterest, FaFacebookF, FaTwitter } from 'react-icons/fa';
+import {
+  FaPinterest,
+  FaFacebookF,
+  FaTwitter,
+  FaCircleNotch,
+} from 'react-icons/fa';
 
 import InputField from '../common/InputField';
 
 import './ItemDetails.css';
 
 class ItemDetails extends Component {
   state = {
+    adding: 'default',
     color: '',
     quantity: 0,
     tags: [
@@ -31,6 +38,25 @@ class ItemDetails extends Component {
     ],
   };
 
+  addToCartButton = {
+    adding: (
+      <React.Fragment>
+        <FaCircleNotch className="item-details__add-to-cart--icon-spin" />{' '}
+        ADDING ..
+      </React.Fragment>
+    ),
+    added: (
+      <React.Fragment>
+        <MdDone /> ITEM ADDED
+      </React.Fragment>
+    ),
+    default: (
+      <React.Fragment>
+        <MdAddShoppingCart /> ADD TO CART
+      </React.Fragment>
+    ),
+  };
+
   prevItem = () => {
     // go to previous item
   };
@@ -57,9 +83,39 @@ class ItemDetails extends Component {
     }
   };
 
+  addToCart = () => {
+    const { details, userId } = this.props;
+    const { color, quantity } = this.state;
+    if (color && quantity) {
+      this.setState({ adding: 'adding' });
+      fetch('/api/v1/add-to-cart', {
+        credentials: 'same-origin',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+        body: JSON.stringify({
+          userId,
+          itemDetailId: details[Number(color)].id,
+          quantity,
+        }),
+      }).then(result => {
+        if (result.err) {
+          // show error modal
+        } else {
+          this.setState({ adding: 'added' });
+          // show adding success modal
+          // then reset adding to default
+        }
+      });
+    }
+  };
+
+  addToWList = () => {};
+
   render() {
     const { name, category, details, description, sku } = this.props;
-    const { color, quantity, tags } = this.state;
+    const { color, quantity, tags, adding } = this.state;
 
     return (
       <div className="item-details">
@@ -172,10 +228,16 @@ class ItemDetails extends Component {
               <MdKeyboardArrowDown />
             </button>
           </div>
-          <button type="button" className="item-details__add-to-cart">
-            <MdAddShoppingCart /> ADD TO CART
+          <button
+            onClick={this.addToCart}
+            type="button"
+            className={`item-details__add-to-cart ${(!color || !quantity) &&
+              'item-details__add-to-cart--not-allowed'}`}
+          >
+            {this.addToCartButton[adding]}
           </button>
           <button
+            onClick={this.addToWList}
             type="button"
             name="Add to wishlist"
             className="item-details__add-to-wishlist"
@@ -247,6 +309,7 @@ ItemDetails.defaultProps = {
 };
 
 ItemDetails.propTypes = {
+  userId: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   category: PropTypes.string.isRequired,
   description: PropTypes.string,
@@ -258,7 +321,7 @@ ItemDetails.propTypes = {
         discount_price: PropTypes.string.isRequired,
       }),
       color: PropTypes.string.isRequired,
-      quantitiy: PropTypes.number,
+      quantity: PropTypes.number,
       tags: PropTypes.arrayOf(
         PropTypes.shape({
           id: PropTypes.string,