Puzinok · Puzinok · Dec 24, 2018 · Dec 24, 2018
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
-  <title>First App</title>
+  <title>Brew shop</title>
 </head>
 <body>
   <div id="root"></div>

diff --git 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) => (
+  <Route {...route} />
+);
+
+const App = () => (
+  <Router>
+    <Fragment>
+      <Container>
+        <CartContainer>
+          <Header />
+          <Switch> 
+            { routes.map((route) => RoutesWithSubroutes(route)) }
+          </Switch> 
+        </CartContainer>
+      </Container>
+      <Footer />
+    </Fragment> 
+  </Router>
+);
 
 ReactDOM.render(
-  <Catalog />, 
+  <App />,
   document.getElementById('root')
 );
diff --git a/package-lock.json b/package-lock.json
diff --git 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
diff --git a/...components/views/ProductCard/CardInput.js → ...ts/views/Catalog/ProductCard/CardInput.js b/...components/views/ProductCard/CardInput.js → ...ts/views/Catalog/ProductCard/CardInput.js
diff --git a/src/components/views/ProductCard/Image.js → ...onents/views/Catalog/ProductCard/Image.js b/src/components/views/ProductCard/Image.js → ...onents/views/Catalog/ProductCard/Image.js
diff --git a/src/components/views/ProductCard/Price.js → ...onents/views/Catalog/ProductCard/Price.js b/src/components/views/ProductCard/Price.js → ...onents/views/Catalog/ProductCard/Price.js
diff --git a/src/components/views/ProductCard/index.js → ...onents/views/Catalog/ProductCard/index.js b/src/components/views/ProductCard/index.js → ...onents/views/Catalog/ProductCard/index.js
diff --git 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 (
-      <CartContainer>
-        <Container>
-          <Row>
-            <Col>
-              <Header />
-            </Col>
-          </Row>
-          <Row className='mt-3'>
-            <ProductsCatalog products={products}/>
-          </Row>
-          <Row>
-            <Col>
-              <footer className='footer mt-3'>
-                <p>Pavel Puzin, Thinknetika React 2018</p>
-              </footer>
-            </Col>
-          </Row>
-        </Container>
-      </CartContainer>
+      <Row className='mt-3'>
+        <ProductsCatalog products={products}/>
+      </Row>
     );
   }
 }

diff --git a/src/components/views/shared/Footer/index.js b/src/components/views/shared/Footer/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Container } from 'reactstrap';
+
+const Footer = () => {
+  return (
+    <footer className='footer'>
+      <Container>
+        <span>Pavel Puzin Thinknetika React 2018</span>
+      </Container>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/...nts/views/Catalog/Header/Cart/CartIcon.js → ...ents/views/shared/Header/Cart/CartIcon.js b/...nts/views/Catalog/Header/Cart/CartIcon.js → ...ents/views/shared/Header/Cart/CartIcon.js
diff --git a/...nts/views/Catalog/Header/Cart/CartItem.js → ...ents/views/shared/Header/Cart/CartItem.js b/...nts/views/Catalog/Header/Cart/CartItem.js → ...ents/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/...onents/views/Catalog/Header/Cart/index.js → ...ponents/views/shared/Header/Cart/index.js b/...onents/views/Catalog/Header/Cart/index.js → ...ponents/views/shared/Header/Cart/index.js
diff --git a/src/components/views/shared/Header/index.js 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 (
+      <Navbar color="light" light expand="sm">
+        <NavbarBrand href="/">Brewers shop 🍺</NavbarBrand>
+        <Collapse navbar>
+          <Nav className="ml-auto" navbar>
+            <NavItem>
+              <NavLink exact to={mainPath() }
+                activeClassName="active"  
+                tag={RRNavLink}>Главная</NavLink>
+            </NavItem>
+            <NavItem>
+              <NavLink exact to={catalogPath()}
+                activeClassName="active"  
+                tag={RRNavLink}>Каталог</NavLink>
+            </NavItem>
+            <NavItem>
+              <NavLink exact to={aboutPath()}
+                activeClassName="active"  
+                tag={RRNavLink}>Контакты</NavLink>
+            </NavItem>
+            <Cart />
+          </Nav>
+        </Collapse>
+      </Navbar>
+    );
+  }
+}
+
+export default Header;
+
diff --git a/src/containers/CartContainer.js b/src/containers/CartContainer.js
@@ -32,7 +32,7 @@ class CartContainer extends Component {
   render() {
     return (
       <CartContext.Provider value={{
-        addToCart: (product, quantity) => 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
@@ -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
@@ -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 → src/helpers/AddDescription.js b/src/components/helpers/AddDescription.js → src/helpers/AddDescription.js
diff --git a/src/helpers/routes.js 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';