Added tslint and fixed all issues in code base

package.json

@@ -56,5 +56,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tslint": "^5.20.0",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-eslint-rules": "^5.4.0",
+    "tslint-react": "^4.1.0"
   }
 }

src/app.tsx

@@ -1,30 +1,19 @@
 import React from 'react';
 import Explore from './components/explore';
-
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-
 import Task from './components/task/task';
-import Task1 from './components/task/task1';
-import Task2 from './components/task/task2';
-import Task3 from './components/task/task3';
-
 import Summary from './components/summary';
 import Game from './components/game/game';
 
-const App = () => {
-  return (
-    <Router>
-      <Switch>
-        <Route exact path='/' render={() => <Game />} />
-        <Route path='/explore' render={props => <Explore {...props} />} />
-        <Route exact path='/task' render={props => <Task {...props} />} />
-        <Route exact path='/task1' render={props => <Task1 {...props} />} />
-        <Route exact path='/task2' render={props => <Task2 {...props} />} />
-        <Route exact path='/task3' render={props => <Task3 {...props} />} />
-        <Route path="/summary" render={props => <Summary {...props} />} />
-      </Switch>
-    </Router>
-  );
-}
+const App = () => (
+  <Router>
+    <Switch>
+      <Route exact path="/" render={() => <Game />} />
+      <Route path="/explore" render={props => <Explore {...props} />} />
+      <Route exact path="/task" render={props => <Task {...props} />} />
+      <Route path="/summary" render={props => <Summary {...props} />} />
+    </Switch>
+  </Router>
+);
 
 export default App;

src/components/audio/audio.tsx

@@ -1,5 +1,5 @@
-export const playAudio = async (audio, url: string, rate: number = 1): Promise<string> => {
-  if (url == null || url === '' || audio == null || audio.current == null) {
+export const playAudio = async (audio, url: string, rate = 1): Promise<string> => {
+  if (url == null || url === '' || audio == null || audio.current == null) {
     return Promise.reject(`playAudio URL: ${url} audio: ${audio}`);
   } else {
     return new Promise((resolve, reject) => {
@@ -16,4 +16,4 @@ export const playAudio = async (audio, url: string, rate: number = 1): Promise<s
       }
     });
   }
-}
+};

src/components/explore/explore-input.tsx

@@ -2,23 +2,17 @@ import React, { useEffect, useRef } from 'react';
 import { connect } from 'react-redux';
 import { IRootState } from '../../shared/reducers';
 import { RouteComponentProps } from 'react-router-dom';
-import { completed } from './explore.reducer';
 
 const mapStateToProps = (state: IRootState, ownProps) => ({
   isAnimating: state.explore.isAnimating,
   currentGameCharacter: state.game.gameCharacter,
   handleKey: ownProps.handleKey,
-  handleAnimation: ownProps.handleAnimation,
+  handleAnimation: ownProps.handleAnimation
 });
 
-const mapDispatchToProps = {
-  completed
-};
-
 type StateProps = ReturnType<typeof mapStateToProps>;
-type DispatchProps = typeof mapDispatchToProps;
 
-export type IProps = StateProps & DispatchProps & RouteComponentProps<{ url: string }>;
+export type IProps = StateProps & RouteComponentProps<{ url: string }>;
 
 const ExploreInput = (props: IProps) => {
   const {
@@ -34,7 +28,7 @@ const ExploreInput = (props: IProps) => {
     if (inputElement && inputElement.current) {
       inputElement.current.focus();
     }
-  })
+  });
 
   return (
     <div
@@ -51,6 +45,6 @@ const ExploreInput = (props: IProps) => {
         />
     </div>
   );
-}
+};
 
 export default connect(mapStateToProps)(ExploreInput);

src/components/explore/explore-menu.tsx

@@ -3,8 +3,8 @@ import { connect } from 'react-redux';
 import { RouteComponentProps } from 'react-router-dom';
 import { speak } from '../tts/tts';
 import { playAudio } from '../audio/audio';
-import { IRootState } from 'shared/reducers';
-import { setCharacter } from 'shared/reducers/game-data';
+import { IRootState } from '../../shared/reducers';
+import { setCharacter } from '../../shared/reducers/game-data';
 import { Paper, MenuItem, MenuList, Typography, Grid } from '@material-ui/core';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 
@@ -18,7 +18,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     paper: {
       display: 'flex',
-      backgroundColor: 'rgba(255, 255, 255, 0)',
+      backgroundColor: 'rgba(255, 255, 255, 0)'
     },
     menuList: {
       '&:focus': {
@@ -32,7 +32,7 @@ const useStyles = makeStyles((theme: Theme) =>
         border: '2px solid white'
       }
     }
-  }),
+  })
 );
 
 const mapStateToProps = (state: IRootState) => ({
@@ -50,7 +50,12 @@ export type IProps = StateProps & DispatchProps & RouteComponentProps<{ url: str
 
 const ExploreMenu = (props: IProps) => {
   const classes = useStyles();
-  const { gameCharacters, setCharacter } = props;
+  const {
+    gameCharacters
+  } = props;
+
+  const setCharacterAction = props.setCharacter;
+
   const headerText = 'Välj ninja';
   const introText = 'Tryck tabb för att navigera. Välj genom att trycka på enter.';
 
@@ -69,13 +74,14 @@ const ExploreMenu = (props: IProps) => {
   }, [headerText, introText]);
 
   const handleFocus = (id: number) => {
-    speak(gameCharacters[id].name + '.  ' + gameCharacters[id].description).then(url => playAudio(audioElementIntro, url))
-  }
+    speak(gameCharacters[id].name + '.  ' + gameCharacters[id].description).then(url => playAudio(audioElementIntro, url));
+  };
 
   const handleClick = (id: number) => {
-    setCharacter(id);
+    setCharacterAction(id);
     props.history.push('/explore/play');
-  }
+  };
+
   return (
     <div className={classes.root}>
       <Grid container alignItems="center" justify="center">
@@ -89,7 +95,7 @@ const ExploreMenu = (props: IProps) => {
             <MenuList
               ref={menuElement}
               className={classes.menuList}
-              aria-hidden={true}
+              aria-hidden
             >
               {gameCharacters.map((character, index) => (
                 <MenuItem
@@ -112,6 +118,6 @@ const ExploreMenu = (props: IProps) => {
       </Grid>
     </div>
   );
-}
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(ExploreMenu);