/
app.js
111 lines (99 loc) · 3.79 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/**
*
* app.js
*
* This is the entry file for the application, mostly just setup and boilerplate
* code
*
*/
// Load the ServiceWorker, the Cache polyfill, the manifest.json file and the .htaccess file
import 'file?name=[name].[ext]!../serviceworker.js';
import 'file?name=[name].[ext]!../serviceworker-cache-polyfill.js';
import 'file?name=[name].[ext]!../manifest.json';
import 'file?name=[name].[ext]!../.htaccess';
import 'file?name=[name].[ext]!../favicon.ico';
import 'file?name=[name].[ext]!../favicon.png';
//Check for ServiceWorker support before trying to install it
if ('serviceWorker' in navigator) {
// Install ServiceWorker
navigator.serviceWorker.register('/serviceworker.js').then(() => {
}).catch((err) => {
// Installation failed
console.log('ServiceWorker registration failed, error:', err);
});
} else {
// No ServiceWorker Support
console.log('ServiceWorker is not supported in this browser');
}
// Import all the third party stuff
import React from 'react';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { homeReducer } from './reducers/reducers';
import FontFaceObserver from 'fontfaceobserver';
// When Open Sans is loaded, add the js-open-sans-loaded class to the body
// which swaps out the fonts
const openSansObserver = new FontFaceObserver('Open Sans');
openSansObserver.check().then(() => {
document.body.classList.add('js-open-sans-loaded');
}, (err) => {
document.body.classList.remove('js-open-sans-loaded');
});
// Import the components used as pages
import HomePage from './components/pages/HomePage.react';
import LoginPage from './components/pages/LoginPage.react';
import RegisterPage from './components/pages/RegisterPage.react';
import Dashboard from './components/pages/Dashboard.react';
import NotFound from './components/pages/NotFound.react';
import App from './components/App.react';
// Import the CSS file, which webpack transfers to the build folder
import '../css/main.css';
// Creates the Redux reducer with the redux-thunk middleware, which allows us
// to do asynchronous things in the actions
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const store = createStoreWithMiddleware(homeReducer);
function checkAuth(nextState, replaceState) {
let { loggedIn } = store.getState();
// check if the path isn't dashboard
// that way we can apply specific logic
// to display/render the path we want to
if (nextState.location.pathname !== '/dashboard') {
if (loggedIn) {
if (nextState.location.state && nextState.location.pathname) {
replaceState(null, nextState.location.pathname);
} else {
replaceState(null, '/');
}
}
} else {
// If the user is already logged in, forward them to the homepage
if (!loggedIn) {
if (nextState.location.state && nextState.location.pathname) {
replaceState(null, nextState.location.pathname);
} else {
replaceState(null, '/');
}
}
}
}
// 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 onEnter={checkAuth}>
<Route path="/login" component={LoginPage} />
<Route path="/register" component={RegisterPage} />
<Route path="/dashboard" component={Dashboard} />
</Route>
<Route path="*" component={NotFound} />
</Route>
</Router>
</Provider>,
document.getElementById('app')
);