canape/src/public/js/app.js

// Html page
import 'file-loader?name=[name].[ext]!../index.html'

// Import default image
import 'file-loader?name=img/[name].png!../img/noimage.png'

// Import favicon settings
import 'file-loader?name=[name].png!../img/android-chrome-192x192.png'
import 'file-loader?name=[name].png!../img/android-chrome-512x512.png'
import 'file-loader?name=[name].png!../img/apple-touch-icon.png'
import 'file-loader?name=[name].png!../img/favicon-16x16.png'
import 'file-loader?name=[name].png!../img/favicon-32x32.png'
import 'file-loader?name=[name].png!../img/favicon.ico'
import 'file-loader?name=[name].png!../img/manifest.json'
import 'file-loader?name=[name].png!../img/safari-pinned-tab.svg'

// 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 } from 'react-router'
import { routerActions } from 'react-router-redux'

// 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'
import TorrentList from './components/torrents/list'

function Main(props) {
  return (
    <div>
      <NavBar {...props}/>
      <Alert {...props}/>
      <div className="container-fluid">
        {React.cloneElement(props.children, props)}
      </div>
    </div>
  );
}

function mapStateToProps(state) {
  return {
    movieStore: state.movieStore,
    showStore: state.showStore,
    userStore: state.userStore,
    torrentStore: state.torrentStore,
    alerts: state.alerts,
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch);
}

const App = connect(mapStateToProps, mapDispatchToProps)(Main);
export function startPollingTorrents() {
  return request(
    'TORRENTS_FETCH',
    configureAxios().get('/torrents')
  )
}

var pollingTorrentsId;
const loginCheck = function(nextState, replace, next, f) {
  const state = store.getState();
  const isLogged = state.userStore.isLogged;
  let token = localStorage.getItem('token');

  // Let's check if the user has a token, if he does let's assume he's logged
  // in. If that's not the case he will be logged out on the fisrt query
  if (token !== "") {
    store.dispatch({
      type: 'USER_SET_TOKEN',
      payload: {
        token: token,
      },
    });
  }

  if (!isLogged && token === "") {
      replace('/users/login');
  } else {
    f();
    // Poll torrents once logged
    if (!pollingTorrentsId) {
      // Fetch the torrents every 10s
      pollingTorrentsId = setInterval(function() {
        store.dispatch(actionCreators.fetchTorrents());
      }, 10000);
    }
  }

  next();
}

const routes = {
  path: '/',
  component: App,
  indexRoute: {onEnter: ({params}, replace) => replace('/movies/explore/yts/seeds')},
  childRoutes: [
    { path: '/users/login'                      , component: UserLoginForm                            },
    { path: '/users/signup'                     , component: UserSignUp                               },
    { path: '/users/edit'                       , component: UserEdit                                 },
    { path: '/users/signup'                     , component: UserSignUp                               },
    {
      path: '/users/logout',
      onEnter: function(nextState, replace, next) {
        store.dispatch(actionCreators.userLogout());
        replace('/users/login');
        next();
      },
    },
    {
      path: '/movies/search/:search',
      component: MovieList,
      onEnter: function(nextState, replace, next) {
        loginCheck(nextState, replace, next, function() {
          store.dispatch(actionCreators.fetchMovies(`/movies/search/${nextState.params.search}`));
        });
      },
    },
    {
      path: '/movies/polochon',
      component: MovieList,
      onEnter: function(nextState, replace, next) {
        loginCheck(nextState, replace, next, function() {
          store.dispatch(actionCreators.fetchMovies('/movies/polochon'));
        });
      },
    },
    {
      path: '/movies/explore/:source/:category',
      component: MovieList,
      onEnter: function(nextState, replace, next) {
        loginCheck(nextState, replace, next, function() {
          var state = store.getState();
          // Fetch the explore options
          if (Object.keys(state.movieStore.exploreOptions).length === 0) {
            store.dispatch(actionCreators.getMovieExploreOptions());
          }
          store.dispatch(actionCreators.fetchMovies(
            `/movies/explore?source=${encodeURI(nextState.params.source)}&category=${encodeURI(nextState.params.category)}`
          ));
        });
      },
    },
    {
      path: '/movies/wishlist',
      component: MovieList,
      onEnter: function(nextState, replace, next) {
        loginCheck(nextState, replace, next, function() {
        store.dispatch(actionCreators.fetchMovies('/wishlist/movies'));
        });
      },
    },
    {
      path: '/shows/search/:search',
      component: ShowList,
      onEnter: function(nextState, replace, next) {
        loginCheck(nextState, replace, next, function() {
          store.dispatch(actionCreators.fetchShows(`/shows/search/${nextState.params.search}`));
        });
      },
    },
    {
      path: '/shows/polochon',
      component: ShowList,
      onEnter: function(nextState, replace, next) {
        loginCheck(nextState, replace, next, function() {
          store.dispatch(actionCreators.fetchShows('/shows/polochon'));
        });
      },
    },
    {
      path: '/shows/wishlist',
      component: ShowList,
      onEnter: function(nextState, replace, next) {
        loginCheck(nextState, replace, next, function() {
          store.dispatch(actionCreators.fetchShows('/wishlist/shows'));
        });
      },
    },
    {
      path: '/shows/details/:imdbId',
      component: ShowDetails,
      onEnter: function(nextState, replace, next) {
        loginCheck(nextState, replace, next, function() {
          store.dispatch(actionCreators.fetchShows(`/shows/search/${nextState.params.imdbId}`));
        });
      },
    },
    {
      path: '/shows/explore/:source/:category',
      component: ShowList,
      onEnter: function(nextState, replace, next) {
        loginCheck(nextState, replace, next, function() {
          var state = store.getState();
          // Fetch the explore options
          if (Object.keys(state.showStore.exploreOptions).length === 0) {
            store.dispatch(actionCreators.getShowExploreOptions());
          }
          store.dispatch(actionCreators.fetchShows(
            `/shows/explore?source=${encodeURI(nextState.params.source)}&category=${encodeURI(nextState.params.category)}`
          ));
        });
      },
    },
    {
      path: '/torrents',
      component: TorrentList,
      onEnter: function(nextState, replace, next) {
        loginCheck(nextState, replace, next, function() {
          store.dispatch(actionCreators.fetchTorrents());
        });
      },
    },
  ],
}

ReactDOM.render((
  <Provider store={store}>
    <Router history={history} routes={routes} />
  </Provider>
),document.getElementById('app'));