365-game

package.json

@@ -5,27 +5,27 @@
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.8",
     "@fortawesome/fontawesome-free-solid": "^5.0.13",
-    "@fortawesome/fontawesome-svg-core": "^1.2.6",
-    "@fortawesome/free-solid-svg-icons": "^5.4.1",
-    "@fortawesome/react-fontawesome": "^0.1.3",
-    "@material-ui/core": "^3.9.3",
+    "@fortawesome/fontawesome-svg-core": "^1.2.26",
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@fortawesome/react-fontawesome": "^0.1.8",
+    "@material-ui/core": "^3.9.4",
     "@material-ui/icons": "^3.0.2",
     "eslint-config-react-app": "^2.1.0",
-    "netlify-cli": "^1.2.2",
+    "netlify-cli": "^1.2.3",
     "node-sass-chokidar": "^1.3.3",
-    "npm-run-all": "^4.1.3",
-    "rc-progress": "^2.2.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-redux": "^7.0.2",
-    "react-router": "^4.2.0",
-    "react-router-dom": "^4.2.2",
-    "react-select": "^2.4.2",
-    "react-syntax-highlighter": "^10.2.1",
-    "redux": "^4.0.1",
-    "redux-form": "^7.1.1",
+    "npm-run-all": "^4.1.5",
+    "rc-progress": "^2.5.2",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-redux": "^7.1.3",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
+    "react-select": "^2.4.4",
+    "react-syntax-highlighter": "^10.3.5",
+    "redux": "^4.0.5",
+    "redux-form": "^7.4.2",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.2.0",
+    "redux-thunk": "^2.3.0",
     "typeface-roboto": "0.0.54"
   },
   "lint-staged": {
@@ -59,20 +59,20 @@
     "process": "node src/data/script"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^3.4.11",
-    "@storybook/addon-links": "^3.4.11",
-    "@storybook/addon-viewport": "^3.4.11",
-    "@storybook/addons": "^3.4.11",
-    "@storybook/react": "^3.4.11",
+    "@storybook/addon-actions": "^3.4.12",
+    "@storybook/addon-links": "^3.4.12",
+    "@storybook/addon-viewport": "^3.4.12",
+    "@storybook/addons": "^3.4.12",
+    "@storybook/react": "^3.4.12",
     "babel-core": "^6.26.3",
     "babel-polyfill": "^6.26.0",
     "babel-runtime": "^6.26.0",
-    "csscomb": "^4.2.0",
-    "eslint": "^4.9.0",
+    "csscomb": "^4.3.0",
+    "eslint": "^4.19.1",
     "eslint-config-prettier": "^2.10.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-prettier": "^2.6.2",
-    "front-matter": "^3.0.1",
+    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-prettier": "^2.7.0",
+    "front-matter": "^3.1.0",
     "husky": "^0.14.3",
     "jest-cli": "^21.2.1",
     "lint-staged": "^4.3.0",

src/components/app.jsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import '../style/app.css';
-import {Route, Switch} from 'react-router-dom';
+import {Router, Route, Switch} from 'react-router-dom';
 
 import Players from './players';
 import Register from './register';
@@ -10,20 +10,34 @@ import Loading from './loading/loading';
 import Menu from './menu/menu';
 import Stages from './stages/stages';
 import Shelve from './shelve/shelve';
+import history from '../history';
 
 class App extends Component {
+  componentDidMount() {
+    window.sessionStorage.setItem('loaded', true);
+  }
+
   render() {
+    if (sessionStorage.getItem('loaded') && history.location.pathname !== '/') {
+      window.sessionStorage.setItem('loaded', false);
+      history.push('/');
+    }
+
     return (
-      <Switch>
-        <Route exact path="/" component={Loading} />
-        <Route exact path="/menu" component={Menu} />
-        <Route exact path="/player" component={Players} />
-        <Route exact path="/stages" component={Stages} />
-        <Route path="/register" component={Register} />
-        <Route exact path="/game" component={Game} />
-        <Route path="/settings" component={Settings} />
-        <Route exact path="/shelve" component={Shelve} />
-      </Switch>
+      <Router history={history}>
+        <div>
+          <Switch>
+            <Route exact path="/" render={() => <Loading />} />
+            <Route exact path="/menu" render={() => <Menu />} />
+            <Route exact path="/player" render={() => <Players />} />
+            <Route exact path="/stages" render={() => <Stages />} />
+            <Route path="/register" render={() => <Register />} />
+            <Route exact path="/game" render={() => <Game />} />
+            <Route path="/settings" render={() => <Settings />} />
+            <Route exact path="/shelve" render={() => <Shelve />} />
+          </Switch>
+        </div>
+      </Router>
     );
   }
 }

src/components/game.jsx

@@ -748,8 +748,8 @@ class Game extends Component {
           <DialogContent>
             <DialogContentText>
               {Array.isArray(this.state.correctAnswer)
-                ? this.state.correctAnswer.map(answer => {
-                    return <div>{answer}</div>;
+                ? this.state.correctAnswer.map((answer, index) => {
+                    return <div key={'answer_' + index}>{answer}</div>;
                   })
                 : this.state.correctAnswer}
             </DialogContentText>

src/components/menu/menu.jsx

@@ -27,6 +27,8 @@ class Menu extends Component {
 
   linkClass = () => (this.isLoggedIn() ? 'available' : 'not-available');
 
+  registerClass = () => (this.isLoggedIn() ? 'not-available' : 'available');
+
   playGameClass = () =>
     this.isLoggedIn() && !this.isGameFinished() ? 'available' : 'not-available';
 
@@ -55,7 +57,7 @@ class Menu extends Component {
               </Link>
             </li>
             <li>
-              <Link className="available" to="/register">
+              <Link className={this.registerClass()} to="/register">
                 Регистрация
               </Link>
             </li>

src/components/settings.jsx

@@ -83,7 +83,7 @@ class Settings extends Component {
     this.unsubscribe();
   };
 
-  componentWillMount = () => {
+  UNSAFE_componentWillMount = () => {
     this.createOptions();
   };
 

src/history/index.js

@@ -0,0 +1,4 @@
+import {createBrowserHistory as createHistory} from 'history';
+
+const history = createHistory();
+export default history;

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {BrowserRouter} from 'react-router-dom';
+import {BrowserRouter as Router} from 'react-router-dom';
 import {Provider} from 'react-redux';
 import store from './store/store';
 
@@ -10,9 +10,9 @@ import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <Provider store={store}>
-    <BrowserRouter>
+    <Router>
       <App />
-    </BrowserRouter>
+    </Router>
   </Provider>,
 
   document.getElementById('root'),