Some fixes

.env-sample

@@ -2,6 +2,7 @@ NODE_ENV=production
 API_BASE=https://recodex.projekty.ms.mff.cuni.cz:4000/v1
 PORT=443
 # WEBPACK_DEV_SERVER_PORT=8081 # might be usefull for dev environment, if port 8081 is necessary for something
+# REDUX_DEV_SERVER_PORT=8082
 
 TITLE=ReCodEx
 ALLOW_NORMAL_REGISTRATION=true

bin/dev.js

@@ -5,9 +5,11 @@ import WebpackDevServer from 'webpack-dev-server';
 import path from 'path';
 import config from '../config/webpack.config';
 import colors from 'colors';
+import remotedev from 'remotedev-server';
 
 const PORT = process.env.PORT || 8080;
 const WEBPACK_DEV_SERVER_PORT = process.env.WEBPACK_DEV_SERVER_PORT || 8081;
+const REDUX_DEV_SERVER_PORT = process.env.REDUX_DEV_SERVER_PORT || 8082;
 
 let app = new Express();
 app.set('view engine', 'ejs');
@@ -37,14 +39,23 @@ var server = new WebpackDevServer(webpack(config), {
   stats: { colors: true }
 });
 
+remotedev({
+  hostname: '127.0.0.1',
+  port: REDUX_DEV_SERVER_PORT
+});
+
 server.listen(WEBPACK_DEV_SERVER_PORT, 'localhost', () => {
   console.log(
-    `${colors.yellow('WebpackDevServer')} is running on ${colors.underline(`http://localhost:${WEBPACK_DEV_SERVER_PORT}`)}`
+    `${colors.yellow('WebpackDevServer')} is running on ${colors.underline(
+      `http://localhost:${WEBPACK_DEV_SERVER_PORT}`
+    )}`
   );
 });
 
 app.listen(PORT, () => {
   console.log(
-    `${colors.green('WebApp')} is running on ${colors.underline(`http://localhost:${PORT}`)}`
+    `${colors.green('WebApp')} is running on ${colors.underline(
+      `http://localhost:${PORT}`
+    )}`
   );
 });

config/webpack.config.js

@@ -60,6 +60,7 @@ module.exports = {
         NODE_ENV: "'" + process.env.NODE_ENV + "'",
         API_BASE: "'" + process.env.API_BASE + "'",
         TITLE: "'" + process.env.TITLE + "'",
+        REDUX_DEV_SERVER_PORT: "'" + process.env.REDUX_DEV_SERVER_PORT + "'",
         ALLOW_NORMAL_REGISTRATION:
           "'" + process.env.ALLOW_NORMAL_REGISTRATION + "'",
         ALLOW_LDAP_REGISTRATION:

package.json

@@ -137,6 +137,8 @@
     "postcss-loader": "^2.0.5",
     "prettier": "^1.3.1",
     "react-intl-translations-manager": "^5.0.0",
+    "remote-redux-devtools": "^0.5.12",
+    "remotedev-server": "^0.2.4",
     "request": "^2.61.0",
     "scroll-behavior": "^0.4.0",
     "strip-loader": "^0.1.2",

src/components/widgets/InfoBox/InfoBox.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 import Icon from 'react-fontawesome';
 import classNames from 'classnames';
+import GroupsName from '../../../components/Groups/GroupsName';
 
 const InfoBox = ({
   title,
@@ -12,7 +13,7 @@ const InfoBox = ({
   progress,
   description = '',
   color = 'green'
-}) => (
+}) =>
   <div
     className={classNames({
       'info-box': true,
@@ -23,22 +24,25 @@ const InfoBox = ({
       <Icon name={icon} spin={spin} />
     </span>
     <div className="info-box-content">
-      <span className="info-box-text">{title}</span>
-      <span className="info-box-number">{value}</span>
+      <span className="info-box-text">
+        {title}
+      </span>
+      <span className="info-box-number">
+        {value}
+      </span>
       <div className="progress">
         <div className="progress-bar" style={{ width: `${progress * 100}%` }} />
       </div>
       <span className="progress-description">
         {description}
       </span>
     </div>
-  </div>
-);
+  </div>;
 
 InfoBox.propTypes = {
   title: PropTypes.oneOfType([
     PropTypes.string,
-    PropTypes.shape({ type: PropTypes.oneOf([FormattedMessage]) })
+    PropTypes.shape({ type: PropTypes.oneOf([FormattedMessage, GroupsName]) })
   ]).isRequired,
   value: PropTypes.oneOfType([
     PropTypes.number,

src/pages/User/User.js

@@ -313,7 +313,7 @@ export default withLinks(
         isAdmin: isSuperadmin,
         studentOfGroupsIds: studentOfGroupsIdsSelector(userId)(state).toArray(),
         groupAssignments: groupId => groupsAssignmentsSelector(groupId)(state),
-        groupStatistics: createGroupsStatsSelector(state),
+        groupStatistics: groupId => createGroupsStatsSelector(groupId)(state),
         usersStatistics: statistics =>
           statistics.find(stat => stat.userId === userId) || {},
         commonGroups

src/redux/store.js

@@ -1,6 +1,7 @@
 import { canUseDOM } from 'exenv';
 
 import { createStore, compose, applyMiddleware } from 'redux';
+import { composeWithDevTools } from 'remote-redux-devtools';
 import { routerMiddleware } from 'react-router-redux';
 import thunkMiddleware from 'redux-thunk';
 import promiseMiddleware from 'redux-promise-middleware';
@@ -14,6 +15,8 @@ import filter from 'redux-storage-decorator-filter';
 import { actionTypes as authActionTypes } from './modules/auth';
 import { actionTypes as switchingActionTypes } from './modules/userSwitching';
 
+const REDUX_DEV_SERVER_PORT = process.env.REDUX_DEV_SERVER_PORT !== 'undefined' ? process.env.REDUX_DEV_SERVER_PORT : 8082;
+
 const engine = filter(createEngine('recodex/store'), ['userSwitching']);
 
 const getMiddleware = history => [
@@ -33,13 +36,18 @@ const getMiddleware = history => [
   )
 ];
 
+const composeEnhancers = composeWithDevTools({
+  realtime: true,
+  name: 'ReCodEx',
+  host: '127.0.0.1',
+  port: REDUX_DEV_SERVER_PORT
+});
+
 const dev = history =>
-  compose(
-    applyMiddleware(
-      ...getMiddleware(history),
-      loggerMiddleware(!canUseDOM || !window.devToolsExtension)
-    ),
-    canUseDOM && window.devToolsExtension ? window.devToolsExtension() : f => f // use the DEVtools if the extension is installed
+  composeEnhancers(
+    compose(
+      applyMiddleware(...getMiddleware(history), loggerMiddleware(!canUseDOM))
+    )
   );
 
 const prod = history => compose(applyMiddleware(...getMiddleware(history)));