41 public/src/components/Shop/Search/Search.css
View file
@@ -0,0 +1,41 @@
#Search__parent {
width: 100%;
height: 50px;
display: flex;
align-items: center;
position: relative;
}

#Search__child {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}

#Search__input {
border: none;
border-bottom: 1px solid black;
outline: none;
font-size: 18px;
width: 300px;
}

#Search__cartContainer{
position: absolute;
right: 10px;
font-size: 25px;
cursor: pointer;
}

#Search__cartIcon {
position: relative;
top: -2px;
}

#Search__cartNumber {
position: relative;
top: -2px;
font-size: 16px;
margin-right: 5px;
}
30 public/src/components/Shop/Search/Search.js
View file
@@ -0,0 +1,30 @@
import React, { Component } from "react";
import './Search.css';

import CartIcon from 'react-icons/lib/fa/shopping-cart';

export default class Search extends Component {
constructor() {
super();
this.showCart = this.showCart.bind( this );
}

showCart() {
const { history } = this.props;
history.push('/checkout');
}

render() {
return (
<div id="Search__parent">
<div id="Search__child">
<input id="Search__input" placeholder="Search by type of swag.." />
<div id="Search__cartContainer" onClick={ this.showCart }>
<span id="Search__cartNumber"> 0 </span>
<CartIcon id="Search__cartIcon" />
</div>
</div>
</div>
)
}
}
41 public/src/components/Shop/Shop.css
View file
@@ -0,0 +1,41 @@
#Shop__parent {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
}

#Shop__child {
width: 1000px;
height: 750px;
background-color: #fff;
border-radius: 3px;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 25px;
}

#Shop__swagParent {
height: 650px;
width: 100%;
background-color: #f2f2f2;
box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
box-sizing: border-box;
padding: 5px;
}

#Shop__swagChild {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 15px;
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow-y: auto;
}
43 public/src/components/Shop/Shop.js
View file
@@ -0,0 +1,43 @@
import React, { Component } from "react";
import './Shop.css';

import User from '../User/User';
import SignOut from '../SignOut/SignOut';
import Search from './Search/Search';
import Swag from './Swag/Swag';

export default class Shop extends Component {
render() {
const { history } = this.props;
return (
<div id="Shop__parent">
<User />
<SignOut />

<div id="Shop__child">
<Search history={ history } />

<div id="Shop__swagParent">
<div id="Shop__swagChild">
<Swag />
<Swag />
<Swag />
<Swag />
<Swag />
<Swag />
<Swag />
<Swag />
<Swag />
<Swag />
<Swag />
<Swag />
<Swag />
<Swag />
<Swag />
</div>
</div>
</div>
</div>
)
}
}
46 public/src/components/Shop/Swag/Swag.css
View file
@@ -0,0 +1,46 @@
#Swag__parent {
width: 250px;
height: 150px;
margin-right: 10px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 3px;
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.75);

position: relative;
}

#Swag__detailsContainer {
display: flex;
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
}

#Swag__priceContainer {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
}

#Swag__atcContainer {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
background-color: skyblue;
border-radius: 2px;
color: white;
cursor: pointer;
}

#Swag__name {
position: absolute;
top: 30px;
}
20 public/src/components/Shop/Swag/Swag.js
View file
@@ -0,0 +1,20 @@
import React, { Component } from "react";
import './Swag.css';

export default class Swag extends Component {
render() {
return (
<div id="Swag__parent">
<span id="Swag__name"> Swag Name </span>
<div id="Swag__detailsContainer">
<div id="Swag__priceContainer">
<span > $14.95 </span>
</div>
<div id="Swag__atcContainer">
<span> Add to Cart </span>
</div>
</div>
</div>
)
}
}
18 public/src/components/SignOut/SignOut.css
View file
@@ -0,0 +1,18 @@
#SignOut__parent {
position: absolute;
top: 0;
right: 20px;
background: #fff;
width: auto;
box-sizing: border-box;
padding: 10px 20px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.75);
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.75);
cursor: pointer;
}

