Permalink
Browse files

Step 14: Refactor App into Home and set up react-router

  • Loading branch information...
samanthamichele7 committed Jun 1, 2017
1 parent 35501e1 commit 4484ab774784a77ac0108a358f67608ad360fb7c
@@ -7,6 +7,8 @@
"react-dom": "^15.5.4",
"react-modal": "^1.7.7",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.1",
"react-router-redux": "^5.0.0-alpha.6",
"redux": "^3.6.0",
"redux-promise": "^0.5.3",
"superagent": "^3.5.2"
@@ -0,0 +1,29 @@
import React from 'react';
import { ConnectedRouter } from 'react-router-redux';
import { Route } from 'react-router-dom';
import { history } from './../store/configureStore';

import Header from '../containers/Header';
import Home from '../containers/Home';
import Signup from '../containers/Signup';
import Login from '../containers/Login';
import Favorites from '../containers/Favorites';

export default class App extends React.Component {
render() {
return (
<ConnectedRouter history={history}>
<div>
<Header />

<div className="container">
<Route exact path="/" component={ Home }/>
<Route path="/signup" component={ Signup } />
<Route path="/login" component={ Login } />
<Route path="/favorites" component={ Favorites } />
</div>
</div>
</ConnectedRouter>
);
}
}
@@ -1,20 +1,21 @@
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

class Header extends React.Component {
render() {
return (
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<a href="/" className="navbar-brand">React2Gifs</a>
<Link className="navbar-brand" to="/">React2Gifs</Link>
</div>
<ul className="nav navbar-nav navbar-right">
<li className="nav-item">
<a className="nav-link" href="/login">Login</a>
<Link className="nav-link" to="/login">Login</Link>
</li>
<li className="nav-item">
<a className="nav-link" href="/signup">Sign Up</a>
<Link className="nav-link" to="/signup">Signup</Link>
</li>
</ul>
</div>
@@ -7,7 +7,7 @@ import GifModal from '../components/GifModal';
import SearchBar from '../components/SearchBar';
import '../styles/app.css';

class App extends React.Component {
class Home extends React.Component {
render() {
return (
<div>
@@ -35,4 +35,4 @@ function mapDispatchToProps(dispatch) {
};
}

export default connect(mapStateToProps, mapDispatchToProps)(App);
export default connect(mapStateToProps, mapDispatchToProps)(Home);
@@ -1,8 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
import App from './components/App';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import { configureStore } from './store/configureStore';

const store = configureStore();

@@ -1,10 +1,12 @@
import { combineReducers } from 'redux';
import GifsReducer from './gifs';
import ModalReducer from './modal';
import { routerReducer } from 'react-router-redux';

const rootReducer = combineReducers({
gifs: GifsReducer,
modal: ModalReducer
modal: ModalReducer,
router: routerReducer
});

export default rootReducer;
@@ -1,13 +1,17 @@
import { createStore, compose, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';
import rootReducer from '../reducers';
import createHistory from 'history/createBrowserHistory';
import { routerMiddleware } from 'react-router-redux';

export default function configureStore(initialState) {
export const history = createHistory();

export function configureStore(initialState) {
const store = createStore(
rootReducer,
initialState,
compose (
applyMiddleware(ReduxPromise),
applyMiddleware(ReduxPromise, routerMiddleware(history)),
window.devToolsExtension ? window.devToolsExtension() : f => f
)
);

0 comments on commit 4484ab7

Please sign in to comment.