Major redesign of routing-related internals (aggregated in one commit, it cannot be helped). Webapp updated to use react-router v4. Router is no longer interconnected with Redux. Routes and links have centralized declaration in routes.js. Language was removed from URLs (now it is stored in cookies + local storage). Async loads are now performed strictly on pages and root App component (when performing SSR).

Author: Martin Krulis

package.json

@@ -77,10 +77,10 @@
     "react-intl": "2.4.0",
     "react-motion": "^0.5.2",
     "react-redux": "^7.1.0",
-    "react-responsive": "^1.1.3",
-    "react-router": "3.2.3",
-    "react-router-bootstrap": "^0.23.3",
-    "react-router-redux": "^4.0.8",
+    "react-responsive": "^7.0.0",
+    "react-router": "^5.0.1",
+    "react-router-dom": "^5.0.1",
+    "react-router-bootstrap": "^0.25.0",
     "react-toggle": "4.0.2",
     "redux": "^4.0.4",
     "redux-actions": "^2.6.5",

src/client.js

@@ -3,17 +3,13 @@ import 'isomorphic-fetch';
 import React from 'react';
 import { render } from 'react-dom';
 import { fromJS } from 'immutable';
-
 import { Provider } from 'react-redux';
-import { Router, useRouterHistory } from 'react-router';
-import { syncHistoryWithStore } from 'react-router-redux';
-import useScroll from 'scroll-behavior/lib/useStandardScroll';
-import createBrowserHistory from 'history/lib/createBrowserHistory';
+import { BrowserRouter } from 'react-router-dom';
 
 import { configureStore } from './redux/store';
-import createRoutes from './pages/routes';
-
-import { getToken } from './redux/middleware/authMiddleware';
+import { getToken, getInstanceId } from './redux/middleware/authMiddleware';
+import { getLang } from './redux/middleware/langMiddleware';
+import App from './containers/App';
 
 // load the initial state form the server - if any
 let state;
@@ -22,18 +18,17 @@ const blacklist = ['userSwitching'];
 if (ini) {
   state = {};
   Object.keys(ini).map(key => {
-    state[key] = blacklist.indexOf(key) >= 0 ? ini[key] : fromJS(ini[key]);
+    state[key] = blacklist.includes(key) ? ini[key] : fromJS(ini[key]);
   });
 }
 
-const createScrollHistory = useScroll(createBrowserHistory);
-const appHistory = useRouterHistory(createScrollHistory)();
-const store = configureStore(appHistory, state, getToken());
-const history = syncHistoryWithStore(appHistory, store);
+const store = configureStore(state, getToken(), getInstanceId(), getLang());
 
 render(
   <Provider store={store}>
-    <Router history={history} routes={createRoutes(store.getState)} />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </Provider>,
   document.getElementById('root')
 );

src/components/Assignments/Assignment/AssignmentTableRow/AssignmentTableRow.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import AssignmentStatusIcon from '../AssignmentStatusIcon/AssignmentStatusIcon';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import { LinkContainer } from 'react-router-bootstrap';

src/components/Assignments/ShadowAssignment/ShadowAssignmentsTable/ShadowAssignmentsTableRow.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 import { LinkContainer } from 'react-router-bootstrap';
 import { defaultMemoize } from 'reselect';

src/components/Assignments/SolutionsTable/SolutionsTableRow.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, FormattedNumber, injectIntl, intlShape } from 'react-intl';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import classnames from 'classnames';
 

src/components/Exercises/ExerciseDetail/ExerciseDetail.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 import { Table } from 'react-bootstrap';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 import Box from '../../widgets/Box';
 import Markdown from '../../widgets/Markdown';

src/components/Exercises/ExercisesListItem/ExercisesListItem.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { LinkContainer } from 'react-router-bootstrap';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 import DifficultyIcon from '../DifficultyIcon';
 import UsersNameContainer from '../../../containers/UsersNameContainer';

src/components/Exercises/ExercisesName/ExercisesName.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 import withLinks from '../../../helpers/withLinks';
 import { LocalizedExerciseName } from '../../helpers/LocalizedNames';

src/components/Groups/GroupsName/GroupsName.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import withLinks from '../../../helpers/withLinks';
 import { LocalizedGroupName } from '../../helpers/LocalizedNames';
 

src/components/Groups/ResultsTable/ResultsTable.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { defaultMemoize } from 'reselect';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
@@ -256,6 +256,7 @@ class ResultsTable extends Component {
       groupName,
       intl: { locale },
     } = this.props;
+
     return (
       <React.Fragment>
         <SortableTable