#SignOut__icon {
position: relative;
top: -2px;
}
15 public/src/components/SignOut/SignOut.js
View file
@@ -0,0 +1,15 @@
import React, { Component } from "react";
import './SignOut.css';

import SignOutIcon from 'react-icons/lib/fa/sign-out';

export default class SignOut extends Component {
render() {
return (
<div id="SignOut__parent">
<SignOutIcon id="SignOut__icon" />
<span> Sign Out </span>
</div>
)
}
}
17 public/src/components/User/User.css
View file
@@ -0,0 +1,17 @@
#User__parent {
position: absolute;
top: 0;
right: 145px;
background: #fff;
width: auto;
box-sizing: border-box;
padding: 10px 20px;
border-radius: 3px;
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.75);
}

#User__icon {
margin-right: 3px;
position: relative;
top: -2px;
}
13 public/src/components/User/User.js
View file
@@ -0,0 +1,13 @@
import React from "react";
import './User.css';

import UserIcon from 'react-icons/lib/fa/user';

export default function User() {
return (
<div id="User__parent">
<UserIcon id="User__icon" />
<span> Guest </span>
</div>
)
}
5 public/src/index.css
View file

This file was deleted.

13 public/src/index.js
View file
@@ -1,8 +1,15 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import './index.css';

ReactDOM.render(<App />, document.getElementById('root'));
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);

registerServiceWorker();
7 public/src/logo.svg
View file
Deleted file not rendered
14 public/src/router.js
View file
@@ -0,0 +1,14 @@
import React from "react";
import { Switch, Route } from "react-router-dom";

import Login from './components/Login/Login';
import Shop from './components/Shop/Shop';
import Checkout from './components/Checkout/Checkout';

export default (
<Switch>
<Route component={ Login } path="/" exact />
<Route component={ Shop } path="/shop" />
<Route component={ Checkout } path="/checkout" />
</Switch>
)
0 public/src/store.js
View file
Empty file.
116 public/yarn.lock
View file
@@ -1519,7 +1519,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1"
sha.js "^2.4.8"

create-react-class@^15.6.0:
create-react-class@^15.5.3, create-react-class@^15.6.0:
version "15.6.0"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
dependencies:
@@ -2726,6 +2726,16 @@ he@1.1.x:
version "1.1.1"
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"

history@^4.5.1, history@^4.6.0:
version "4.6.3"
resolved "https://registry.yarnpkg.com/history/-/history-4.6.3.tgz#6d723a8712c581d6bef37e8c26f4aedc6eb86967"
dependencies:
invariant "^2.2.1"
loose-envify "^1.2.0"
resolve-pathname "^2.0.0"
value-equal "^0.2.0"
warning "^3.0.0"

hmac-drbg@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -2738,6 +2748,10 @@ hoek@2.x.x:
version "2.16.3"
resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"

hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"

home-or-tmp@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -2943,7 +2957,7 @@ interpret@^1.0.0:
version "1.0.3"
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"

invariant@^2.2.0, invariant@^2.2.2:
invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
dependencies:
@@ -3682,6 +3696,10 @@ locate-path@^2.0.0:
p-locate "^2.0.0"
path-exists "^3.0.0"

lodash-es@^4.2.0, lodash-es@^4.2.1:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"

lodash._reinterpolate@~3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -3719,15 +3737,15 @@ lodash.uniq@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"

"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.3.0:
"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"

longest@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"

loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
dependencies:
@@ -4275,7 +4293,7 @@ path-to-regexp@0.1.7:
version "0.1.7"
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"

path-to-regexp@^1.0.1:
path-to-regexp@^1.0.1, path-to-regexp@^1.5.3:
version "1.7.0"
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
dependencies:
@@ -4677,7 +4695,13 @@ promise@7.1.1, promise@^7.1.1:
dependencies:
asap "~2.0.3"

prop-types@^15.5.10:
prop-types@15.5.8:
version "15.5.8"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
dependencies:
fbjs "^0.8.9"

