diff --git a/index.html b/index.html
index b99d7be..ca35f29 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
-
First App
+ Brew shop
diff --git a/index.js b/index.js
index eda7a8b..18e728e 100644
--- a/index.js
+++ b/index.js
@@ -1,9 +1,41 @@
+import './src/main.css';
+import 'bootstrap/dist/css/bootstrap.css';
+
import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
-import Catalog from './src/components/views/Catalog';
-import 'bootstrap/dist/css/bootstrap.css';
+
+import routes from './src/routes';
+import {
+ BrowserRouter as Router, Route, Switch, NavLink
+} from 'react-router-dom';
+
+import Header from './src/components/views/shared/Header';
+import Footer from './src/components/views/shared/Footer';
+
+import CartContainer from '~/src/containers/CartContainer';
+import { Container } from 'reactstrap';
+
+const RoutesWithSubroutes = (route) => (
+
+);
+
+const App = () => (
+
+
+
+
+
+
+ { routes.map((route) => RoutesWithSubroutes(route)) }
+
+
+
+
+
+
+);
ReactDOM.render(
- ,
+ ,
document.getElementById('root')
);
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 8be5183..5d80120 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4419,6 +4419,28 @@
}
}
},
+ "history": {
+ "version": "4.7.2",
+ "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
+ "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
+ "requires": {
+ "invariant": "^2.2.1",
+ "loose-envify": "^1.2.0",
+ "resolve-pathname": "^2.2.0",
+ "value-equal": "^0.4.0",
+ "warning": "^3.0.0"
+ },
+ "dependencies": {
+ "warning": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+ "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+ "requires": {
+ "loose-envify": "^1.0.0"
+ }
+ }
+ }
+ },
"hoist-non-react-statics": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.1.0.tgz",
@@ -4567,7 +4589,6 @@
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
- "dev": true,
"requires": {
"loose-envify": "^1.0.0"
}
@@ -5555,6 +5576,21 @@
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
"dev": true
},
+ "path-to-regexp": {
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
+ "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
+ "requires": {
+ "isarray": "0.0.1"
+ },
+ "dependencies": {
+ "isarray": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+ "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+ }
+ }
+ },
"path-type": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz",
@@ -5765,6 +5801,40 @@
"prop-types": "^15.6.1"
}
},
+ "react-router": {
+ "version": "4.3.1",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
+ "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==",
+ "requires": {
+ "history": "^4.7.2",
+ "hoist-non-react-statics": "^2.5.0",
+ "invariant": "^2.2.4",
+ "loose-envify": "^1.3.1",
+ "path-to-regexp": "^1.7.0",
+ "prop-types": "^15.6.1",
+ "warning": "^4.0.1"
+ },
+ "dependencies": {
+ "hoist-non-react-statics": {
+ "version": "2.5.5",
+ "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+ "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+ }
+ }
+ },
+ "react-router-dom": {
+ "version": "4.3.1",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
+ "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
+ "requires": {
+ "history": "^4.7.2",
+ "invariant": "^2.2.4",
+ "loose-envify": "^1.3.1",
+ "prop-types": "^15.6.1",
+ "react-router": "^4.3.1",
+ "warning": "^4.0.1"
+ }
+ },
"react-transition-group": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.5.0.tgz",
@@ -6346,6 +6416,11 @@
"integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=",
"dev": true
},
+ "resolve-pathname": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+ "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
+ },
"resolve-url": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -7073,11 +7148,15 @@
"spdx-expression-parse": "^3.0.0"
}
},
+ "value-equal": {
+ "version": "0.4.0",
+ "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+ "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+ },
"warning": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
"integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
- "dev": true,
"requires": {
"loose-envify": "^1.0.0"
}
diff --git a/package.json b/package.json
index 97a1be9..3be9bb3 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,8 @@
"main.css": "^1.0.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
+ "react-router": "^4.3.1",
+ "react-router-dom": "^4.3.1",
"reactstrap": "^6.5.0",
"src": "^1.1.2"
}
diff --git a/src/components/views/Catalog/Header/index.js b/src/components/views/Catalog/Header/index.js
deleted file mode 100644
index 9627a67..0000000
--- a/src/components/views/Catalog/Header/index.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { Component } from 'react';
-import {
- Collapse,
- Navbar,
- NavbarBrand,
- Nav,
- NavItem,
- NavLink } from 'reactstrap';
-
-import Cart from './Cart';
-
-
-class Header extends Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- return (
-
-
- Brewers shop 🍺
-
-
-
-
-
- );
- }
-}
-
-export default Header;
-
diff --git a/src/components/views/ProductCard/CardInput.js b/src/components/views/Catalog/ProductCard/CardInput.js
similarity index 100%
rename from src/components/views/ProductCard/CardInput.js
rename to src/components/views/Catalog/ProductCard/CardInput.js
diff --git a/src/components/views/ProductCard/Image.js b/src/components/views/Catalog/ProductCard/Image.js
similarity index 100%
rename from src/components/views/ProductCard/Image.js
rename to src/components/views/Catalog/ProductCard/Image.js
diff --git a/src/components/views/ProductCard/Price.js b/src/components/views/Catalog/ProductCard/Price.js
similarity index 100%
rename from src/components/views/ProductCard/Price.js
rename to src/components/views/Catalog/ProductCard/Price.js
diff --git a/src/components/views/ProductCard/index.js b/src/components/views/Catalog/ProductCard/index.js
similarity index 100%
rename from src/components/views/ProductCard/index.js
rename to src/components/views/Catalog/ProductCard/index.js
diff --git a/src/components/views/Catalog/index.js b/src/components/views/Catalog/index.js
index 85377bd..c545f38 100644
--- a/src/components/views/Catalog/index.js
+++ b/src/components/views/Catalog/index.js
@@ -1,35 +1,16 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
-import { Container, Row, Col } from 'reactstrap';
-import '~/src/main.css'
+import { Row, Col } from 'reactstrap';
-import Header from './Header';
import ProductsCatalog from '~/src/containers/ProductsCatalog';
import products from '~/constants/products.js';
-import CartContainer from '~/src/containers/CartContainer';
class Catalog extends Component {
render() {
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
);
}
}
diff --git a/src/components/views/shared/Footer/index.js b/src/components/views/shared/Footer/index.js
new file mode 100644
index 0000000..ff57b00
--- /dev/null
+++ b/src/components/views/shared/Footer/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Container } from 'reactstrap';
+
+const Footer = () => {
+ return (
+
+ );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/views/Catalog/Header/Cart/CartIcon.js b/src/components/views/shared/Header/Cart/CartIcon.js
similarity index 100%
rename from src/components/views/Catalog/Header/Cart/CartIcon.js
rename to src/components/views/shared/Header/Cart/CartIcon.js
diff --git a/src/components/views/Catalog/Header/Cart/CartItem.js b/src/components/views/shared/Header/Cart/CartItem.js
similarity index 90%
rename from src/components/views/Catalog/Header/Cart/CartItem.js
rename to src/components/views/shared/Header/Cart/CartItem.js
index 3c75ec2..092ec43 100644
--- a/src/components/views/Catalog/Header/Cart/CartItem.js
+++ b/src/components/views/shared/Header/Cart/CartItem.js
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Table } from 'reactstrap';
-import Price from '~/src/components/views/ProductCard/Price'
+import Price from '~/src/components/views/Catalog/ProductCard/Price';
const CartItem = (props) => {
const { title, quantity, price } = props.product;
diff --git a/src/components/views/Catalog/Header/Cart/index.js b/src/components/views/shared/Header/Cart/index.js
similarity index 100%
rename from src/components/views/Catalog/Header/Cart/index.js
rename to src/components/views/shared/Header/Cart/index.js
diff --git a/src/components/views/shared/Header/index.js b/src/components/views/shared/Header/index.js
new file mode 100644
index 0000000..11829f8
--- /dev/null
+++ b/src/components/views/shared/Header/index.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import {
+ Collapse,
+ Navbar,
+ NavbarBrand,
+ Nav,
+ NavItem,
+ NavLink } from 'reactstrap';
+import { NavLink as RRNavLink} from 'react-router-dom';
+
+import {
+ mainPath, catalogPath, aboutPath,
+} from '~/src/helpers/routes';
+
+import Cart from './Cart';
+
+
+class Header extends Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ return (
+
+ Brewers shop 🍺
+
+
+
+
+ );
+ }
+}
+
+export default Header;
+
diff --git a/src/containers/CartContainer.js b/src/containers/CartContainer.js
index 8831e62..8693d28 100644
--- a/src/containers/CartContainer.js
+++ b/src/containers/CartContainer.js
@@ -32,7 +32,7 @@ class CartContainer extends Component {
render() {
return (
this.addToCart(product, quantity), // <----
+ addToCart: (product, quantity) => this.addToCart(product, quantity),
quantity: this.quantity(),
inCart: this.state.itemsList }
}>
diff --git a/src/containers/CartItemsList.js b/src/containers/CartItemsList.js
index 6834df6..54dd2d7 100644
--- a/src/containers/CartItemsList.js
+++ b/src/containers/CartItemsList.js
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import CartItem from '~/src/components/views/Catalog/Header/Cart/CartItem';
+import CartItem from '~/src/components/views/shared/Header/Cart/CartItem';
class CartItemsList extends Component {
diff --git a/src/containers/ProductsCatalog.js b/src/containers/ProductsCatalog.js
index 1eebdbc..0cbd755 100644
--- a/src/containers/ProductsCatalog.js
+++ b/src/containers/ProductsCatalog.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Col } from 'reactstrap';
-import ProductCard from '~/src/components/views/ProductCard';
-import { addDescription } from '~/src/components/helpers/AddDescription';
+import ProductCard from '~/src/components/views/Catalog/ProductCard';
+import { addDescription } from '~/src/helpers/AddDescription';
class ProductsCatalog extends Component {
render() {
diff --git a/src/components/helpers/AddDescription.js b/src/helpers/AddDescription.js
similarity index 100%
rename from src/components/helpers/AddDescription.js
rename to src/helpers/AddDescription.js
diff --git a/src/helpers/routes.js b/src/helpers/routes.js
new file mode 100644
index 0000000..fa66f9a
--- /dev/null
+++ b/src/helpers/routes.js
@@ -0,0 +1,5 @@
+export const mainPath = () => '/';
+export const catalogPath = () => '/catalog';
+export const productPath = (id = ':id') => `/products/${id}`;
+export const cartPath = () => '/cart';
+export const aboutPath = () => '/about';
\ No newline at end of file
diff --git a/src/main.css b/src/main.css
index 60526f1..209ed7c 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1,10 +1,13 @@
.footer {
+ position: absolute;
+ bottom: 0px;
+ width: 100%;
+ height: 60px;
+ line-height: 60px;
background-color: #f5f5f5;
- padding-right: 15px;
- padding-left: 15px;
}
p {
font-size: 80%;
color: #000;
-}
\ No newline at end of file
+}
diff --git a/src/routes/About.js b/src/routes/About.js
new file mode 100644
index 0000000..14f08f7
--- /dev/null
+++ b/src/routes/About.js
@@ -0,0 +1,7 @@
+import { aboutPath } from '~/src/helpers/routes.js';
+import React from 'react';
+
+export default {
+ path: aboutPath(),
+ render: () => (About
)
+};
diff --git a/src/routes/Catalog.js b/src/routes/Catalog.js
new file mode 100644
index 0000000..5dc8127
--- /dev/null
+++ b/src/routes/Catalog.js
@@ -0,0 +1,7 @@
+import { catalogPath } from '~/src/helpers/routes.js';
+import Catalog from '~/src/components/views/Catalog';
+
+export default {
+ path: catalogPath(),
+ component: Catalog
+};
diff --git a/src/routes/Main.js b/src/routes/Main.js
new file mode 100644
index 0000000..bf94d2f
--- /dev/null
+++ b/src/routes/Main.js
@@ -0,0 +1,9 @@
+import { mainPath } from '~/src/helpers/routes.js';
+import React from 'react';
+
+export default {
+ path: mainPath(),
+ render: () => ( Main
),
+ exact: true,
+ strict: true
+};
diff --git a/src/routes/Product.js b/src/routes/Product.js
new file mode 100644
index 0000000..1ddf8f3
--- /dev/null
+++ b/src/routes/Product.js
@@ -0,0 +1,7 @@
+import { productPath } from '~/src/helpers/routes.js';
+import React from 'react';
+
+export default {
+ path: productPath(),
+ render: ({match}) => (Product #{match.params.id}
),
+};
diff --git a/src/routes/index.js b/src/routes/index.js
new file mode 100644
index 0000000..66aed31
--- /dev/null
+++ b/src/routes/index.js
@@ -0,0 +1,8 @@
+import Main from './Main';
+import About from './About';
+import Catalog from './Catalog';
+import Product from './Product';
+
+
+export default [Main, About, Catalog, Product];
+