Dev Branch Submission - Mario Quintana

README.md

@@ -10,12 +10,33 @@ npm start
 
 ## Tasks
 
-Please publish your work to a fork of this repo. You're welcome (but not required) to add any libraries you think would be helpful.
+1. [Implement Responsive Design](/tasks/01-responsive-design.md)
 
-Note: You're encouraged to show your work by including multiple commits - we'll be looking through your fork's git history.
+Originally I opted to follow the prototype v.2  design and I made good progress. However, as I started working on the responsive design the CSS was not smooth and my biggest problem was moving the 'Add to cart' button into the product item. Using position relative was not ideal but it worked. Another issue was moving the cart to upper right corner. I did manage this by moving the CartContainer component above the Title component. Looking back I simply could have placed both in a container and used display flex, and float to their respective sides. In any case, after finishing this first draft I moved on to the cart logic.
+
+After completing the cart functionality I returned to complete the responsive design. I am familiar with using media queries to alter CSS rules at a given screen or device size. However, I restarted all the CSS in order to start with flexible to have better control on moving elements. I also chose to follow the prototype v.1 design to start completely fresh and not to try to check and rewrite the CSS rules. The biggest issue I had and couldn't resolve properly was manipulating the items in the 'Cart" and in the 'Product List independent of one another. For example, in the 'Cart' the element texts have limited mobility due to inheriting CSS rules from the Product component. As I mentioned before the 'Add to cart' button was moved with position relative. I wasn't sure how, if at all possible, to move a button into another component unless I created a button component but that would be inefficient.
+
+Three breakpoints were assigned in order to use for the responsive design. I completed those three but I added a couple more in between in order to create a smoother change when scrolling screen sizes. With more time I would have wanted to have the cart render on a different page and when a user added an item only the 'Your cart is empty' text would change to the total amount. By clicking the cart element a user would then see the items and add, decrease, and remove as well. In this way, I could have styled the cart more closely to the prototype.
+
+<h3>1280px</h3> 
+
+![1280](https://user-images.githubusercontent.com/32649354/53599781-db130e80-3b5c-11e9-899d-e99eab064b55.png)
+
+<h3>768px</h3>
+
+![768](https://user-images.githubusercontent.com/32649354/53599837-00a01800-3b5d-11e9-8c91-0ba74a950155.png)
+
+<h3>360px</h3> 
+
+![320](https://user-images.githubusercontent.com/32649354/53599881-157cab80-3b5d-11e9-86f2-93591a47f958.png)
 
-1. [Implement Responsive Design](/tasks/01-responsive-design.md)
 2. [Enhance Cart Functionality](/tasks/02-cart-enhancements.md)
+
+I studied the action and reducer code from "Add to cart' in order to create the 'Delete from cart' feature. To see if an action was called and the state changed I implemented the Redux Dev Tool in order to monitor the state. Just as 'Add to cart' retrieved the state in order to add an item, so did the 'Delete from cart' retrieved the state and deleted an item based on its id. Originally I placed the 'Delete' in the products container however, I soon realized it was meant to be in the cart and moved it soon after. 
+
+Creating the 'Increase quantity' and 'Decrease quantity' features would essentially be 'Add' and 'Delete' but only effecting the quantity. I had issues with the 'Increase and 'Decrease' actions not running as it was evident in the redux dev tool. Correcting typos fixed this and by trying the code and checking the redux tool I was able to confirm that each increased and decreased item referred to the same id and pin. I also added logic to the buttons so that when increasing is allowed when there is the inventory available else the button is disabled. The same logic for the decrease is applied except when there is available quantity in the cart. With more time I would have explored working on the 'Checkout' feature, having the cart disabled, and showing an empty cart in a separate webpage.
+
 3. [Hook Up Product API](/tasks/03-product-api.md)
 
-Please also update this README file: we'd love to see notes on your decision-making process, links to the most exciting pieces of code, or anything else that will give us additional context when reviewing your assessment.
+Initially I overcomplicated the solution by creating two separate files for fetching data and connecting to the endpoint. I did not connect to the API and therefore opted to use the Shop.js file instead. With some research I was able to send a request to the API and console log the response which returned an array of objects. My biggest issue was getting this data to render on to the page. Also, while researching online I found that the 'getProducts' code could be shortened if the 'timeout' was never used. I found an online reference that mapped through and array of objects and then assigned the key and value pairs to a variable. In doing so, each object was built with the correct values. By following this code I was able to retrieve each object/item with their id title, and value. Where as before I returned the whole array I now had access to each object individually. However, my final issue was being able to render this data which after much research I couldn't solve. Most of the solutions I encountered revolved around setting the state to the values of the object. This was not goal as I was not dealing with JSX, components, or React for that matter. With more time I would pair program with someone else and search more on fetching and rendering data with JavaScript and not with React.  
+

public/index.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
     <title>Redux Shopping Cart Example</title>
   </head>
   <body>

src/actions/index.js

@@ -17,12 +17,41 @@ const addToCartUnsafe = productId => ({
   productId
 })
 
+const deleteFromCartUnsafe = productId => ({
+  type: types.DELETE_FROM_CART,
+  productId
+})
+
+const increaseCartUnsafe = productId => ({
+  type: types.INCREASE_QUANTITY,
+  productId
+})
+
+const decreaseCartUnsafe = productId => ({
+  type: types.DECREASE_QUANTITY,
+  productId
+})
+
 export const addToCart = productId => (dispatch, getState) => {
   if (getState().products.byId[productId].inventory > 0) {
     dispatch(addToCartUnsafe(productId))
   }
 }
 
+export const deleteFromCart = productId => (dispatch, getState) => {
+  if (getState().products.byId[productId].inventory > 0) {
+    dispatch(deleteFromCartUnsafe(productId))
+  }
+}
+
+export const increaseQuantity = productId => (dispatch, getState) => {
+  getState(dispatch(increaseCartUnsafe(productId)))
+}
+
+export const decreaseQuantity = productId => (dispatch, getState) => {
+  getState(dispatch(decreaseCartUnsafe(productId)))
+}
+
 export const checkout = products => (dispatch, getState) => {
   const { cart } = getState()
 
@@ -37,4 +66,4 @@ export const checkout = products => (dispatch, getState) => {
     // Replace the line above with line below to rollback on failure:
     // dispatch({ type: types.CHECKOUT_FAILURE, cart })
   })
-}
+}

src/api/products.json

@@ -1,5 +1,5 @@
 [
-  {"id": 1, "title": "Chronograph", "price": 500.01, "inventory": 2},
-  {"id": 2, "title": "Quartz", "price": 10.99, "inventory": 10},
-  {"id": 3, "title": "Weekender", "price": 19.99, "inventory": 5}
+  {"id": 1, "image": "http://static2.worldtempus.com/cache/product/c/h/chopard-superfast-chrono-porsche-919-edition-watch-face-view_688x688.jpg", "title": "Watch", "price": 500.01, "inventory": 2},
+  {"id": 2, "image": "https://mockuphone.com/static/images/devices/apple-ipad-black-landscape.png", "title": "Ipad", "price": 200.99, "inventory": 5},
+  {"id": 3, "image": "http://www.allwhitebackground.com/images/1/Printed-T-Shirts-8.jpg", "title": "T-Shirt", "price": 19.99, "inventory": 20}
 ]

src/api/productsApi.js

@@ -0,0 +1,6 @@
+import { get } from './request'
+const BASE_URL = 'http://tech.work.co/shopping-cart/products.json';
+
+export function getItems() {
+  return get(BASE_URL)
+}

src/api/request.js

@@ -0,0 +1,12 @@
+function request(url, options = {}, data) {
+  if(data) options.body = JSON.stringify(data);
+
+  return fetch(url, options)
+    .then(response => [response.ok, response.json()])
+    .then(([ok, json]) => {
+      if(ok) return json;
+      throw json.message || json.error || json.errors || json;
+    });
+}
+
+export const get = url => request(url);

src/api/shop.js

@@ -1,11 +1,30 @@
-/**
- * Mocking client-server processing
- */
-import _products from './products.json'
 
-const TIMEOUT = 100
+// import _products from './products.json';
+
+// export default {
+//   getProducts: cb => cb(_products),    
+//   buyProducts: (payload,cb) => cb()
+// }
+
+const URL = 'http://tech.work.co/shopping-cart/products.json'
+
+const fetchData = () => {
+  return fetch(URL)
+    .then(response => response.json())
+    .then(response => {
+      response.map(product => {
+      const item = { id: product.id, productTitle: product.productTitle, inventory: product.inventory, value: product.price.value };
+      console.log(item)
+    })
+  })
+}
 
 export default {
-  getProducts: (cb, timeout) => setTimeout(() => cb(_products), timeout || TIMEOUT),
-  buyProducts: (payload, cb, timeout) => setTimeout(() => cb(), timeout || TIMEOUT)
+  getProducts: cb => fetchData(URL), 
+  buyProducts: (payload, cb) => cb()
 }
+
+// export default {
+//   getProducts: (cb, timeout) => setTimeout(() => cb(fetchData().then(response => response)), timeout || TIMEOUT),
+//   buyProducts: (payload, cb, timeout) => setTimeout(() => cb(), timeout || TIMEOUT),
+// }