itemDetails addToCart functionality #66

ashatat · Nov 18, 2018 · 968823d · 968823d
1 parent 7fecad7
commit 968823d
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 4 deletions.
diff --git a/client/src/components/ItemDetails/ItemDetails.css b/client/src/components/ItemDetails/ItemDetails.css
@@ -210,6 +210,17 @@
   border-color: #ecce54;
   transition: all ease-in-out 1s;
 }
+.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;

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: '',
     color: '',
     quantity: 0,
     tags: [
@@ -57,6 +64,58 @@ class ItemDetails extends Component {
     }
   };
 
+  addToCartButton = () => {
+    const { adding } = this.state;
+    if (adding === 'adding') {
+      return (
+        <React.Fragment>
+          <FaCircleNotch className="item-details__add-to-cart--icon-spin" />{' '}
+          ADDING ..
+        </React.Fragment>
+      );
+    }
+    if (adding === 'added') {
+      return (
+        <React.Fragment>
+          <MdDone /> ITEM ADDED
+        </React.Fragment>
+      );
+    }
+    return (
+      <React.Fragment>
+        <MdAddShoppingCart /> ADD TO CART
+      </React.Fragment>
+    );
+  };
+
+  addToCart = () => {
+    const { details, userId } = this.props;
+    const { color, quantity } = this.state;
+
+    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 {
+        // show adding success modal
+        this.setState({ adding: 'added' });
+      }
+    });
+  };
+
+  addToWList = () => {};
+
   render() {
     const { name, category, details, description, sku } = this.props;
     const { color, quantity, tags } = this.state;
@@ -172,10 +231,15 @@ 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"
+          >
+            {this.addToCartButton()}
           </button>
           <button
+            onClick={this.addToWList}
             type="button"
             name="Add to wishlist"
             className="item-details__add-to-wishlist"
@@ -247,6 +311,7 @@ ItemDetails.defaultProps = {
 };
 
 ItemDetails.propTypes = {
+  userId: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   category: PropTypes.string.isRequired,
   description: PropTypes.string,
@@ -258,7 +323,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,