app.js

/**
 *
 * app.js
 *
 * This is the entry file for the application, mostly just setup and boilerplate
 * code. Routes are configured at the end of this file!
 *
 */

// Load the ServiceWorker, the Cache polyfill, the manifest.json file and the .htaccess file
import 'file?name=[name].[ext]!../manifest.json';
import 'file?name=[name].[ext]!../.htaccess';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();


// Import all the third party stuff
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Route } from 'react-router';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import FontFaceObserver from 'fontfaceobserver';
import createHistory from 'history/lib/createHashHistory';
import Firebase from 'firebase';
export let firebaseRef = new Firebase("https://roast-potato.firebaseio.com/");
// Observer loading of Open Sans (to remove open sans, remove the <link> tag in the index.html file and this observer)
const openSansObserver = new FontFaceObserver('Open Sans', {});

// When Open Sans is loaded, add the js-open-sans-loaded class to the body
openSansObserver.check().then(() => {
  document.body.classList.add('js-open-sans-loaded');
}, () => {
  document.body.classList.remove('js-open-sans-loaded');
});

// Import the pages
import HomePage from './components/pages/HomePage.react';
import ReadmePage from './components/pages/ReadmePage.react';
import NotFoundPage from './components/pages/NotFound.react';
import LoginPage from './components/pages/LoginPage.react';
import RegisterPage from './components/pages/RegisterPage.react';
import ReleasePage from './components/pages/ReleasePage.react';
import SearchPage from './components/pages/SearchPage.react';
import ProfilePage from './components/pages/ProfilePage.react';
import MoviePage from './components/pages/MoviePage.react';
import CommentPage from './components/pages/CommentPage.react';
import RecPage from './components/pages/RecPage.react';
import App from './components/App.react';

// Import the CSS file, which HtmlWebpackPlugin transfers to the build folder
import '../css/main.css';

// Create the store with the redux-thunk middleware, which allows us
// to do asynchronous things in the actions
import rootReducer from './reducers/rootReducer';
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const store = createStoreWithMiddleware(rootReducer);



// Make reducers hot reloadable, see http://stackoverflow.com/questions/34243684/make-redux-reducers-and-other-non-components-hot-loadable
if (module.hot) {
  module.hot.accept('./reducers/rootReducer', () => {
    const nextRootReducer = require('./reducers/rootReducer').default;
    store.replaceReducer(nextRootReducer);
  });
}

export let browserHistory = createHistory();

export function navigateTo(url) {
  browserHistory.push(url);
};
// Mostly boilerplate, except for the Routes. These are the pages you can go to,
// which are all wrapped in the App component, which contains the navigation etc
ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory}>

      <Route component={App} >
        <Route path="/" component={HomePage} />
        <Route path="/login" component={LoginPage} />
        <Route path="/readme" component={ReadmePage} />
        <Route path="/search" component={SearchPage} />
        <Route path="/register" component={RegisterPage} />
        <Route path="/releases" component={ReleasePage} />
        <Route path="/recommendations" component={RecPage} />
        <Route path="/movie/:movieId/:movieTitle" component={MoviePage}/>
        <Route path="/profile" component={ProfilePage} />
        <Route path="/comment/:movieId/:movieTitle" component={CommentPage}/>
        <Route path="*" component={NotFoundPage} />
      </Route>
    </Router>
  </Provider>,
  document.getElementById('app')
);