From 800d9e64eb43f649c654258d052191d9edeac4a0 Mon Sep 17 00:00:00 2001
From: Martin Krulis <krulis@ksi.mff.cuni.cz>
Date: Thu, 2 Nov 2017 18:19:28 +0100
Subject: [PATCH] SSR fixed (hopefully). Logger middleware added.

---
 .../SubmissionsTableContainer.js              | 28 ++++++-------------
 src/redux/middleware/loggerMiddleware.js      | 20 +++++++++++++
 src/redux/store.js                            |  6 +++-
 src/server.js                                 | 14 ++++------
 4 files changed, 40 insertions(+), 28 deletions(-)
 create mode 100644 src/redux/middleware/loggerMiddleware.js

diff --git a/src/containers/SubmissionsTableContainer/SubmissionsTableContainer.js b/src/containers/SubmissionsTableContainer/SubmissionsTableContainer.js
index bea7a19ed..20132f8af 100644
--- a/src/containers/SubmissionsTableContainer/SubmissionsTableContainer.js
+++ b/src/containers/SubmissionsTableContainer/SubmissionsTableContainer.js
@@ -6,29 +6,20 @@ import { List } from 'immutable';
 
 import { fetchUsersSubmissions } from '../../redux/modules/submissions';
 import SubmissionsTable from '../../components/Assignments/SubmissionsTable';
-import { loggedInUserIdSelector } from '../../redux/selectors/auth';
-import {
-  createGetUsersSubmissionsForAssignment
-} from '../../redux/selectors/assignments';
+import { createGetUsersSubmissionsForAssignment } from '../../redux/selectors/assignments';
 
 class SubmissionsTableContainer extends Component {
-  componentWillMount() {
-    SubmissionsTableContainer.loadData(this.props);
-  }
+  componentWillMount = () => this.props.loadAsync();
 
   componentWillReceiveProps(newProps) {
     if (
       this.props.assignmentId !== newProps.assignmentId ||
       this.props.userId !== newProps.userId
     ) {
-      SubmissionsTableContainer.loadData(newProps);
+      newProps.loadAsync();
     }
   }
 
-  static loadData = ({ userId, assignmentId, loadSubmissionsForUser }) => {
-    loadSubmissionsForUser(userId, assignmentId);
-  };
-
   sortSubmissions(submissions) {
     return submissions.sort((a, b) => {
       var aTimestamp = a.get('data').get('submittedAt');
@@ -65,20 +56,19 @@ SubmissionsTableContainer.propTypes = {
   userId: PropTypes.string.isRequired,
   title: PropTypes.string,
   assignmentId: PropTypes.string.isRequired,
-  submissions: PropTypes.instanceOf(List)
+  submissions: PropTypes.instanceOf(List),
+  loadAsync: PropTypes.func.isRequired
 };
 
 export default connect(
-  (state, props) => {
+  (state, { userId, assignmentId }) => {
     const getSubmissions = createGetUsersSubmissionsForAssignment();
-    const userId = props.userId ? props.userId : loggedInUserIdSelector(state);
     return {
       userId,
-      submissions: getSubmissions(state, userId, props.assignmentId)
+      submissions: getSubmissions(state, userId, assignmentId)
     };
   },
-  (dispatch, props) => ({
-    loadSubmissionsForUser: (userId, assignmentId) =>
-      dispatch(fetchUsersSubmissions(userId, assignmentId))
+  (dispatch, { userId, assignmentId }) => ({
+    loadAsync: () => dispatch(fetchUsersSubmissions(userId, assignmentId))
   })
 )(SubmissionsTableContainer);
diff --git a/src/redux/middleware/loggerMiddleware.js b/src/redux/middleware/loggerMiddleware.js
new file mode 100644
index 000000000..90c982d7f
--- /dev/null
+++ b/src/redux/middleware/loggerMiddleware.js
@@ -0,0 +1,20 @@
+const middleware = store => next => action => {
+  let verbose = false;
+  if (verbose) {
+    console.log(action);
+  } else {
+    console.log(action.type);
+  }
+
+  let res = next(action);
+
+  if (verbose) {
+    console.log('State After Actions:');
+    console.log('--------------------');
+    console.log(store.getState().assignments);
+  }
+
+  return res;
+};
+
+export default middleware;
diff --git a/src/redux/store.js b/src/redux/store.js
index 602572154..21a9e5cb8 100644
--- a/src/redux/store.js
+++ b/src/redux/store.js
@@ -7,6 +7,7 @@ import promiseMiddleware from 'redux-promise-middleware';
 import * as storage from 'redux-storage';
 import authMiddleware from './middleware/authMiddleware';
 import apiMiddleware from './middleware/apiMiddleware';
+import loggerMiddleware from './middleware/loggerMiddleware';
 import createReducer from './reducer';
 import createEngine from 'redux-storage-engine-localstorage';
 import filter from 'redux-storage-decorator-filter';
@@ -35,7 +36,10 @@ const getMiddleware = history => [
 const dev = history =>
   compose(
     applyMiddleware(...getMiddleware(history)),
-    canUseDOM && window.devToolsExtension ? window.devToolsExtension() : f => f // use the DEVtools if the extension is installed
+    canUseDOM && window.devToolsExtension ? window.devToolsExtension() : f => f, // use the DEVtools if the extension is installed
+    !canUseDOM || !window.devToolsExtension // dev tools not available, or we are at server -> manual logging
+      ? applyMiddleware(loggerMiddleware)
+      : f => f
   );
 
 const prod = history => compose(applyMiddleware(...getMiddleware(history)));
diff --git a/src/server.js b/src/server.js
index 9a1cf5019..381e5348e 100644
--- a/src/server.js
+++ b/src/server.js
@@ -97,20 +97,18 @@ app.get('*', (req, res) => {
       } else {
         const userId = loggedInUserIdSelector(store.getState()); // try to get the user ID from the token (if any)
         const loadAsync = renderProps.components
-          .filter(
-            component =>
-              component &&
-              component.WrappedComponent &&
-              component.WrappedComponent.loadAsync
-          )
+          .filter(component => component)
           .map(component => {
             // there might be several layers of wrapping - connect, withLinks, ...
             while (component.WrappedComponent) {
               component = component.WrappedComponent;
             }
-            return component.loadAsync;
+            return component;
           })
-          .map(load => load(renderProps.params, store.dispatch, userId));
+          .filter(component => component.loadAsync)
+          .map(component =>
+            component.loadAsync(renderProps.params, store.dispatch, userId)
+          );
 
         Promise.all(loadAsync)
           .then(() => renderPage(res, store, renderProps))