91 lines
2.7 KiB
JavaScript
91 lines
2.7 KiB
JavaScript
import 'babel-polyfill'
|
|
import React from 'react'
|
|
import ReactDOM from 'react-dom'
|
|
import { bindActionCreators } from 'redux'
|
|
import { Provider, connect } from 'react-redux'
|
|
import { Router, Route, IndexRoute, IndexRedirect, Link, hashHistory } from 'react-router'
|
|
import { routerActions } from 'react-router-redux'
|
|
import { UserAuthWrapper } from 'redux-auth-wrapper'
|
|
|
|
// Root reducer
|
|
import rootReducer from './reducers/index'
|
|
|
|
// Action creators
|
|
import * as actionCreators from './actions/actionCreators'
|
|
|
|
// Store
|
|
import store, { history } from './store'
|
|
|
|
// Components
|
|
import NavBar from './components/navbar'
|
|
import Error from './components/errors'
|
|
import MovieList from './components/movies/list'
|
|
import UserLoginForm from './components/users/login'
|
|
import UserEdit from './components/users/edit'
|
|
import UserSignUp from './components/users/signup'
|
|
|
|
class Main extends React.Component {
|
|
componentWillMount() {
|
|
this.props.isUserLoggedIn()
|
|
}
|
|
render() {
|
|
return (
|
|
<div>
|
|
<NavBar {...this.props}/>
|
|
<Error {...this.props}/>
|
|
<div className="container-fluid">
|
|
<div className="container">
|
|
{React.cloneElement(this.props.children, this.props)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
movieStore: state.movieStore,
|
|
userStore: state.userStore,
|
|
errors: state.errors,
|
|
}
|
|
}
|
|
|
|
function mapDispatchToProps(dispatch) {
|
|
return bindActionCreators(actionCreators, dispatch);
|
|
}
|
|
|
|
const App = connect(mapStateToProps, mapDispatchToProps)(Main);
|
|
|
|
// Redirects to /login by default
|
|
const UserIsAuthenticated = UserAuthWrapper({
|
|
authSelector: state => state.userStore,
|
|
redirectAction: routerActions.replace,
|
|
wrapperDisplayName: 'UserIsAuthenticated',
|
|
predicate: user => user.isLogged,
|
|
failureRedirectPath: '/users/login',
|
|
})
|
|
|
|
// TODO find a better way
|
|
const MovieListPopular = (props) => (
|
|
<MovieList {...props} moviesUrl='/movies/explore/popular'/>
|
|
)
|
|
const MovieListPolochon = (props) => (
|
|
<MovieList {...props} moviesUrl='/movies/polochon'/>
|
|
)
|
|
|
|
ReactDOM.render((
|
|
<Provider store={store}>
|
|
<Router history={history}>
|
|
<Route path="/" component={App}>
|
|
<IndexRedirect to="/movies/polochon" />
|
|
<Route path="/users/login" component={UserLoginForm} />
|
|
<Route path="/users/signup" component={UserSignUp} />
|
|
<Route path="/users/edit" component={UserIsAuthenticated(UserEdit)} />
|
|
<Route path="/movies/popular" component={UserIsAuthenticated(MovieListPopular)} />
|
|
<Route path="/movies/polochon(/:page)" component={UserIsAuthenticated(MovieListPolochon)} />
|
|
</Route>
|
|
</Router>
|
|
</Provider>
|
|
),document.getElementById('app'));
|