Skip to content
This repository has been archived by the owner on Aug 5, 2022. It is now read-only.

Commit

Permalink
02 - Homework (#4)
Browse files Browse the repository at this point in the history
* Add get-product API call

* Implement fetching in ProductDetail

* Add styles for product details page
  • Loading branch information
prichodko authored and dannytce committed Apr 3, 2019
1 parent 13bef4e commit a1229d3
Show file tree
Hide file tree
Showing 6 changed files with 146 additions and 51 deletions.
17 changes: 17 additions & 0 deletions src/api/get-product.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { getToken } from './get-token'
import config from '../config'

export const getProductById = async id => {
const token = await getToken()
const response = await fetch(
`${config.apiUrl}/api/skus/${id}?include=prices`,
{
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
}
)
const { data, included } = await response.json()
return { data, included }
}
8 changes: 4 additions & 4 deletions src/api/get-products.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@ import { getToken } from './get-token'
export const getProducts = async () => {
const token = await getToken()

const res = await fetch(`${config.apiUrl}/api/skus?include=prices`, {
const response = await fetch(`${config.apiUrl}/api/skus?include=prices`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
})

const products = await res.json()
const { data, included } = await response.json()

return products.data.map(product => ({
return data.map(product => ({
...product.attributes,
id: product.id,
price: products.included.find(
price: included.find(
price => price.id === product.relationships.prices.data[0].id
).attributes,
}))
Expand Down
7 changes: 5 additions & 2 deletions src/globalStyles.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ const GlobalStyles = createGlobalStyle`
html {
font-size: 62.5%;
width: 100vw;
height: 100vh;
}
body {
Expand All @@ -44,8 +46,9 @@ const GlobalStyles = createGlobalStyle`
}
#root {
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
display: flex;
}
`

Expand Down
61 changes: 55 additions & 6 deletions src/pages/ProductDetail/index.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,63 @@
import React, { Component } from 'react'
import { Link } from 'react-router-dom'

import Loader from '../../components/Loader'
import { H1 } from '../../components/Typography'
import { getProductById } from '../../api/get-product'

import {
Wrapper,
ImgWrapper,
Img,
DetailsWrapper,
Description,
Price,
} from './styled'

// TODO: fetch product detail
class ProductDetail extends Component {
state = {}
state = {
product: null,
}

fetchProduct = async productId => {
this.setState({ isLoading: true })
const product = await getProductById(productId)

this.setState({ isLoading: false, product })
}

componentDidMount() {
const { productId } = this.props.match.params
this.fetchProduct(productId)
}

componentDidUpdate(prevProps) {
const { productId } = this.props.match.params
if (prevProps.match.params.productId !== productId) {
this.fetchProduct(productId)
}
}

render() {
const { match } = this.props
const { isLoading, product } = this.state

return (
<div>
<h1>Product detail: {match.params.productId}</h1>
</div>
<Wrapper>
{isLoading && <Loader />}
{product && (
<>
<ImgWrapper>
<Img src={product.data.attributes.image_url} />
</ImgWrapper>
<DetailsWrapper>
<H1 textAlign="center">{product.data.attributes.name}</H1>
<Price>{product.included[0].attributes.formatted_amount}</Price>
<Description>{product.data.attributes.description}</Description>
<Link to="/">Back</Link>
</DetailsWrapper>
</>
)}
</Wrapper>
)
}
}
Expand Down
40 changes: 40 additions & 0 deletions src/pages/ProductDetail/styled.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import styled from 'styled-components'
import theme from '../../common/theme'

export const Wrapper = styled.div`
display: flex;
flex: 1;
`

export const ImgWrapper = styled.div`
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
`

export const Img = styled.img`
height: 400px;
`

export const DetailsWrapper = styled.div`
flex: 1;
max-width: 40%;
display: flex;
justify-content: center;
align-items: center;
background-color: ${theme.color.softGray};
padding: 0 3rem;
flex-direction: column;
`

export const Price = styled.span`
font-size: 2.4rem;
color: ${theme.color.red};
`

export const Description = styled.span`
margin: 2rem 0;
text-align: center;
`
64 changes: 25 additions & 39 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1445,7 +1445,7 @@ async@^1.5.2:
version "1.5.2"
resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"

async@^2.1.4:
async@^2.1.4, async@^2.5.0:
version "2.6.2"
resolved "https://registry.yarnpkg.com/async/-/async-2.6.2.tgz#18330ea7e6e313887f5d2f2a904bac6fe4dd5381"
dependencies:
Expand Down Expand Up @@ -2068,15 +2068,14 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000918, caniuse-lite@^1.0.30000929:
version "1.0.30000943"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000943.tgz#00b25bd5808edc2ed1cfb53533a6a6ff6ca014ee"

caniuse-lite@^1.0.30000939, caniuse-lite@^1.0.30000940:
version "1.0.30000955"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000955.tgz#360fdb9a1e41d6dd996130411334e44a39e4446d"

caniuse-lite@^1.0.30000947:
version "1.0.30000953"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000953.tgz#8054c4e5c4aa69dc3269353a4a5e102909759dbb"

caniuse-lite@^1.0.30000949:
version "1.0.30000950"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000950.tgz#8c559d66e332b34e919d1086cc6d29c1948856ae"
integrity sha512-Cs+4U9T0okW2ftBsCIHuEYXXkki7mjXmjCh4c6PzYShk04qDEr76/iC7KwhLoWoY65wcra1XOsRD+S7BptEb5A==

capture-exit@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-1.2.0.tgz#1c5fcc489fd0ab00d4f1ac7ae1072e3173fbab6f"
Expand Down Expand Up @@ -2317,11 +2316,11 @@ comma-separated-tokens@^1.0.0:
dependencies:
trim "0.0.1"

commander@2.17.x:
commander@2.17.x, commander@~2.17.1:
version "2.17.1"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"

commander@^2.11.0, commander@^2.14.1, commander@^2.19.0, commander@^2.9.0, commander@~2.19.0:
commander@^2.11.0, commander@^2.14.1, commander@^2.9.0:
version "2.19.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"

Expand All @@ -2337,7 +2336,7 @@ component-emitter@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"

compressible@~2.0.16:
compressible@~2.0.14:
version "2.0.16"
resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.16.tgz#a49bf9858f3821b64ce1be0296afc7380466a77f"
dependencies:
Expand Down Expand Up @@ -3072,10 +3071,9 @@ electron-to-chromium@^1.3.103:
version "1.3.113"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.113.tgz#b1ccf619df7295aea17bc6951dc689632629e4a9"

electron-to-chromium@^1.3.116:
version "1.3.116"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.116.tgz#1dbfee6a592a0c14ade77dbdfe54fef86387d702"
integrity sha512-NKwKAXzur5vFCZYBHpdWjTMO8QptNLNP80nItkSIgUOapPAo9Uia+RvkCaZJtO7fhQaVElSvBPWEc2ku6cKsPA==
electron-to-chromium@^1.3.113:
version "1.3.122"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.122.tgz#b32a0805f48557bd3c3b8104eadc7fa511b14a9a"

elegant-spinner@^1.0.1:
version "1.0.1"
Expand Down Expand Up @@ -5805,13 +5803,11 @@ lru-cache@^5.1.1:
dependencies:
yallist "^3.0.2"

make-dir@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
make-dir@^1.0.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
dependencies:
pify "^4.0.1"
semver "^5.6.0"
pify "^3.0.0"

makeerror@1.0.x:
version "1.0.11"
Expand Down Expand Up @@ -6021,11 +6017,6 @@ mimic-fn@^1.0.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"

mimic-fn@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.0.0.tgz#0913ff0b121db44ef5848242c38bbb35d44cabde"
integrity sha512-jbex9Yd/3lmICXwYT6gA/j2mNQGU48wCh/VzRd+/Y/PjYQtlg1gLMdZqvu9s/xH7qKvngxRObl56XZR609IMbA==

mini-css-extract-plugin@0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz#ac0059b02b9692515a637115b0cc9fed3a35c7b0"
Expand Down Expand Up @@ -6189,7 +6180,7 @@ negotiator@0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"

neo-async@^2.5.0, neo-async@^2.6.0:
neo-async@^2.5.0:
version "2.6.0"
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.0.tgz#b9d15e4d71c6762908654b5183ed38b753340835"

Expand Down Expand Up @@ -6271,19 +6262,18 @@ node-pre-gyp@^0.10.0:
semver "^5.3.0"
tar "^4"

node-releases@^1.1.11:
version "1.1.11"
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.11.tgz#9a0841a4b0d92b7d5141ed179e764f42ad22724a"
integrity sha512-8v1j5KfP+s5WOTa1spNUAOfreajQPN12JXbRR0oDE+YrJBQCXBnNqUDj27EKpPLOoSiU3tKi3xGPB+JaOdUEQQ==
dependencies:
semver "^5.3.0"

node-releases@^1.1.3:
version "1.1.10"
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.10.tgz#5dbeb6bc7f4e9c85b899e2e7adcc0635c9b2adf7"
dependencies:
semver "^5.3.0"

node-releases@^1.1.8:
version "1.1.13"
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.13.tgz#8c03296b5ae60c08e2ff4f8f22ae45bd2f210083"
dependencies:
semver "^5.3.0"

nopt@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
Expand Down Expand Up @@ -6467,7 +6457,7 @@ on-finished@~2.3.0:
dependencies:
ee-first "1.1.1"

on-headers@~1.0.2:
on-headers@~1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"

Expand All @@ -6492,7 +6482,6 @@ opn@5.4.0:
opn@^5.1.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
integrity sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==
dependencies:
is-wsl "^1.1.0"

Expand Down Expand Up @@ -6787,7 +6776,6 @@ pify@^3.0.0:
pify@^4.0.0, pify@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==

pinkie-promise@^2.0.0:
version "2.0.1"
Expand Down Expand Up @@ -7945,10 +7933,9 @@ redent@^2.0.0:
indent-string "^3.0.0"
strip-indent "^2.0.0"

regenerate-unicode-properties@^8.0.2:
regenerate-unicode-properties@^8.0.1:
version "8.0.2"
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.0.2.tgz#7b38faa296252376d363558cfbda90c9ce709662"
integrity sha512-SbA/iNrBUf6Pv2zU8Ekv1Qbhv92yxL4hiDa2siuxs4KKn4oOoMDHXjAf7+Nz9qinUQ46B1LcWEi/PhJfPWpZWQ==
dependencies:
regenerate "^1.4.0"

Expand Down Expand Up @@ -8590,10 +8577,9 @@ source-map-support@^0.5.6:
buffer-from "^1.0.0"
source-map "^0.6.0"

source-map-support@~0.5.10:
source-map-support@~0.5.9:
version "0.5.11"
resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.11.tgz#efac2ce0800355d026326a0ca23e162aeac9a4e2"
integrity sha512-//sajEx/fGL3iw6fltKMdPvy8kL3kJ2O3iuYlRoT3k9Kb4BjOoZ+BZzaNHeuaruSt+Kf3Zk9tnfAQg9/AJqUVQ==
dependencies:
buffer-from "^1.0.0"
source-map "^0.6.0"
Expand Down

0 comments on commit a1229d3

Please sign in to comment.