Skip to content

S
sample_pdp
Commit 17150cc1 authored by Praveen Reghunathan Nair's avatar Praveen Reghunathan Nair
Browse files
Options

Adding local copy developed sofar

parent 5ee6ba48
Hide whitespace changes
Inline Side-by-side
Showing with 17746 additions and 0 deletions
jsconfig.json 0 → 100644
View file @ 17150cc1
{
"compilerOptions": {
"baseUrl": "src"
}
}
\ No newline at end of file
package-lock.json 0 → 100644
View file @ 17150cc1
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
View file @ 17150cc1
{
"name": "sample_pdp",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"author": "pnair@nisum.com",
"scripts": {
"start": "concurrently \"react-scripts start\" \"npm run mock-api\"",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"mock-api": "json-server server/data.json --port 3001"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:3001/",
"devDependencies": {
"concurrently": "^5.1.0",
"json-server": "^0.15.1",
"node-sass": "^4.13.1"
}
}
public/index.html 0 → 100644
View file @ 17150cc1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
public/manifest.json 0 → 100644
View file @ 17150cc1
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
public/robots.txt 0 → 100644
View file @ 17150cc1
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
server/data.json 0 → 100644
View file @ 17150cc1
{
"category": {
"id": "shop/new/all-new",
"name": "All New",
"categoryType": "subcat",
"groups": [
{
"id": "belgian-linen-embroidery-duvet-cover-shams-slate-white-b3024",
"name": "Belgian Linen Ladder Stripe Embroidery Duvet Cover &amp; Shams - Slate/White",
"links": {
"www": "https://www.westelm.com/products/belgian-linen-embroidery-duvet-cover-shams-slate-white-b3024/"
},
"priceRange": {
"selling": {
"high": 329,
"low": 44
}
},
"thumbnail": {
"size": "m",
"meta": "",
"alt": "",
"rel": "thumbnail",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-s-m.jpg",
"height": 363
},
"hero": {
"size": "m",
"meta": "",
"alt": "",
"rel": "hero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-s-m.jpg",
"height": 363
},
"images": [
{
"size": "m",
"meta": "",
"alt": "",
"rel": "althero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-6-m.jpg",
"height": 363
},
{
"size": "m",
"meta": "",
"alt": "",
"rel": "althero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0012/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-m.jpg",
"height": 363
}
],
"swatches": [],
"messages": [],
"flags": [
{
"bopisSuppress": false,
"rank": 3,
"id": "newcore"
},
{
"bopisSuppress": false,
"rank": 9,
"id": "fairTrade"
}
],
"reviews": {
"recommendationCount": 0,
"likelihood": 0,
"reviewCount": 0,
"averageRating": 0,
"id": "belgian-linen-embroidery-duvet-cover-shams-slate-white-b3024",
"type": "GROUP_REVIEWS"
}
},
{
"id": "belgian-linen-embroidery-duvet-cover-shams-white-flax-b3025",
"name": "Belgian Linen Ladder Stripe Embroidery Duvet Cover &amp; Shams - White/Flax",
"links": {
"www": "https://www.westelm.com/products/belgian-linen-embroidery-duvet-cover-shams-white-flax-b3025/"
},
"priceRange": {
"selling": {
"high": 329,
"low": 44
}
},
"thumbnail": {
"size": "m",
"meta": "",
"alt": "",
"rel": "thumbnail",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-w-8-m.jpg",
"height": 363
},
"hero": {
"size": "m",
"meta": "",
"alt": "",
"rel": "hero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0006/img2m.jpg",
"height": 363
},
"images": [
{
"size": "m",
"meta": "",
"alt": "",
"rel": "althero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-5-m.jpg",
"height": 363
},
{
"size": "m",
"meta": "",
"alt": "",
"rel": "althero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-9-m.jpg",
"height": 363
}
],
"swatches": [],
"messages": [],
"flags": [
{
"bopisSuppress": false,
"rank": 3,
"id": "newcore"
},
{
"bopisSuppress": false,
"rank": 9,
"id": "fairTrade"
}
],
"reviews": {
"recommendationCount": 0,
"likelihood": 0,
"reviewCount": 0,
"averageRating": 0,
"id": "belgian-linen-embroidery-duvet-cover-shams-white-flax-b3025",
"type": "GROUP_REVIEWS"
}
},
{
"id": "belgian-linen-embroidery-duvet-cover-shams-white-midnight-b3026",
"name": "Belgian Linen Ladder Stripe Embroidery Duvet Cover &amp; Shams - White/Midnight",
"links": {
"www": "https://www.westelm.com/products/belgian-linen-embroidery-duvet-cover-shams-white-midnight-b3026/"
},
"priceRange": {
"selling": {
"high": 329,
"low": 44
}
},
"thumbnail": {
"size": "m",
"meta": "",
"alt": "",
"rel": "thumbnail",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-w-m.jpg",
"height": 363
},
"hero": {
"size": "m",
"meta": "",
"alt": "",
"rel": "hero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-w-m.jpg",
"height": 363
},
"images": [
{
"size": "m",
"meta": "",
"alt": "",
"rel": "althero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-w-2-m.jpg",
"height": 363
},
{
"size": "m",
"meta": "",
"alt": "",
"rel": "althero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-w-9-m.jpg",
"height": 363
}
],
"swatches": [],
"messages": [],
"flags": [
{
"bopisSuppress": false,
"rank": 3,
"id": "newcore"
},
{
"bopisSuppress": false,
"rank": 9,
"id": "fairTrade"
}
],
"reviews": {
"recommendationCount": 0,
"likelihood": 0,
"reviewCount": 0,
"averageRating": 0,
"id": "belgian-linen-embroidery-duvet-cover-shams-white-midnight-b3026",
"type": "GROUP_REVIEWS"
}
},
{
"id": "belgian-linen-embroidery-duvet-shams-white-horseradish-b3027",
"name": "Belgian Linen Ladder Stripe Embroidery Duvet Cover &amp; Shams - White/Dark Horseradish",
"links": {
"www": "https://www.westelm.com/products/belgian-linen-embroidery-duvet-shams-white-horseradish-b3027/"
},
"priceRange": {
"selling": {
"high": 329,
"low": 44
}
},
"thumbnail": {
"size": "m",
"meta": "",
"alt": "",
"rel": "thumbnail",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0009/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-w-m.jpg",
"height": 363
},
"hero": {
"size": "m",
"meta": "",
"alt": "",
"rel": "hero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0009/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-w-m.jpg",
"height": 363
},
"images": [
{
"size": "m",
"meta": "",
"alt": "",
"rel": "althero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0006/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-w-m.jpg",
"height": 363
},
{
"size": "m",
"meta": "",
"alt": "",
"rel": "althero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-w-5-m.jpg",
"height": 363
}
],
"swatches": [],
"messages": [],
"flags": [
{
"bopisSuppress": false,
"rank": 3,
"id": "newcore"
},
{
"bopisSuppress": false,
"rank": 9,
"id": "fairTrade"
}
],
"reviews": {
"recommendationCount": 0,
"likelihood": 0,
"reviewCount": 0,
"averageRating": 0,
"id": "belgian-linen-embroidery-duvet-shams-white-horseradish-b3027",
"type": "GROUP_REVIEWS"
}
},
{
"id": "belgian-linen-ladder-stripe-embroidery-sheet-set-b3028",
"name": "Belgian Linen Ladder Stripe Embroidery Sheet Set",
"links": {
"www": "https://www.westelm.com/products/belgian-linen-ladder-stripe-embroidery-sheet-set-b3028/"
},
"priceRange": {
"selling": {
"high": 349,
"low": 269
}
},
"thumbnail": {
"size": "m",
"meta": "",
"alt": "",
"rel": "thumbnail",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0010/belgian-linen-ladder-stripe-embroidery-sheet-set-m.jpg",
"height": 363
},
"hero": {
"size": "m",
"meta": "",
"alt": "",
"rel": "hero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0010/belgian-linen-ladder-stripe-embroidery-sheet-set-m.jpg",
"height": 363
},
"images": [
{
"size": "m",
"meta": "",
"alt": "",
"rel": "althero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0013/belgian-linen-ladder-stripe-embroidery-sheet-set-m.jpg",
"height": 363
},
{
"size": "m",
"meta": "",
"alt": "",
"rel": "althero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-ladder-stripe-embroidery-sheet-set-m.jpg",
"height": 363
},
{
"size": "m",
"meta": "",
"alt": "",
"rel": "althero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-ladder-stripe-embroidery-sheet-set-2-m.jpg",
"height": 363
}
],
"swatches": [],
"messages": [],
"flags": [
{
"bopisSuppress": false,
"rank": 3,
"id": "newcore"
},
{
"bopisSuppress": false,
"rank": 9,
"id": "fairTrade"
}
],
"reviews": {
"recommendationCount": 0,
"likelihood": 0,
"reviewCount": 0,
"averageRating": 0,
"id": "belgian-linen-ladder-stripe-embroidery-sheet-set-b3028",
"type": "GROUP_REVIEWS"
}
},
{
"id": "belgian-linen-merrow-edge-duvet-shams-white-misty-rose-b3036",
"name": "Belgian Linen Merrow Edge Duvet Cover &amp; Shams - White/Misty Rose",
"links": {
"www": "https://www.westelm.com/products/belgian-linen-merrow-edge-duvet-shams-white-misty-rose-b3036/"
},
"priceRange": {
"selling": {
"high": 299,
"low": 44
}
},
"thumbnail": {
"size": "m",
"meta": "",
"alt": "",
"rel": "thumbnail",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202005/0006/belgian-linen-merrow-edge-duvet-cover-shams-white-misty-ro-m.jpg",
"height": 363
},
"hero": {
"size": "m",
"meta": "",
"alt": "",
"rel": "hero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202005/0006/belgian-linen-merrow-edge-duvet-cover-shams-white-misty-ro-m.jpg",
"height": 363
},
"images": [
{
"size": "m",
"meta": "",
"alt": "",
"rel": "althero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-merrow-edge-duvet-cover-shams-7-m.jpg",
"height": 363
}
],
"swatches": [],
"messages": [],
"flags": [
{
"bopisSuppress": false,
"rank": 3,
"id": "newcore"
},
{
"bopisSuppress": false,
"rank": 9,
"id": "fairTrade"
}
],
"reviews": {
"recommendationCount": 0,
"likelihood": 0,
"reviewCount": 0,
"averageRating": 0,
"id": "belgian-linen-merrow-edge-duvet-shams-white-misty-rose-b3036",
"type": "GROUP_REVIEWS"
}
},
{
"id": "belgian-linen-merrow-edge-duvet-shams-white-iron-gate-b3035",
"name": "Belgian Linen Merrow Edge Duvet Cover &amp; Shams - White/Iron Gate",
"links": {
"www": "https://www.westelm.com/products/belgian-linen-merrow-edge-duvet-shams-white-iron-gate-b3035/"
},
"priceRange": {
"selling": {
"high": 299,
"low": 44
}
},
"thumbnail": {
"size": "m",
"meta": "",
"alt": "",
"rel": "thumbnail",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0013/belgian-linen-merrow-edge-duvet-cover-shams-white-iron-gat-m.jpg",
"height": 363
},
"hero": {
"size": "m",
"meta": "",
"alt": "",
"rel": "hero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0013/belgian-linen-merrow-edge-duvet-cover-shams-white-iron-gat-m.jpg",
"height": 363
},
"images": [
{
"size": "m",
"meta": "",
"alt": "",
"rel": "althero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0013/belgian-linen-merrow-edge-duvet-cover-shams-m.jpg",
"height": 363
}
],
"swatches": [],
"messages": [],
"flags": [
{
"bopisSuppress": false,
"rank": 3,
"id": "newcore"
},
{
"bopisSuppress": false,
"rank": 9,
"id": "fairTrade"
}
],
"reviews": {
"recommendationCount": 0,
"likelihood": 0,
"reviewCount": 0,
"averageRating": 0,
"id": "belgian-linen-merrow-edge-duvet-shams-white-iron-gate-b3035",
"type": "GROUP_REVIEWS"
}
},
{
"id": "belgian-linen-merrow-duvet-shams-white-dark-horseradish-b3034",
"name": "Belgian Linen Merrow Edge Duvet Cover &amp; Shams - White/Dark Horseradish",
"links": {
"www": "https://www.westelm.com/products/belgian-linen-merrow-duvet-shams-white-dark-horseradish-b3034/"
},
"priceRange": {
"selling": {
"high": 299,
"low": 44
}
},
"thumbnail": {
"size": "m",
"meta": "",
"alt": "",
"rel": "thumbnail",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-w-6-m.jpg",
"height": 363
},
"hero": {
"size": "m",
"meta": "",
"alt": "",
"rel": "hero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-w-6-m.jpg",
"height": 363
},
"images": [
{
"size": "m",
"meta": "",
"alt": "",
"rel": "althero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-ladder-stripe-embroidery-duvet-cover-shams-w-3-m.jpg",
"height": 363
}
],
"swatches": [],
"messages": [],
"flags": [
{
"bopisSuppress": false,
"rank": 3,
"id": "newcore"
},
{
"bopisSuppress": false,
"rank": 9,
"id": "fairTrade"
}
],
"reviews": {
"recommendationCount": 0,
"likelihood": 0,
"reviewCount": 0,
"averageRating": 0,
"id": "belgian-linen-merrow-duvet-shams-white-dark-horseradish-b3034",
"type": "GROUP_REVIEWS"
}
},
{
"id": "belgian-linen-merrow-edge-duvet-cover-shams-flax-midnight-b3033",
"name": "Belgian Linen Merrow Edge Duvet Cover &amp; Shams - Flax/Midnight",
"links": {
"www": "https://www.westelm.com/products/belgian-linen-merrow-edge-duvet-cover-shams-flax-midnight-b3033/"
},
"priceRange": {
"selling": {
"high": 299,
"low": 44
}
},
"thumbnail": {
"size": "m",
"meta": "",
"alt": "",
"rel": "thumbnail",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-merrow-edge-duvet-cover-shams-1-m.jpg",
"height": 363
},
"hero": {
"size": "m",
"meta": "",
"alt": "",
"rel": "hero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-merrow-edge-duvet-cover-shams-1-m.jpg",
"height": 363
},
"images": [
{
"size": "m",
"meta": "",
"alt": "",
"rel": "althero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-merrow-edge-duvet-cover-shams-flax-midnight-1-m.jpg",
"height": 363
}
],
"swatches": [],
"messages": [],
"flags": [
{
"bopisSuppress": false,
"rank": 3,
"id": "newcore"
},
{
"bopisSuppress": false,
"rank": 9,
"id": "fairTrade"
}
],
"reviews": {
"recommendationCount": 0,
"likelihood": 0,
"reviewCount": 0,
"averageRating": 0,
"id": "belgian-linen-merrow-edge-duvet-cover-shams-flax-midnight-b3033",
"type": "GROUP_REVIEWS"
}
},
{
"id": "belgian-linen-merrow-duvet-cover-shams-flax-terracotta-b3032",
"name": "Belgian Linen Merrow Edge Duvet Cover &amp; Shams - Flax/Terracotta",
"links": {
"www": "https://www.westelm.com/products/belgian-linen-merrow-duvet-cover-shams-flax-terracotta-b3032/"
},
"priceRange": {
"selling": {
"high": 299,
"low": 44
}
},
"thumbnail": {
"size": "m",
"meta": "",
"alt": "",
"rel": "thumbnail",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-merrow-edge-duvet-cover-shams-flax-terracott-2-m.jpg",
"height": 363
},
"hero": {
"size": "m",
"meta": "",
"alt": "",
"rel": "hero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-merrow-edge-duvet-cover-shams-flax-terracott-2-m.jpg",
"height": 363
},
"images": [
{
"size": "m",
"meta": "",
"alt": "",
"rel": "althero",
"width": 363,
"href": "https://www.westelm.com/weimgs/rk/images/wcm/products/202003/0005/belgian-linen-merrow-edge-duvet-cover-shams-flax-terracott-3-m.jpg",
"height": 363
}
],
"swatches": [],
"messages": [],
"flags": [
{
"bopisSuppress": false,
"rank": 3,
"id": "newcore"
},
{
"bopisSuppress": false,
"rank": 9,
"id": "fairTrade"
}
],
"reviews": {
"recommendationCount": 0,
"likelihood": 0,
"reviewCount": 0,
"averageRating": 0,
"id": "belgian-linen-merrow-duvet-cover-shams-flax-terracotta-b3032",
"type": "GROUP_REVIEWS"
}
}
],
"totalPages": 84,
"categories": []
}
}
\ No newline at end of file
src/App/App.jsx 0 → 100644
View file @ 17150cc1
import React, { Component } from 'react';
import styles from './App.module.scss';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
import PLPPage from 'pages/PLP';
import PDPPage from 'pages/PDP';
import ROUTES from 'constants/routes';
import Header from 'components/Header';
import Footer from 'components/Footer';
import LoadingAnimation from 'components/LoadingAnimation';
class App extends Component {
componentDidMount() {
this.props.initCategory();
}
render() {
const { loading } = this.props;
if (loading) {
return (
<LoadingAnimation style={{ height: '100vh' }}></LoadingAnimation>
);
}
else {
return (
<Router>
<Header />
<Switch>
<Route exact path={ROUTES.listing.path} component={PLPPage} />
<Route exact path={ROUTES.details.path} component={PDPPage} />
<Redirect to={ROUTES.fallback} />
</Switch>
<Footer />
</Router>
);
}
}
}
export default App;
\ No newline at end of file
src/App/App.module.scss 0 → 100644
View file @ 17150cc1
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {}
\ No newline at end of file
src/App/App.spec.js 0 → 100644
View file @ 17150cc1
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
src/App/index.js 0 → 100644
View file @ 17150cc1
import { connect } from 'react-redux';
import App from './App';
import { initCategory } from 'redux/actions/category';
const mapStateToProps = ({ category }) => {
const { loading, error, items, name } = category;
return {
loading,
error,
items,
name
}
};
const mapDispatchToProps = {
initCategory
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
\ No newline at end of file
src/components/Footer/Footer.jsx 0 → 100644
View file @ 17150cc1
import React from 'react';
import style from './Footer.module.scss';
function Footer() {
return (
<footer className={style.appFooter}>
Footer Goes here!
</footer>
);
}
export default Footer;
\ No newline at end of file
src/components/Footer/Footer.module.scss 0 → 100644
View file @ 17150cc1
.appFooter {
position: fixed;
bottom: 0;
left: 0;
}
\ No newline at end of file
src/components/Footer/index.js 0 → 100644
View file @ 17150cc1
import Footer from './Footer';
export default Footer;
\ No newline at end of file
src/components/Header/Header.jsx 0 → 100644
View file @ 17150cc1
import React from 'react';
import style from './Header.module.scss';
function Header() {
return (
<header className={style.appHeader}>
<h1>West elm</h1>
</header>
);
}
export default Header;
\ No newline at end of file
src/components/Header/Header.module.scss 0 → 100644
View file @ 17150cc1
@import '~styles/variables';
@import '~styles/mixins';
.appHeader {
height: $large-footer-height;
position: fixed;
top: 0;
left: 0;
width: 100%;
box-shadow: 0 0 2px 0 rgba-background($primary-black, .24), 0 2px 2px 0 rgba-background($primary-black, .12);
@include flex-box();
h1 {
color: $primary;
}
}
\ No newline at end of file
src/components/Header/index.js 0 → 100644
View file @ 17150cc1
import Header from './Header';
export default Header;
\ No newline at end of file
src/components/LoadingAnimation/LoadingAnimation.jsx 0 → 100644
View file @ 17150cc1
import React, { Component } from "react";
import styles from './LoadingAnimation.module.scss';
class Loading extends Component {
render() {
return (
<div className={styles.loadingAnimation} style={this.props.style} >
<div className={styles.loader}></div>
</div>
);
}
}
export default Loading;
\ No newline at end of file
src/components/LoadingAnimation/LoadingAnimation.module.scss 0 → 100644
View file @ 17150cc1
@import '~styles/variables';
@import '~styles/mixins';
.loadingAnimation {
@include flex-box();
height: 100%;
.loader {
border: 16px solid $gray;
border-radius: 50%;
border-top: 16px solid $primary;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}
\ No newline at end of file
src/components/LoadingAnimation/LoadingAnimation.spec.js 0 → 100644
View file @ 17150cc1
import React from 'react';
import ReactDOM from 'react-dom';
import LoadingAnimation from './LoadingAnimation';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<LoadingAnimation />, div);
ReactDOM.unmountComponentAtNode(div);
});
\ No newline at end of file
src/components/LoadingAnimation/index.js 0 → 100644
View file @ 17150cc1
import LoadingAnimation from './LoadingAnimation';
export default LoadingAnimation;
\ No newline at end of file
src/constants/routes.js 0 → 100644
View file @ 17150cc1
const newItemsCategoryCode = 'new';
const listing = Object.freeze({
path: '/shop/:category',
getUrl: (categoryCode) => `/shop/${categoryCode}`
});
const details = Object.freeze({
path: '/product/:productId',
getUrl: (productId) => `/product/${productId}`
});
const ROUTES = Object.freeze({
listing,
details,
fallback: listing.getUrl(newItemsCategoryCode)
});
export default ROUTES;
\ No newline at end of file
src/constants/urls.js 0 → 100644
View file @ 17150cc1
const CATEGORY = '/category';
export const URL = {
CATEGORY
};
src/index.js 0 → 100644
View file @ 17150cc1
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from 'App';
import configureStore from 'redux/configureStore';
export function main(args = {}) {
let { renderNow = false, store = null, rootElement = null, reactDOM = ReactDOM } = args;
if (rootElement === null) {
rootElement = document.getElementById('root');
}
if (store === null) {
store = configureStore();
}
if (renderNow) {
reactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
);
}
}
// We don't need to render while unit testing with jest.
const runningTests = (process.env.NODE_ENV === 'test');
const renderNow = !(runningTests);
main({ renderNow });
\ No newline at end of file
src/pages/PDP/PDP.jsx 0 → 100644
View file @ 17150cc1
import React from 'react';
import styles from './PDP.module.scss';
function PDPPage() {
return (
<section className={styles.PDPPage}>
PDP Page!
</section>
);
}
export default PDPPage;
\ No newline at end of file
src/pages/PDP/PDP.module.scss 0 → 100644
View file @ 17150cc1
@import '~styles/variables';
.PDPPage {
margin-top: $large-footer-height;
}
\ No newline at end of file
src/pages/PDP/index.js 0 → 100644
View file @ 17150cc1
import PDPPage from './PDP';
export default PDPPage;
\ No newline at end of file
src/pages/PLP/PLP.jsx 0 → 100644
View file @ 17150cc1
import React from 'react';
import styles from './PLP.module.scss';
function PLPPage() {
return (
<section className={styles.PLPPage}>
PLP Page!
</section>
);
}
export default PLPPage;
src/pages/PLP/PLP.module.scss 0 → 100644
View file @ 17150cc1
@import '~styles/variables';
.PLPPage {
margin-top: $large-footer-height;
}
\ No newline at end of file
src/pages/PLP/index.js 0 → 100644
View file @ 17150cc1
import PLPPage from './PLP';
export default PLPPage;
\ No newline at end of file
src/redux/actions/category.js 0 → 100644
View file @ 17150cc1
import API from 'services/api';
import { CATEGORY_ACTION_TYPE } from 'redux/constants/actionTypes';
export function initCategory() {
const { CATEGORY_INIT_BEGIN, CATEGORY_INIT_SUCCESS, CATEGORY_INIT_FAILED } = CATEGORY_ACTION_TYPE;
return async dispatch => {
dispatch({ type: CATEGORY_INIT_BEGIN });
try {
const result = await API.getCategoryData();
const { name, groups: items } = result;
dispatch({ type: CATEGORY_INIT_SUCCESS, payload: { name, items } });
}
catch (err) {
console.log(err);
dispatch({ type: CATEGORY_INIT_FAILED, payload: err });
}
};
}
\ No newline at end of file
src/redux/configureStore.js 0 → 100644
View file @ 17150cc1
import { applyMiddleware, compose, createStore } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from 'redux/reducers';
export default function configureStore() {
const middlewares = [thunkMiddleware];
const middlewareEnhancer = applyMiddleware(...middlewares);
const enhancers = [middlewareEnhancer];
if (window.devToolsExtension) {
enhancers.push(window.devToolsExtension());
}
const composedEnhancers = compose(...enhancers);
const store = createStore(rootReducer, undefined, composedEnhancers)
return store
}
\ No newline at end of file
src/redux/constants/actionTypes.js 0 → 100644
View file @ 17150cc1
const CATEGORY_INIT_BEGIN = 'CATEGORY_INIT_BEGIN';
const CATEGORY_INIT_SUCCESS = 'CATEGORY_INIT_SUCCESS';
const CATEGORY_INIT_FAILED = 'CATEGORY_INIT_FAILED';
export const CATEGORY_ACTION_TYPE = Object.freeze({
CATEGORY_INIT_BEGIN,
CATEGORY_INIT_SUCCESS,
CATEGORY_INIT_FAILED,
});
\ No newline at end of file
src/redux/reducers/category.js 0 → 100644
View file @ 17150cc1
import { CATEGORY_ACTION_TYPE } from 'redux/constants/actionTypes';
const { CATEGORY_INIT_BEGIN, CATEGORY_INIT_SUCCESS, CATEGORY_INIT_FAILURE } = CATEGORY_ACTION_TYPE;
const initialState = {
loading: true,
error: null,
items: [],
name: ''
};
export default function categoryReducer(state = initialState, action) {
switch (action.type) {
case CATEGORY_INIT_BEGIN: {
return {
...state,
loading: true
}
}
case CATEGORY_INIT_SUCCESS: {
return {
...state,
loading: false
}
}
case CATEGORY_INIT_FAILURE: {
return {
...state,
loading: false,
error: action.payload,
}
}
default:
return state;
}
}
\ No newline at end of file
src/redux/reducers/index.js 0 → 100644
View file @ 17150cc1
import { combineReducers } from 'redux';
import categoryReducer from './category';
const rootReducer = combineReducers({
category: categoryReducer,
});
export default rootReducer;
src/services/api.js 0 → 100644
View file @ 17150cc1
import { URL } from 'constants/urls';
async function get(url) {
const response = await fetch(url);
if (response.ok) {
const data = await response.json();
return data;
}
else {
const message = `Following api request resulted in an exception.
Url: ${response.url},
Status: ${response.status},
StatusText: ${response.statusText}`;
throw Error(message);
}
}
class ApiClient {
async getCategoryData() {
return get(URL.CATEGORY);
}
}
export default new ApiClient();
\ No newline at end of file
src/setupTests.js 0 → 100644
View file @ 17150cc1
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
\ No newline at end of file
src/styles/_mixins.scss 0 → 100644
View file @ 17150cc1
@mixin flex-box($display: flex, $direction: row, $alignItems: center, $justifyContent: center) {
display: $display;
flex-direction: $direction;
align-items: $alignItems;
justify-content: $justifyContent;
}
@function rgba-background($hexcolor, $opacity:1) {
@return rgba($hexcolor, $opacity);
}
\ No newline at end of file
src/styles/_variables.scss 0 → 100644
View file @ 17150cc1
// Primary
$primary : #866347;
$primary-black : #333333;
$gray : #F5F6F8;
$large-footer-height: 60px;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment