Merge pull request #5 from HR-FEC-BLAZARS/redux-implementation

Redux implementation

_testApiData/_productsApi.js

@@ -134,7 +134,7 @@ const products = {
         style_id: 26,
         name: 'White & White',
         original_price: '99',
-        sale_price: '0',
+        sale_price: '70',
         'default?': 1,
         photos: [
           {

_testApiData/_reviewsApi.js

@@ -0,0 +1,47 @@
+const reviews = {
+  selectedProductReviews: {
+    product: '5',
+    page: 0,
+    count: 5,
+    results: [
+      {
+        review_id: 11,
+        rating: 4,
+        summary: 'Great shoes!',
+        recommend: 0,
+        response: '',
+        body: 'Now I can get to stomping!',
+        date: '2019-05-04T00:00:00.000Z',
+        reviewer_name: 'chingy',
+        helpfulness: 12,
+        photos: [],
+      },
+      {
+        review_id: 12,
+        rating: 3,
+        summary: "They're heavy but great",
+        recommend: 0,
+        response: '',
+        body: 'I like them but they run wide.',
+        date: '2019-04-13T00:00:00.000Z',
+        reviewer_name: 'thinfootjim',
+        helpfulness: 3,
+        photos: [],
+      },
+      {
+        review_id: 57335,
+        rating: 3,
+        summary: 'this was the best thing ive ever bought in my entire life',
+        recommend: 1,
+        response: null,
+        body: 'this was the best thing ive ever bought in my entire life and i love it very much. its my favorite ever',
+        date: '2020-04-13T00:00:00.000Z',
+        reviewer_name: 'jackyboy123',
+        helpfulness: 0,
+        photos: [],
+      },
+    ],
+  },
+};
+
+export default reviews;

client/src/actions/index.js

@@ -0,0 +1,33 @@
+export const setProductStyles = (styles) => {
+  return {
+    type: 'SET_PRODUCT_STYLES',
+    payload: styles
+  }
+}
+
+export const setSelectedStyle = (style) => {
+  return {
+    type: 'SET_SELECTED_STYLE',
+    payload: style
+  }
+}
+
+export const setProductInfo = (info) => {
+  return {
+    type: 'SET_PRODUCT_INFO',
+    payload: info
+  }
+}
+
+export const setProductReviews = (reviews) => {
+  return {
+    type: 'SET_PRODUCT_REVIEWS',
+    payload: reviews
+  }
+}
+
+export const toggleIsExpandedView = () => {
+  return {
+    type: 'TOGGLE_IS_EXPANDED_VIEW'
+  }
+}

client/src/components/App.jsx

@@ -1,15 +1,45 @@
-import React from "react";
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { setProductStyles, setSelectedStyle, setProductInfo, setProductReviews } from '../actions/';
+import apiHelpers from '../helpers/apiHelpers.js';
+
 import Overview from './Overview.jsx';
 import RelatedItemsAndComparison from './RelatedItemsAndComparison.jsx';
 import QuestionsAndAnswers from './QuestionsAndAnswers.jsx';
 import RatingsAndReviews from './RatingsAndReviews.jsx';
 
-class App extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {}
-  }
-  render() {
+const App = () => {
+
+  const productStyles = useSelector((state) => state.productStyles);
+  const dispatch = useDispatch();
+
+  // using random product id to start with
+  let productId = 5;
+  useEffect(() => {
+
+    apiHelpers.getProductStyles(productId)
+    .then(({data}) => {
+      dispatch(setProductStyles(data.results));
+      dispatch(setSelectedStyle(data.results[0]));
+    })
+    .catch((err) => {
+      console.log('ISSUE FETCHING PRODUCT STYLES');
+    })
+
+    apiHelpers.getProductInformation(productId)
+    .then(({data}) => dispatch(setProductInfo(data)))
+    .catch((err) => {
+      console.log('ISSUE FETCHING PRODUCT INFO');
+    })
+
+    apiHelpers.getProductReviews(productId)
+    .then(({data}) => dispatch(setProductReviews(data.results)))
+    .catch((err) => {
+      console.log('ISSUE FETCHING PRODUCT REVIEWS');
+    })
+
+  }, [productId]);
+
     return (
       <>
         <Overview />
@@ -18,7 +48,6 @@ class App extends React.Component {
         <RatingsAndReviews />
       </>
     );
-  }
 }
 
 export default App;

client/src/components/Overview.jsx

@@ -1,10 +1,27 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
+import ImageGallery from './overview-components/ImageGallery.jsx';
+import AddToCart from './overview-components/AddToCart.jsx';
+import ProductInformation from './overview-components/ProductInformation.jsx';
+import ProductOverview from './overview-components/ProductOverview.jsx';
+import StyleSelector from './overview-components/StyleSelector.jsx';
 
 const Overview = () => {
+  const isExpandedView = useSelector((state) => state.isExpandedView);
+
   return (
-    // Overview Components go here
-    <></>
+    <div className='overview-master-component'>
+      <ImageGallery />
+      {!isExpandedView && (
+        <div className='overview-side-container'>
+          <ProductInformation />
+          <StyleSelector />
+          <AddToCart />
+        </div>
+      )}
+      <ProductOverview />
+    </div>
   );
-}
+};
 
-export default Overview;
+export default Overview;

client/src/components/overview-components/AddToCart.jsx

@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import products from '../../../../_testApiData/_productsApi.js';
+
+const AddToCart = () => {
+
+  const productStyles = useSelector((state) => state.productStyles);
+  const selectedStyle = useSelector((state) => state.selectedStyle);
+
+  //! Should probably pull from database
+  const [isFavorite, toggleIsFavorite] = useState(false);
+
+  const [size, setSize] = useState();
+  const [quantity, setQuantity] = useState();
+  const [isOutOfStock, setIsOutOfStock] = useState(false);
+  const [showWarning, setShowWarning] = useState(false);
+
+  useEffect(() => {
+    setIsOutOfStock(!!productStyles && productStyles.length ? false : true);
+  }, [productStyles]);
+
+  return (
+    <div className='addToCartComponent'>
+      <form className='container-AddToCart'>
+        {showWarning && <p className='warning'>Please select size</p>}
+        <select
+          onChange={(e) => {
+            setSize(e.target.value);
+            if (selectedStyle.skus[e.target.value] < quantity) {
+              setQuantity(1);
+            } else {
+              setQuantity(quantity ? quantity : 1);
+            }
+            showWarning ? setShowWarning(false) : null;
+          }}
+          disabled={isOutOfStock}>
+          <option>{isOutOfStock ? 'OUT OF STOCK' : 'SELECT SIZE'}</option>
+          {!!Object.keys(selectedStyle).length &&
+            Object.entries(selectedStyle.skus).map(([rowSize, rowQty], index) => {
+              if (rowQty) {
+                return (
+                  <option key={index} value={rowSize}>
+                    {rowSize}
+                  </option>
+                );
+              }
+            })}
+        </select>
+
+        <select onChange={(e) => setQuantity(Number(e.target.value))} disabled={isOutOfStock || size === undefined}>
+          <option>{size ? 1 : '-'}</option>
+          {size &&
+            [...Array(selectedStyle.skus[size] < 15 ? selectedStyle.skus[size] + 1 : 16).keys()]
+              .slice(2)
+              .map((qty, index) => {
+                return (
+                  <option key={index} value={qty}>
+                    {qty}
+                  </option>
+                );
+              })}
+        </select>
+        {!isOutOfStock && (
+          <>
+            <button
+              onClick={(e) => {
+                e.preventDefault();
+                if (size === undefined || size === 'SELECT SIZE') {
+                  setShowWarning(true);
+                } else {
+                  console.log('DATA TO BE SENT: ', { style_id: selectedStyle.style_id, size, quantity });
+                }
+              }}>
+              ADD TO BAG
+            </button>
+
+            {/* TODO: If the default ‘Select Size’ is currently selected: Clicking this button should open the size dropdown, and a message should appear above the dropdown stating “Please select size”.  */}
+
+            <div
+              className='container-favorite'
+              onClick={() => {
+                toggleIsFavorite(!isFavorite);
+                console.log('DATA TO BE SENT: ', { style_id: selectedStyle.style_id });
+              }}>
+              {isFavorite ? (
+                <img src='./assets/heart-filled-icon.png' />
+              ) : (
+                <img src='./assets/heart-unfilled-icon.png' />
+              )}
+            </div>
+          </>
+        )}
+      </form>
+    </div>
+  );
+};
+
+export default AddToCart;