Rewritten most of the frontend to use Redux.

Also, lots of code cleanup, especially in frontend.

.gitignore

@@ -11,4 +11,4 @@ build/
 dist/
 q3stats.egg-info/
 
-tests_web_app/tmp/
+tests_web_app/tmp/tmp*

frontend/src/AppWindow.js

@@ -24,16 +24,22 @@ import React from "react";
 import ReactDOM from "react-dom";
 
 import DashboardView from "./views/DashboardView";
+import DataSource from "./lib/DataSource";
 import NavigationBarView from "./views/NavigationBarView";
 
 class AppWindow extends React.Component {
+  componentWillMount () {
+    DataSource.setRouter(this.props.router);
+  }
   render () {
     return (
       <div className="q3stats-app-window">
-        <NavigationBarView router={this.props.router} />
+        <NavigationBarView
+          location={this.props.location}
+          router={this.props.router} />
 
         <div className="q3stats-content-view">
-          {this.props.children || <DashboardView router={this.props.router} />}
+          {this.props.children || <DashboardView />}
         </div>
 
         <div className="q3stats-footer">
@@ -49,8 +55,4 @@ class AppWindow extends React.Component {
   }
 }
 
-AppWindow.propTypes = {
-  errorCode: React.PropTypes.string
-};
-
 export default AppWindow;

frontend/src/actions/dashboard.js

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import {DASHBOARD_ACTIONS} from "../lib/defs";
+
+import DataSource from "../lib/DataSource";
+
+export const cleanup = () => {
+  return {
+    type: DASHBOARD_ACTIONS.CLEANUP
+  };
+};
+
+export const loadData = (dispatch) => {
+  DataSource.loadDashboardData().then((data) => {
+    dispatch(parseData(dispatch, data));
+  });
+
+  return {
+    type: DASHBOARD_ACTIONS.LOAD_DATA
+  };
+};
+
+export const parseData = (dispatch, data) => {
+  if (data.day) {
+    dispatch(loadChartData(dispatch, data.day));
+  }
+
+  return {
+    type: DASHBOARD_ACTIONS.PARSE_DATA,
+    data: data
+  };
+};
+
+export const loadChartData = (dispatch, day) => {
+  DataSource.loadDayChartData(day).then((data) => {
+    dispatch(parseChartData(data));
+  });
+
+  return {
+    type: DASHBOARD_ACTIONS.LOAD_CHART_DATA
+  };
+};
+
+export const parseChartData = (data) => {
+  return {
+    type: DASHBOARD_ACTIONS.PARSE_CHART_DATA,
+    categories: data.maps,
+    series: data.scores
+  };
+};

frontend/src/actions/navigationBar.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import {NAVIGATION_BAR_ACTIONS} from "../lib/defs";
+
+import DataSource from "../lib/DataSource";
+
+export const cleanup = () => {
+  return {
+    type: NAVIGATION_BAR_ACTIONS.CLEANUP
+  };
+};
+
+export const expand = () => {
+  return {
+    type: NAVIGATION_BAR_ACTIONS.EXPAND
+  };
+};
+
+export const collapse = () => {
+  return {
+    type: NAVIGATION_BAR_ACTIONS.COLLAPSE
+  };
+};
+
+export const showAboutModal = () => {
+  return {
+    type: NAVIGATION_BAR_ACTIONS.SHOW_ABOUT_MODAL
+  };
+};
+
+export const hideAboutModal = () => {
+  return {
+    type: NAVIGATION_BAR_ACTIONS.HIDE_ABOUT_MODAL
+  };
+};
+
+export const showSettingsModal = () => {
+  return {
+    type: NAVIGATION_BAR_ACTIONS.SHOW_SETTINGS_MODAL
+  };
+};
+
+export const hideSettingsModal = () => {
+  return {
+    type: NAVIGATION_BAR_ACTIONS.HIDE_SETTINGS_MODAL
+  };
+};

frontend/src/actions/playerGame.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import {PLAYER_GAME_ACTIONS} from "../lib/defs";
+
+import DataSource from "../lib/DataSource";
+
+export const cleanup = () => {
+  return {
+    type: PLAYER_GAME_ACTIONS.CLEANUP
+  };
+};
+
+export const loadData = (dispatch, player, game) => {
+  DataSource.loadPlayerGameData(player, game).then((data) => {
+    dispatch(parseData(dispatch, data));
+  });
+
+  return {
+    type: PLAYER_GAME_ACTIONS.LOAD_DATA
+  };
+};
+
+export const parseData = (dispatch, data) => {
+  dispatch(loadChartsData(dispatch, data.player, data.game));
+
+  return {
+    type: PLAYER_GAME_ACTIONS.PARSE_DATA,
+    data: data
+  };
+};
+
+export const loadChartsData = (dispatch, player, game) => {
+  DataSource.loadPlayerGameChartsData(player, game).then((data) => {
+    dispatch(parseChartsData(data));
+  });
+
+  return {
+    type: PLAYER_GAME_ACTIONS.LOAD_CHARTS_DATA
+  };
+};
+
+export const parseChartsData = (data) => {
+  return {
+    type: PLAYER_GAME_ACTIONS.PARSE_CHARTS_DATA,
+    data: data
+  };
+};

frontend/src/actions/playerStats.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import {PLAYER_STATS_ACTIONS} from "../lib/defs";
+
+import DataSource from "../lib/DataSource";
+
+export const cleanup = () => {
+  return {
+    type: PLAYER_STATS_ACTIONS.CLEANUP
+  };
+};
+
+export const setMode = (mode) => {
+  return {
+    type: PLAYER_STATS_ACTIONS.SET_MODE,
+    mode: mode
+  };
+};
+
+export const loadChartData = (dispatch, player, kind, mode) => {
+  DataSource.loadPlayerStatsChartData(player, kind, mode).then((data) => {
+    dispatch(parseChartData(data, player, kind, mode));
+  });
+
+  return {
+    type: PLAYER_STATS_ACTIONS.LOAD_CHART_DATA
+  };
+};
+
+export const parseChartData = (data, player, kind, mode) => {
+  return {
+    type: PLAYER_STATS_ACTIONS.PARSE_CHART_DATA,
+    kind: kind,
+    mode: mode,
+    data: data
+  };
+};

frontend/src/actions/players.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import {PLAYERS_ACTIONS} from "../lib/defs";
+
+import DataSource from "../lib/DataSource";
+
+export const cleanup = () => {
+  return {
+    type: PLAYERS_ACTIONS.CLEANUP
+  };
+};
+
+export const loadData = (dispatch) => {
+  DataSource.loadPlayersData().then((data) => {
+    dispatch(parseData(dispatch, data));
+  });
+
+  return {
+    type: PLAYERS_ACTIONS.LOAD_DATA
+  };
+};
+
+export const parseData = (dispatch, data) => {
+  return {
+    type: PLAYERS_ACTIONS.PARSE_DATA,
+    data: data
+  };
+};

frontend/src/actions/sessions.js

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import {SESSIONS_ACTIONS} from "../lib/defs";
+
+import DataSource from "../lib/DataSource";
+
+export const cleanup = () => {
+  return {
+    type: SESSIONS_ACTIONS.CLEANUP
+  };
+};
+
+export const setDay = (dispatch, day) => {
+  let actualDay = day || "";
+
+  dispatch(loadData(dispatch, actualDay));
+
+  return {
+    type: SESSIONS_ACTIONS.SET_DAY,
+    day: actualDay
+  };
+};
+
+export const loadData = (dispatch, day) => {
+  DataSource.loadSessionData(day).then((data) => {
+    dispatch(parseData(dispatch, data));
+  });
+
+  return {
+    type: SESSIONS_ACTIONS.LOAD_DATA
+  };
+};
+
+export const parseData = (dispatch, data) => {
+  if (data.day) {
+    dispatch(loadChartData(dispatch, data.day));
+  }
+
+  return {
+    type: SESSIONS_ACTIONS.PARSE_DATA,
+    data: data
+  };
+};
+
+export const loadChartData = (dispatch, day) => {
+  DataSource.loadDayChartData(day).then((data) => {
+    dispatch(parseChartData(data));
+  });
+
+  return {
+    type: SESSIONS_ACTIONS.LOAD_CHART_DATA
+  };
+};
+
+export const parseChartData = (data) => {
+  return {
+    type: SESSIONS_ACTIONS.PARSE_CHART_DATA,
+    categories: data.maps,
+    series: data.scores
+  };
+};

frontend/src/actions/settings.js

@@ -20,11 +20,17 @@
  * IN THE SOFTWARE.
  */
 
-import {ACTION_SETTINGS_SET_LAYOUT} from "../lib/defs";
+import {SETTINGS_ACTIONS, SETTINGS_KEYS} from "../lib/defs";
 
 export const setLayout = (newLayout) => {
+  try {
+    window.localStorage.setItem(SETTINGS_KEYS.LAYOUT, newLayout);
+  } catch (error) {
+    // pass
+  }
+
   return {
-    type: ACTION_SETTINGS_SET_LAYOUT,
+    type: SETTINGS_ACTIONS.SET_LAYOUT,
     layout: newLayout
   };
 };

frontend/src/components/ChartComponent.js

@@ -27,7 +27,7 @@ import ReactDOM from "react-dom";
 import {connect} from "react-redux";
 import underscore from "underscore";
 
-class ChartComponent extends React.Component {
+class ChartComponent extends React.PureComponent {
   constructor (props) {
     super(props);
 

frontend/src/components/ContainerComponent.js

@@ -29,7 +29,7 @@ const LAYOUT_TO_CLASSNAME = {};
 LAYOUT_TO_CLASSNAME[LAYOUT_WIDE] = "container-fluid";
 LAYOUT_TO_CLASSNAME[LAYOUT_NARROW] = "container";
 
-class ContainerComponent extends React.Component {
+class ContainerComponent extends React.PureComponent {
   render () {
     let className = LAYOUT_TO_CLASSNAME[this.props.layout];
     if (!className) {

frontend/src/components/ItemIconComponent.js

@@ -24,7 +24,7 @@ import React from "react";
 
 import {ITEM_NAMES} from "../lib/defs";
 
-class ItemIconComponent extends React.Component {
+class ItemIconComponent extends React.PureComponent {
   render () {
     let itemName = ITEM_NAMES[this.props.item] || "?";
 

frontend/src/components/LoaderComponent.js

@@ -23,7 +23,7 @@
 import ClassName from "classnames";
 import React from "react";
 
-class LoaderComponent extends React.Component {
+class LoaderComponent extends React.PureComponent {
   render () {
     let className = ClassName("q3stats-loader", {
       "visible": this.props.visible

frontend/src/components/PowerupIconComponent.js

@@ -24,7 +24,7 @@ import React from "react";
 
 import {POWERUP_NAMES} from "../lib/defs";
 
-class PowerupIconComponent extends React.Component {
+class PowerupIconComponent extends React.PureComponent {
   render () {
     let powerupName = POWERUP_NAMES[this.props.powerup] || "?";
 

frontend/src/components/WeaponIconComponent.js

@@ -24,7 +24,7 @@ import React from "react";
 
 import {WEAPON_NAMES} from "../lib/defs";
 
-class WeaponIconComponent extends React.Component {
+class WeaponIconComponent extends React.PureComponent {
   render () {
     let weaponName = WEAPON_NAMES[this.props.weapon] || "?";
 

frontend/src/lib/DataSource.js

@@ -0,0 +1,64 @@
+import underscore from "underscore";
+import "whatwg-fetch";
+
+const DEFAULT_INIT = {
+  credentials: "include"
+};
+
+class DataSource {
+  constructor () {
+    this._router = null;
+  }
+  setRouter (router) {
+    this._router = router;
+  }
+  _fetch (requestOrURL, init) {
+    init = init || {};
+
+    let actualInit = underscore.extendOwn(
+      underscore.clone(DEFAULT_INIT), init
+    );
+
+    return window.fetch(requestOrURL, actualInit).catch((error) => {
+      this._router.push("/error/");
+      throw new Error("FetchError: Unable to fetch");
+    }).then((response) => {
+      if (!response.ok) {
+        let statusCode = response.status || "";
+
+        this._router.push("/error/" + statusCode);
+        throw new Error(
+          "FetchError: '" + statusCode + "'" + " '" + response.statusText + "'"
+        );
+      } else {
+        return response.json();
+      }
+    });
+  }
+  loadDashboardData () {
+    return this._fetch("/api/v1/dashboard");
+  }
+  loadDayChartData (day) {
+    return this._fetch("/api/v1/charts/day/" + day);
+  }
+  loadSessionData (day) {
+    return this._fetch("/api/v1/sessions/" + day);
+  }
+  loadPlayerGameData (player, game) {
+    return this._fetch("/api/v1/players/" + player + "/game/" + game);
+  }
+  loadPlayerGameChartsData (player, game) {
+    return this._fetch("/api/v1/charts/player/" + player + "/game/" + game);
+  }
+  loadPlayersData () {
+    return this._fetch("/api/v1/players");
+  }
+  loadPlayerStatsChartData (player, kind, mode) {
+    return this._fetch(
+      "/api/v1/charts/player/" + player + "/" + kind + "/" + mode
+    );
+  }
+}
+
+let sharedDataSource = new DataSource();
+export default sharedDataSource;

frontend/src/lib/defs.js

@@ -30,9 +30,61 @@ export const LAYOUT_CHOICES = [
   [LAYOUT_NARROW, "Narrow"]
 ];
 
-export const SETTINGS_KEY_LAYOUT = "layout";
+export const SETTINGS_KEYS = {
+  LAYOUT: "layout"
+};
 
-export const ACTION_SETTINGS_SET_LAYOUT = "ACTION_SETTINGS_SET_LAYOUT";
+export const DASHBOARD_ACTIONS = {
+  CLEANUP: "ACTION_DASHBOARD_CLEANUP",
+  LOAD_CHART_DATA: "ACTION_DASHBOARD_LOAD_CHART_DATA",
+  LOAD_DATA: "ACTION_DASHBOARD_LOAD_DATA",
+  PARSE_CHART_DATA: "ACTION_DASHBOARD_PARSE_CHART_DATA",
+  PARSE_DATA: "ACTION_DASHBOARD_PARSE_DATA"
+};
+
+export const NAVIGATION_BAR_ACTIONS = {
+  CLEANUP: "ACTION_NAVIGATION_BAR_CLEANUP",
+  EXPAND: "ACTION_NAVIGATION_BAR_EXPAND",
+  COLLAPSE: "ACTION_NAVIGATION_BAR_COLLAPSE",
+  SHOW_ABOUT_MODAL: "ACTION_NAVIGATION_BAR_SHOW_ABOUT_MODAL",
+  HIDE_ABOUT_MODAL: "ACTION_NAVIGATION_BAR_HIDE_ABOUT_MODAL",
+  SHOW_SETTINGS_MODAL: "ACTION_NAVIGATION_BAR_SHOW_SETTINGS_MODAL",
+  HIDE_SETTINGS_MODAL: "ACTION_NAVIGATION_BAR_HIDE_SETTINGS_MODAL"
+};
+
+export const PLAYER_GAME_ACTIONS = {
+  CLEANUP: "ACTION_PLAYER_GAME_CLEANUP",
+  LOAD_CHARTS_DATA: "ACTION_PLAYER_GAME_LOAD_CHARTS_DATA",
+  LOAD_DATA: "ACTION_PLAYER_GAME_LOAD_DATA",
+  PARSE_CHARTS_DATA: "ACTION_PLAYER_GAME_PARSE_CHARTS",
+  PARSE_DATA: "ACTION_PLAYER_GAME_PARSE_DATA"
+};
+
+export const PLAYER_STATS_ACTIONS = {
+  CLEANUP: "ACTION_PLAYER_STATS_CLEANUP",
+  SET_MODE: "ACTION_PLAYER_STATS_SET_MODE",
+  LOAD_CHART_DATA: "ACTION_PLAYER_STATS_LOAD_CHART_DATA",
+  PARSE_CHART_DATA: "ACTION_PLAYER_STATS_PARSE_CHART_DATA"
+};
+
+export const PLAYERS_ACTIONS = {
+  CLEANUP: "ACTION_PLAYERS_CLEANUP",
+  LOAD_DATA: "ACTION_PLAYERS_LOAD_DATA",
+  PARSE_DATA: "ACTION_PLAYERS_PARSE_DATA"
+};
+
+export const SESSIONS_ACTIONS = {
+  CLEANUP: "ACTION_SESSIONS_CLEANUP",
+  LOAD_CHART_DATA: "ACTION_SESSIONS_LOAD_CHART_DATA",
+  LOAD_DATA: "ACTION_SESSIONS_LOAD_DATA",
+  PARSE_CHART_DATA: "ACTION_SESSIONS_PARSE_CHART_DATA",
+  PARSE_DATA: "ACTION_SESSIONS_PARSE_DATA",
+  SET_DAY: "ACTION_SESSIONS_SET_DAY"
+};
+
+export const SETTINGS_ACTIONS = {
+  SET_LAYOUT: "ACTION_SETTINGS_SET_LAYOUT"
+};
 
 export const WEAPON_NAMES = {
   "BFG": "BFG10k",

frontend/src/main.js

@@ -7,7 +7,6 @@ import React from "react";
 import ReactDOM from "react-dom";
 import {Router, Route, hashHistory} from "react-router";
 import {Provider} from "react-redux";
-import "whatwg-fetch";
 
 import AppWindow from "./AppWindow";
 import SessionsView from "./views/SessionsView";
@@ -15,11 +14,11 @@ import PlayersView from "./views/PlayersView";
 import PlayerGameView from "./views/PlayerGameView";
 import PlayerStatsView from "./views/PlayerStatsView";
 import ErrorView from "./views/ErrorView";
-import reactStore from "./store";
+import reduxStore from "./store";
 
 window.addEventListener("load", function () {
   ReactDOM.render(
-    <Provider store={reactStore}>
+    <Provider store={reduxStore}>
       <Router history={hashHistory}>
         <Route path="/" component={AppWindow}>
           <Route path="/sessions/" component={SessionsView}>

frontend/src/reducers/dashboard.js

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import underscore from "underscore";
+
+import {DASHBOARD_ACTIONS} from "../lib/defs";
+
+const DEFAULT_STATE = {
+  loading: true,
+  day: "",
+  emosOfTheMonth: [],
+  fraggersOfTheMonth: [],
+  categories: [],
+  series: []
+};
+
+const dashboardReducer = (state = DEFAULT_STATE, action) => {
+  switch (action.type) {
+    case DASHBOARD_ACTIONS.CLEANUP:
+      return underscore.clone(DEFAULT_STATE);
+
+    case DASHBOARD_ACTIONS.LOAD_DATA:
+      return underscore.extendOwn({}, state, {
+        loading: true
+      });
+
+    case DASHBOARD_ACTIONS.PARSE_DATA:
+      return underscore.extendOwn({}, state, {
+        loading: false,
+        day: action.data.day,
+        emosOfTheMonth: action.data.eotm,
+        fraggersOfTheMonth: action.data.fotm
+      });
+
+    case DASHBOARD_ACTIONS.LOAD_CHART_DATA:
+      return underscore.extendOwn({}, state, {
+        categories: [],
+        series: []
+      });
+
+    case DASHBOARD_ACTIONS.PARSE_CHART_DATA:
+      return underscore.extendOwn({}, state, {
+        categories: action.categories,
+        series: action.series
+      });
+
+    default:
+      return state;
+  }
+};
+
+export default dashboardReducer;

frontend/src/reducers/index.js

@@ -22,9 +22,21 @@
 
 import {combineReducers} from "redux";
 
+import dashboardReducer from "./dashboard";
+import navigationBarReducer from "./navigationBar";
+import playerGameReducer from "./playerGame";
+import playerStatsReducer from "./playerStats";
+import playersReducer from "./players";
+import sessionsReducer from "./sessions";
 import settingsReducer from "./settings";
 
 const Q3StatsApp = combineReducers({
+  dashboard: dashboardReducer,
+  navigationBar: navigationBarReducer,
+  playerGame: playerGameReducer,
+  playerStats: playerStatsReducer,
+  players: playersReducer,
+  sessions: sessionsReducer,
   settings: settingsReducer
 });
 

frontend/src/reducers/navigationBar.js

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import underscore from "underscore";
+
+import {NAVIGATION_BAR_ACTIONS} from "../lib/defs";
+
+const DEFAULT_STATE = {
+  expanded: false,
+  showAboutModal: false,
+  showSettingsModal: false
+};
+
+const navigationBarReducer = (state = DEFAULT_STATE, action) => {
+  switch (action.type) {
+    case NAVIGATION_BAR_ACTIONS.CLEANUP:
+      return underscore.clone(DEFAULT_STATE);
+
+    case NAVIGATION_BAR_ACTIONS.EXPAND:
+      return underscore.extendOwn({}, state, {
+        expanded: true
+      });
+
+    case NAVIGATION_BAR_ACTIONS.COLLAPSE:
+      return underscore.extendOwn({}, state, {
+        expanded: false
+      });
+
+    case NAVIGATION_BAR_ACTIONS.SHOW_ABOUT_MODAL:
+      return underscore.extendOwn({}, state, {
+        expanded: false,
+        showAboutModal: true
+      });
+
+    case NAVIGATION_BAR_ACTIONS.HIDE_ABOUT_MODAL:
+      return underscore.extendOwn({}, state, {
+        showAboutModal: false
+      });
+
+    case NAVIGATION_BAR_ACTIONS.SHOW_SETTINGS_MODAL:
+      return underscore.extendOwn({}, state, {
+        expanded: false,
+        showSettingsModal: true
+      });
+
+    case NAVIGATION_BAR_ACTIONS.HIDE_SETTINGS_MODAL:
+      return underscore.extendOwn({}, state, {
+        showSettingsModal: false
+      });
+
+    default:
+      return state;
+  }
+};
+
+export default navigationBarReducer;

frontend/src/reducers/playerGame.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import underscore from "underscore";
+
+import {PLAYER_GAME_ACTIONS} from "../lib/defs";
+
+const DEFAULT_STATE = {
+  loading: true,
+  map: "",
+  weaponStats: {},
+  itemStats: {},
+  powerupStats: {},
+  scoreChartSeries: [],
+  damageChartSeries: [],
+  totalsChartSeries: []
+};
+
+const processSerieData = (serie, name) => {
+  if (!serie) {
+    return [];
+  }
+
+  return [
+    {
+      "type": "pie",
+      "name": name,
+      "data": serie
+    }
+  ];
+};
+
+const playerGameReducer = (state = DEFAULT_STATE, action) => {
+  switch (action.type) {
+    case PLAYER_GAME_ACTIONS.CLEANUP:
+      return underscore.clone(DEFAULT_STATE);
+
+    case PLAYER_GAME_ACTIONS.LOAD_DATA:
+      return underscore.extendOwn({}, state, {
+        loading: true
+      });
+
+    case PLAYER_GAME_ACTIONS.PARSE_DATA:
+      return underscore.extendOwn({}, state, {
+        loading: false,
+        map: action.data.map,
+        weaponStats: action.data.weapons || {},
+        itemStats: action.data.items || {},
+        powerupStats: action.data.powerups || {}
+      });
+
+    case PLAYER_GAME_ACTIONS.LOAD_CHARTS_DATA:
+      return underscore.extendOwn({}, state, {
+        scoreChartSeries: [],
+        damageChartSeries: [],
+        totalsChartSeries: []
+      });
+
+    case PLAYER_GAME_ACTIONS.PARSE_CHARTS_DATA:
+      return underscore.extendOwn({}, state, {
+        scoreChartSeries: processSerieData(action.data.score),
+        damageChartSeries: processSerieData(action.data.damage),
+        totalsChartSeries: processSerieData(action.data.totals)
+      });
+
+    default:
+      return state;
+  }
+};
+
+export default playerGameReducer;

frontend/src/reducers/playerStats.js

@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import underscore from "underscore";
+
+import {PLAYER_STATS_ACTIONS} from "../lib/defs";
+
+const DEFAULT_STATE = {
+  mode: "session",
+  sessionWinsChartData: {
+    categories: [],
+    series: []
+  },
+  mapWinsChartData: {
+    categories: [],
+    series: []
+  },
+  sessionAccuracyChartData: {
+    categories: [],
+    series: []
+  },
+  mapAccuracyChartData: {
+    categories: [],
+    series: []
+  }
+};
+
+const processChartData = (data, mode, kind) => {
+  let parsedData = {
+    categories: [],
+    series: []
+  };
+
+  if (mode == "session") {
+    parsedData.categories = data.dates;
+  } else {
+    parsedData.categories = data.maps;
+  }
+
+  let key = mode;
+  if (kind == "wins") {
+    key = key + "WinsChartData";
+
+    parsedData.series = [
+      {"name": "Wins", "data": data.wins},
+      {"name": "Losses", "data": data.losses}
+    ];
+  } else if (kind == "accuracy") {
+    key = key + "AccuracyChartData";
+    parsedData.series = data.series;
+  }
+
+  let newState = {};
+  newState[key] = parsedData;
+
+  return newState;
+};
+
+const playerStatsReducer = (state = DEFAULT_STATE, action) => {
+  switch (action.type) {
+    case PLAYER_STATS_ACTIONS.CLEANUP:
+      return underscore.clone(DEFAULT_STATE);
+
+    case PLAYER_STATS_ACTIONS.SET_MODE:
+      return underscore.extendOwn({}, state, {
+        mode: action.mode
+      });
+
+    case PLAYER_STATS_ACTIONS.LOAD_CHART_DATA:
+      return state;
+
+    case PLAYER_STATS_ACTIONS.PARSE_CHART_DATA:
+      return underscore.extendOwn(
+        {}, state, processChartData(action.data, action.mode, action.kind)
+      );
+
+    default:
+      return state;
+  }
+};
+
+export default playerStatsReducer;

frontend/src/reducers/players.js

@@ -20,37 +20,34 @@
  * IN THE SOFTWARE.
  */
 
-import React from "react";
 import underscore from "underscore";
 
-const DEFAULT_INIT = {
-  credentials: "include"
+import {PLAYERS_ACTIONS} from "../lib/defs";
+
+const DEFAULT_STATE = {
+  loading: true,
+  players: []
 };
 
-class BaseView extends React.Component {
-  fetch (requestOrURL, init) {
-    init = init || {};
+const playersReducer = (state = DEFAULT_STATE, action) => {
+  switch (action.type) {
+    case PLAYERS_ACTIONS.CLEANUP:
+      return underscore.clone(DEFAULT_STATE);
 
-    let actualInit = underscore.extendOwn(
-      underscore.clone(DEFAULT_INIT), init
-    );
+    case PLAYERS_ACTIONS.LOAD_DATA:
+      return underscore.extendOwn({}, state, {
+        loading: true
+      });
 
-    return window.fetch(requestOrURL, actualInit).catch((error) => {
-      this.props.router.push("/error/");
-      throw new Error("FetchError: Unable to fetch");
-    }).then((response) => {
-      if (!response.ok) {
-        let statusCode = response.status || "";
+    case PLAYERS_ACTIONS.PARSE_DATA:
+      return underscore.extendOwn({}, state, {
+        loading: false,
+        players: action.data.players
+      });
 
-        this.props.router.push("/error/" + statusCode);
-        throw new Error(
-          "FetchError: '" + statusCode + "'" + " '" + response.statusText + "'"
-        );
-      } else {
-        return response.json();
-      }
-    });
+    default:
+      return state;
   }
-}
+};
 
-export default BaseView;
+export default playersReducer;

frontend/src/reducers/sessions.js

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import underscore from "underscore";
+
+import {SESSIONS_ACTIONS} from "../lib/defs";
+
+const DEFAULT_STATE = {
+  loading: true,
+  day: "",
+  previousDay: "",
+  nextDay: "",
+  games: [],
+  categories: [],
+  series: []
+};
+
+const sessionsReducer = (state = DEFAULT_STATE, action) => {
+  switch (action.type) {
+    case SESSIONS_ACTIONS.CLEANUP:
+      return underscore.clone(DEFAULT_STATE);
+
+    case SESSIONS_ACTIONS.SET_DAY:
+      return underscore.extendOwn({}, state, {
+        day: action.day,
+        loading: true
+      });
+
+    case SESSIONS_ACTIONS.LOAD_DATA:
+      return underscore.extendOwn({}, state, {
+        loading: true
+      });
+
+    case SESSIONS_ACTIONS.PARSE_DATA:
+      return underscore.extendOwn({}, state, {
+        day: action.data.day,
+        games: action.data.games,
+        loading: false,
+        nextDay: action.data.next_day || "",
+        previousDay: action.data.previous_day || ""
+      });
+
+    case SESSIONS_ACTIONS.LOAD_CHART_DATA:
+      return underscore.extendOwn({}, state, {
+        categories: [],
+        series: []
+      });
+
+    case SESSIONS_ACTIONS.PARSE_CHART_DATA:
+      return underscore.extendOwn({}, state, {
+        categories: action.categories,
+        series: action.series
+      });
+
+    default:
+      return state;
+  }
+};
+
+export default sessionsReducer;

frontend/src/reducers/settings.js

@@ -22,15 +22,13 @@
 
 import underscore from "underscore";
 
-import {
-  DEFAULT_LAYOUT, SETTINGS_KEY_LAYOUT, ACTION_SETTINGS_SET_LAYOUT
-} from "../lib/defs";
+import {DEFAULT_LAYOUT, SETTINGS_ACTIONS, SETTINGS_KEYS} from "../lib/defs";
 
 const DEFAULT_STATE = {};
-DEFAULT_STATE[SETTINGS_KEY_LAYOUT] = (function () {
+DEFAULT_STATE[SETTINGS_KEYS.LAYOUT] = (function () {
   let result = null;
   try {
-    result = window.localStorage.getItem(SETTINGS_KEY_LAYOUT);
+    result = window.localStorage.getItem(SETTINGS_KEYS.LAYOUT);
   } catch (error) {
     // pass
   }
@@ -38,9 +36,9 @@ DEFAULT_STATE[SETTINGS_KEY_LAYOUT] = (function () {
   return result || DEFAULT_LAYOUT;
 })();
 
-const settings = (state = DEFAULT_STATE, action) => {
+const settingsReducer = (state = DEFAULT_STATE, action) => {
   switch (action.type) {
-    case ACTION_SETTINGS_SET_LAYOUT:
+    case SETTINGS_ACTIONS.SET_LAYOUT:
       return underscore.extendOwn({}, state, {
         layout: action.layout
       });
@@ -50,4 +48,4 @@ const settings = (state = DEFAULT_STATE, action) => {
   }
 };
 
-export default settings;
+export default settingsReducer;

frontend/src/views/AboutModalView.js

@@ -24,7 +24,7 @@ import Button from "react-bootstrap/lib/Button";
 import Modal from "react-bootstrap/lib/Modal";
 import React from "react";
 
-class AboutModalView extends React.Component {
+class AboutModalView extends React.PureComponent {
   render () {
     return (
       <Modal show={this.props.show} onHide={this.props.onHide}>
@@ -60,7 +60,7 @@ class AboutModalView extends React.Component {
   }
 }
 
-AboutModalView.PropTypes = {
+AboutModalView.propTypes = {
   show: React.PropTypes.bool.isRequired,
   onHide: React.PropTypes.func.isRequired
 };

frontend/src/views/DashboardView.js

@@ -21,13 +21,14 @@
  */
 
 import React from "react";
+import {connect} from "react-redux";
 
-import BaseView from "../lib/BaseView";
 import ChartComponent from "../components/ChartComponent";
 import ContainerComponent from "../components/ContainerComponent";
 import LoaderComponent from "../components/LoaderComponent";
+import {cleanup, loadData} from "../actions/dashboard";
 
-class TopPlayersTableView extends React.Component {
+class TopPlayersTableView extends React.PureComponent {
   render () {
     return (
       <table className="table table-striped table-bordered table-hover">
@@ -64,7 +65,7 @@ TopPlayersTableView.propTypes = {
   scores: React.PropTypes.array
 };
 
-class DashboardView extends BaseView {
+class DashboardView extends React.PureComponent {
   constructor (props) {
     super(props);
 
@@ -91,35 +92,14 @@ class DashboardView extends BaseView {
         }
       }
     };
-
-    this.state = {
-      ready: false,
-      day: "",
-      emosOfTheMonth: [],
-      fraggersOfTheMonth: [],
-      categories: null,
-      series: []
-    };
   }
   componentDidMount () {
-    this.fetch("/api/v1/dashboard").then((data) => {
-      this.setState({
-        ready: true,
-        day: data.day,
-        emosOfTheMonth: data.eotm,
-        fraggersOfTheMonth: data.fotm
-      });
-
-      this.loadChartData();
-    });
+    if (!this.props.day) {
+      this.props.dispatch(loadData(this.props.dispatch));
+    }
   }
-  loadChartData () {
-    this.fetch("/api/v1/charts/day/" + this.state.day).then((data) => {
-      this.setState({
-        categories: data.maps,
-        series: data.scores
-      });
-    });
+  componentWillUnmount () {
+    this.props.dispatch(cleanup());
   }
   render () {
     return (
@@ -128,9 +108,9 @@ class DashboardView extends BaseView {
 
         <ChartComponent
           config={this.chartConfig}
-          categories={this.state.categories}
-          series={this.state.series}
-          subtitle={this.state.day} />
+          categories={this.props.categories}
+          series={this.props.series}
+          subtitle={this.props.day} />
 
         <div className="row">
           <div className="col-sm-6">
@@ -138,7 +118,7 @@ class DashboardView extends BaseView {
 
             <TopPlayersTableView
               scoreColumnTitle="Frags"
-              scores={this.state.fraggersOfTheMonth} />
+              scores={this.props.fraggersOfTheMonth} />
           </div>
 
           <div className="col-sm-6">
@@ -146,14 +126,29 @@ class DashboardView extends BaseView {
 
             <TopPlayersTableView
               scoreColumnTitle="Suicides"
-              scores={this.state.emosOfTheMonth} />
+              scores={this.props.emosOfTheMonth} />
           </div>
         </div>
 
-        <LoaderComponent visible={!this.state.ready} />
+        <LoaderComponent visible={this.props.loading} />
       </ContainerComponent>
     );
   }
 }