prop-types@^15.5.10, prop-types@^15.5.4:
version "15.5.10"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
dependencies:
@@ -4796,7 +4820,7 @@ react-dev-utils@^3.0.0:
strip-ansi "3.0.1"
text-table "0.2.0"

react-dom@15.6.1:
react-dom@^15.6.1:
version "15.6.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470"
dependencies:
@@ -4816,6 +4840,51 @@ react-error-overlay@^1.0.7:
settle-promise "1.0.0"
source-map "0.5.6"

react-icon-base@2.0.7:
version "2.0.7"
resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.0.7.tgz#0bd18736bd6ce79ca6d69ce8387a07fb8d4ceffe"
dependencies:
prop-types "15.5.8"

react-icons@^2.2.5:
version "2.2.5"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-2.2.5.tgz#f942501c21a4cc0456ce2bbee5032c93f6051dcf"
dependencies:
react-icon-base "2.0.7"

react-redux@^5.0.5:
version "5.0.5"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.5.tgz#f8e8c7b239422576e52d6b7db06439469be9846a"
dependencies:
create-react-class "^15.5.3"
hoist-non-react-statics "^1.0.3"
invariant "^2.0.0"
lodash "^4.2.0"
lodash-es "^4.2.0"
loose-envify "^1.1.0"
prop-types "^15.5.10"

react-router-dom@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.1.1.tgz#3021ade1f2c160af97cf94e25594c5f294583025"
dependencies:
history "^4.5.1"
loose-envify "^1.3.1"
prop-types "^15.5.4"
react-router "^4.1.1"

react-router@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.1.1.tgz#d448f3b7c1b429a6fbb03395099949c606b1fe95"
dependencies:
history "^4.6.0"
hoist-non-react-statics "^1.2.0"
invariant "^2.2.2"
loose-envify "^1.3.1"
path-to-regexp "^1.5.3"
prop-types "^15.5.4"
warning "^3.0.0"

react-scripts@1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.0.7.tgz#fe1436dda03bb45465c76d097cfea4f32eb7cbbb"
@@ -4859,7 +4928,7 @@ react-scripts@1.0.7:
optionalDependencies:
fsevents "1.0.17"

react@15.6.1:
react@^15.6.1:
version "15.6.1"
resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
dependencies:
@@ -4962,6 +5031,19 @@ reduce-function-call@^1.0.1:
dependencies:
balanced-match "^0.4.2"

redux-promise-middleware@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/redux-promise-middleware/-/redux-promise-middleware-4.3.0.tgz#38997574b6f150ab8ff1aa72ca5563fbc82c7cef"

redux@^3.7.0:
version "3.7.0"
resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.0.tgz#07a623cafd92eee8abe309d13d16538f6707926f"
dependencies:
lodash "^4.2.1"
lodash-es "^4.2.1"
loose-envify "^1.1.0"
symbol-observable "^1.0.3"

regenerate@^1.2.1:
version "1.3.2"
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
@@ -5110,6 +5192,10 @@ resolve-from@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"

resolve-pathname@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.1.0.tgz#e8358801b86b83b17560d4e3c382d7aef2100944"

resolve@1.1.7:
version "1.1.7"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
@@ -5593,6 +5679,10 @@ sw-toolbox@^3.4.0:
path-to-regexp "^1.0.1"
serviceworker-cache-polyfill "^4.0.0"

symbol-observable@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"

symbol-tree@^3.2.1:
version "3.2.2"
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
@@ -5892,6 +5982,10 @@ validate-npm-package-license@^3.0.1:
spdx-correct "~1.0.0"
spdx-expression-parse "~1.0.0"

value-equal@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.2.1.tgz#c220a304361fce6994dbbedaa3c7e1a1b895871d"

vary@~1.1.0, vary@~1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37"
@@ -5918,6 +6012,12 @@ walker@~1.0.5:
dependencies:
makeerror "1.0.x"

warning@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
dependencies:
loose-envify "^1.0.0"

watch@~0.10.0:
version "0.10.0"
resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc"