switched to react-router@3.0.2

ashokdey · Jul 31, 2017 · e211ea6 · e211ea6
1 parent 927bfed
commit e211ea6
Show file tree

Hide file tree

Showing 10 changed files with 1,050 additions and 882 deletions.
diff --git a/package.json b/package.json
@@ -27,6 +27,6 @@
     "react-bootstrap": "^0.31.1",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.5",
-    "react-router-dom": "^4.1.2"
+    "react-router": "^3.0.2"
   }
 }
diff --git a/public/static/bundle.js b/public/static/bundle.js
diff --git a/public/static/style.css b/public/static/style.css
@@ -19,4 +19,5 @@ body {
 
 .footer {
     font-weight: bold;
+    margin-top: 130px;
 }
diff --git a/src/app.jsx b/src/app.jsx
@@ -15,11 +15,10 @@ import {postBook, deleteBook, updateBook} from 'bookActions';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {Provider} from 'react-redux';
-import {BrowserRouter as Router, Route, } from 'react-router-dom';
+import {Router, Route, IndexRoute, browserHistory} from 'react-router';
 
 // custom components
-import Navigation from 'Navigation';
-import Footer from 'Footer';
+import Main from 'Main';
 import About from 'About';
 import Contact from 'Contact';
 import BookList from 'BookList';
@@ -39,21 +38,18 @@ store.subscribe(() => {
 
 
 // REACT Rendering here
-
-ReactDOM.render(
+const Routes = (
     <Provider store={store}>
-        <div>
-            <Router>
-                <div>
-                    <Route path="/" component={Navigation}/>
-                    <Route exact path="/" component={BookList}/>                    
-                    <Route path="/about" component={About}/>
-                    <Route path="/contact" component={Contact}/>
-                    <Route path="/cart" component={Cart}/>
-                    <Route path="/admin" component={BookForm}/>
-                    <Route path="/" component={Footer}/>                    
-                </div>
-            </Router>
-        </div>
-    </Provider>, 
-document.getElementById('app'));
+        <Router history={browserHistory}>
+            <Route path="/" component={Main}>
+                <IndexRoute component={BookList} />
+                <Route path="/about" component={About} />
+                <Route path="/contact" component={Contact} />
+                <Route path="/admin" component={BookForm} />
+                <Route path="/cart" component={Cart} />
+            </Route>
+        </Router>
+    </Provider>
+);
+
+ReactDOM.render(Routes, document.getElementById('app'));
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 
 const Footer = () =>  (
-    <footer className="footer text-center" style={{marginTop: '50px'}}> 
+    <footer className="footer text-center"> 
         Copyrights &copy; {new Date().getFullYear() } || ReactUniversal ShoppingApp
     </footer>
 )

diff --git a/src/components/Main.jsx b/src/components/Main.jsx
@@ -0,0 +1,36 @@
+import React, {Component} from 'react';
+import Navigation from 'Navigation';
+import Footer from 'Footer';
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {getCart} from 'cartActions';
+
+
+
+class Main extends Component {
+    render() {
+        return(
+            <div>
+                <Navigation cartItems={this.props.totalQuantity} />
+                {this.props.children}
+                <Footer />
+            </div>
+        );
+    }
+}
+
+
+function mapStateToProps(state) {
+    return {
+        totalQuantity: state.cart.totalQuantity
+    }
+}
+
+function mapDispatchToProps(dispatch) {
+    return bindActionCreators({
+        getCart
+    }, dispatch);
+}
+
+export default connect(mapStateToProps)(Main);
diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
@@ -1,28 +1,36 @@
 import React, {Component} from 'react';
 import {Nav, NavItem, Navbar, Badge} from 'react-bootstrap';
 
-const Navigation = () => (
-    <Navbar inverse fixedTop>
-        <Navbar.Header>
-        <Navbar.Brand>
-            <a href="/">ReactUniversalShopping</a>
-        </Navbar.Brand>
-        <Navbar.Toggle />
-        </Navbar.Header>
-        <Navbar.Collapse>
-        <Nav>
-            <NavItem eventKey={1} href="/about">About</NavItem>
-            <NavItem eventKey={2} href="/contact">Contact</NavItem>
-        </Nav>
-        <Nav pullRight>
-            <NavItem eventKey={1} href="/admin">Admin</NavItem>
-            <NavItem eventKey={2} href="cart">
-                Your Cart <Badge className="badge">4</Badge>
-            </NavItem>
-        </Nav>
-        </Navbar.Collapse>
-    </Navbar>
-);
+
+
+class Navigation extends Component {
+
+    render(){
+        return (
+            <Navbar inverse fixedTop>
+                <Navbar.Header>
+                <Navbar.Brand>
+                    <a href="/">ReactUniversalShoppingApp</a>
+                </Navbar.Brand>
+                <Navbar.Toggle />
+                </Navbar.Header>
+                <Navbar.Collapse>
+                <Nav>
+                    <NavItem eventKey={1} href="/about">About</NavItem>
+                    <NavItem eventKey={2} href="/contact">Contact</NavItem>
+                </Nav>
+                <Nav pullRight>
+                    <NavItem eventKey={1} href="/admin">Admin</NavItem>
+                    <NavItem eventKey={2} href="/cart">
+                        Your Cart <Badge className="badge">{this.props.cartItems}</Badge>
+                    </NavItem>
+                </Nav>
+                </Navbar.Collapse>
+            </Navbar>
+        );
+    }
+} 
+
 
 
 export default Navigation;
diff --git a/src/components/pages/BookForm.jsx b/src/components/pages/BookForm.jsx
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Well, Panel, FormControl, FormGroup, ControlLabel, Button} from 'react-bootstrap';
+import {Well, Panel, FormControl, FormGroup, ControlLabel, Button, Row, Col} from 'react-bootstrap';
 // to get input from react-bootstrap we need to import findDOMNode from react-dom
 import {findDOMNode} from 'react-dom';
 import {connect} from 'react-redux';
@@ -32,46 +32,49 @@ class BookForm extends Component {
         ));
 
         return (
-            <Well>
-                <Panel>
-                    <FormGroup controlId="title">
-                        <ControlLabel>Title</ControlLabel>
-                        <FormControl
-                            type="text"
-                            placeholder="Enter Title"
-                            ref="title"
-                        />
-                    </FormGroup>
-                    <FormGroup controlId="description">
-                        <ControlLabel>Description</ControlLabel>
-                        <FormControl
-                            type="text"
-                            placeholder="Enter Description"
-                            ref="description"
-                        />
-                    </FormGroup>
-                    <FormGroup controlId="price">
-                        <ControlLabel>Price</ControlLabel>
-                        <FormControl
-                            type="text"
-                            placeholder="Enter Price"
-                            ref="price"
-                        />
-                    </FormGroup>
-                    <Button onClick={this._handleSubmit.bind(this)} bsStyle="primary">Add Book</Button>
-                </Panel>
-
-                <Panel style={{marginTop: '25px'}}>
-                    <FormGroup controlId="formControlSelect">
-                        <ControlLabel>Select a book title to delete</ControlLabel>
-                        <FormControl ref="deleteTitle" componentClass="select" placeholder="Select"> 
-                            <option value="Select">Select</option>
-                            {bookList}
-                        </FormControl>
-                    </FormGroup>
-                    <Button onClick={this._deleteBook.bind(this)} bsStyle="danger">Delete Book</Button>
-                </Panel>
-            </Well>
+            <Row style={{marginTop: '85px'}}>
+                <Col xs={12} sm={6} mdOffset={3} smOffset={3}>
+                    <Well>
+                        <Panel>
+                            <FormGroup controlId="title">
+                                <ControlLabel>Title</ControlLabel>
+                                <FormControl
+                                    type="text"
+                                    placeholder="Enter Title"
+                                    ref="title"
+                                />
+                            </FormGroup>
+                            <FormGroup controlId="description">
+                                <ControlLabel>Description</ControlLabel>
+                                <FormControl
+                                    type="text"
+                                    placeholder="Enter Description"
+                                    ref="description"
+                                />
+                            </FormGroup>
+                            <FormGroup controlId="price">
+                                <ControlLabel>Price</ControlLabel>
+                                <FormControl
+                                    type="text"
+                                    placeholder="Enter Price"
+                                    ref="price"
+                                />
+                            </FormGroup>
+                            <Button onClick={this._handleSubmit.bind(this)} bsStyle="primary">Add Book</Button>
+                        </Panel>
+                        <Panel style={{marginTop: '25px'}}>
+                            <FormGroup controlId="formControlSelect">
+                                <ControlLabel>Select a book title to delete</ControlLabel>
+                                <FormControl ref="deleteTitle" componentClass="select" placeholder="Select"> 
+                                    <option value="Select">Select</option>
+                                    {bookList}
+                                </FormControl>
+                            </FormGroup>
+                            <Button onClick={this._deleteBook.bind(this)} bsStyle="danger">Delete Book</Button>
+                        </Panel>
+                    </Well>
+                </Col>
+            </Row>
         );
     }
 }

diff --git a/src/components/pages/BookList.jsx b/src/components/pages/BookList.jsx
@@ -34,12 +34,8 @@ class BookList extends Component {
         return (
             <Grid>
                 <Row style={{marginTop: '15px'}}>
-                    <Cart/>
                 </Row>
-                <Row style={{marginTop: '15px'}}>
-                    <Col xs={12} sm={6}>
-                        <BookForm/>
-                    </Col>            
+                <Row style={{marginTop: '15px'}}>           
                     {bookList}
                 </Row>
             </Grid>

diff --git a/webpack.config.js b/webpack.config.js
@@ -27,6 +27,7 @@ module.exports = {
             cartActions: path.resolve(__dirname, 'src/actions/cartActions.js'),            
 
             // Components here          
+            Main: path.resolve(__dirname, 'src/components/Main.jsx'),            
             Book: path.resolve(__dirname, 'src/components/pages/Book.jsx'),
             BookForm: path.resolve(__dirname, 'src/components/pages/BookForm.jsx'),
             BookList: path.resolve(__dirname, 'src/components/pages/BookList.jsx'),