canape/src/public/js/app.js

115 lines
3.7 KiB
JavaScript

// Html page
import 'file-loader?name=[name].[ext]!../index.html'
// Import default image
import 'file-loader?name=img/[name].png!../img/noimage.png'
// Styles
import '../less/app.less'
// React
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 Alert from './components/alerts/alert'
import MovieList from './components/movies/list'
import ShowList from './components/shows/list'
import ShowDetails from './components/shows/details'
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}/>
<Alert {...this.props}/>
<div className="container-fluid">
{React.cloneElement(this.props.children, this.props)}
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
movieStore: state.movieStore,
showStore: state.showStore,
userStore: state.userStore,
alerts: state.alerts,
}
}
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 MovieListPolochon = (props) => (
<MovieList {...props} moviesUrl='/movies/polochon'/>
)
const MovieListWishlisted = (props) => (
<MovieList {...props} moviesUrl='/wishlist/movies'/>
)
const ShowListPolochon = (props) => (
<ShowList {...props} showsUrl='/shows/polochon'/>
)
const ShowListWishlisted = (props) => (
<ShowList {...props} showsUrl='/wishlist/shows'/>
)
ReactDOM.render((
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRedirect to="/movies/explore/yts/seeds" />
<Route path="/users/login" component={UserLoginForm} />
<Route path="/users/signup" component={UserSignUp} />
<Route path="/users/edit" component={UserIsAuthenticated(UserEdit)} />
<Route path="/movies/search/:search" component={UserIsAuthenticated(MovieList)} />
<Route path="/movies/polochon" component={UserIsAuthenticated(MovieListPolochon)} />
<Route path="/movies/explore/:source/:category" component={UserIsAuthenticated(MovieList)} />
<Route path="/movies/wishlist" component={UserIsAuthenticated(MovieListWishlisted)} />
<Route path="/shows/search/:search" component={UserIsAuthenticated(ShowList)} />
<Route path="/shows/polochon" component={UserIsAuthenticated(ShowListPolochon)} />
<Route path="/shows/wishlist" component={UserIsAuthenticated(ShowListWishlisted)} />
<Route path="/shows/details/:imdbId" component={UserIsAuthenticated(ShowDetails)} />
<Route path="/shows/explore/:source/:category" component={UserIsAuthenticated(ShowList)} />
</Route>
</Router>
</Provider>
),document.getElementById('app'));