Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev Branch Submission - Mario Quintana #13

Open
wants to merge 41 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
d33738f
First commit, installed dependencies, and app runs on localhost:3000
Quintam26 Feb 21, 2019
15837a8
downloaded product pictures, added FontAwesome for cart logo, changed…
Quintam26 Feb 21, 2019
d9c20b7
Body background color darkened, hr element lightened, cart logo and t…
Quintam26 Feb 21, 2019
c57edf0
Added images into products.json but having difficulty rendering image…
Quintam26 Feb 22, 2019
d48e573
Images now rendering after using URL of image
Quintam26 Feb 22, 2019
24232b9
layout getting closer to prototype 2, having issues with moving 'Add …
Quintam26 Feb 22, 2019
d2390b0
css styling done to match prototype, will go back to original code to…
Quintam26 Feb 22, 2019
885afd3
Add to cart button moved in place using 'position: relative'. Better …
Quintam26 Feb 22, 2019
206cb37
Used media queries for breakpoints at 1280px and 768px, last breakpoi…
Quintam26 Feb 22, 2019
53c444c
Struggled to style into 320px, close but needs work. Also html seems …
Quintam26 Feb 22, 2019
d029d0b
Manually merged 'Cart functionality' from Test in Dev due to merge co…
Quintam26 Feb 26, 2019
863ca66
Restarting CSS styling and moved 'Delete from cart' to CartContainer …
Quintam26 Feb 27, 2019
25061b9
Buttons disable at appropriate times
Quintam26 Feb 27, 2019
9b76b1f
Have made progress in creating a responsive site, using borders to ha…
Quintam26 Feb 27, 2019
526eb07
Moved product info to align with image
Quintam26 Feb 27, 2019
88604a1
Cannot place 'Add to cart' button in correct place and 'Acme Store' n…
Quintam26 Feb 27, 2019
092ad8e
Changed layout to resemble prototype v1
Quintam26 Feb 27, 2019
57812f3
Changed colors for inc and dec buttons
Quintam26 Feb 27, 2019
4a1e40f
Basic layout completed, next is media queries, cart page, and connect…
Quintam26 Feb 27, 2019
8f64181
media query for 320px width done. Doesn't look much like the prototyp…
Quintam26 Feb 27, 2019
222fb28
media query for 768px width done. Having issues with cart item stylin…
Quintam26 Feb 27, 2019
64e1113
media query for 1280px width done, will work on API next
Quintam26 Feb 27, 2019
349c6d2
CSS is mostly responsive now only elements such as the buttons are no…
Quintam26 Feb 28, 2019
2005e12
Searching online I found that the getProducts and buyProducts could b…
Quintam26 Feb 28, 2019
91c0427
Consol logging each item by mapping and not just the array
Quintam26 Feb 28, 2019
b38e51b
Can console log digging into the array by assiging keys and values to…
Quintam26 Feb 28, 2019
973315f
Update README.md
Quintam26 Feb 28, 2019
6c80c6a
Update README.md
Quintam26 Feb 28, 2019
5c41da0
Update README.md
Quintam26 Feb 28, 2019
3f3e040
Update README.md
Quintam26 Feb 28, 2019
1c9e215
Update README.md
Quintam26 Feb 28, 2019
226e6ed
Update README.md
Quintam26 Feb 28, 2019
4cd58e8
Update README.md
Quintam26 Feb 28, 2019
453232f
Update README.md
Quintam26 Feb 28, 2019
fa9cc4a
Update README.md
Quintam26 Feb 28, 2019
9d03246
Update README.md
Quintam26 Feb 28, 2019
9ad3bc5
Update README.md
Quintam26 Feb 28, 2019
767e5d1
Update README.md
Quintam26 Feb 28, 2019
0dacc5e
Update README.md
Quintam26 Feb 28, 2019
ebbd5af
Update README.md
Quintam26 Feb 28, 2019
4fb4212
Update README.md
Quintam26 Feb 28, 2019
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 25 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Binary file removed assets/Design.sketch
Binary file not shown.
48 changes: 35 additions & 13 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
31 changes: 30 additions & 1 deletion src/actions/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Expand All @@ -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 })
})
}
}
6 changes: 3 additions & 3 deletions src/api/products.json
Original file line number Diff line number Diff line change
@@ -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}
]
6 changes: 6 additions & 0 deletions src/api/productsApi.js
Original file line number Diff line number Diff line change
@@ -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)
}
12 changes: 12 additions & 0 deletions src/api/request.js
Original file line number Diff line number Diff line change
@@ -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);
33 changes: 26 additions & 7 deletions src/api/shop.js
Original file line number Diff line number Diff line change
@@ -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),
// }
Binary file added src/assets/chrono.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/ipad.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/tshirt.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading