Update Dependencies

.gitignore

@@ -1,4 +1,4 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
+.idea
 
 # dependencies
 /node_modules

package.json

@@ -2,70 +2,74 @@
   "name": "mob-timer",
   "version": "1.2.0",
   "dependencies": {
-    "@babel/core": "^7.0.0-beta.46",
-    "@babel/preset-env": "^7.0.0-beta.46",
-    "@babel/preset-react": "^7.0.0-beta.46",
-    "autoprefixer": "8.4.1",
-    "babel-jest": "^22.4.3",
+    "@babel/core": "^7.0.0-beta.54",
+    "@babel/preset-env": "^7.0.0-beta.54",
+    "@babel/preset-react": "^7.0.0-beta.54",
+    "autoprefixer": "9.0.0",
+    "babel-jest": "^23.4.0",
     "babel-loader": "^8.0.0-beta.2",
     "case-sensitive-paths-webpack-plugin": "2.1.2",
     "chalk": "^2.4.1",
-    "css-loader": "0.28.11",
-    "dotenv": "5.0.1",
+    "css-loader": "1.0.0",
+    "dotenv": "6.0.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "1.1.11",
-    "fork-ts-checker-webpack-plugin": "^0.4.1",
-    "fs-extra": "6.0.0",
+    "fork-ts-checker-webpack-plugin": "^0.4.3",
+    "fs-extra": "7.0.0",
     "html-webpack-plugin": "^3.2.0",
     "interpolate-html-plugin": "^3.0.0",
-    "jest": "22.4.3",
-    "node-sass": "^4.9.0",
+    "jest": "23.4.1",
+    "node-sass": "^4.9.2",
     "normalize.css": "^8.0.0",
     "object-assign": "4.1.1",
-    "postcss-flexbugs-fixes": "3.3.1",
-    "postcss-loader": "2.1.4",
+    "postcss-flexbugs-fixes": "4.0.0",
+    "postcss-loader": "2.1.6",
     "promise": "8.0.1",
     "raf": "3.4.0",
-    "react": "^16.3.2",
+    "react": "^16.4.1",
     "react-dev-utils": "^6.0.0-next.b2fd8db8",
-    "react-dnd": "^2.6.0",
-    "react-dnd-multi-backend": "^3.1.2",
-    "react-dom": "^16.3.2",
+    "react-dnd": "^5.0.0",
+    "react-dnd-html5-backend": "^5.0.1",
+    "react-dnd-multi-backend": "^3.1.0",
+    "react-dom": "^16.4.1",
+    "react-hot-loader": "^4.3.3",
     "react-keydown": "^1.9.7",
-    "react-md": "^1.3.0",
+    "react-md": "^1.4.2",
     "react-redux": "^5.0.7",
-    "redux": "^3.7.2",
-    "redux-observable": "^0.18.0",
-    "rxjs": "^5.5.10",
-    "sass-loader": "^7.0.1",
+    "redux": "^4.0.0",
+    "redux-observable": "^1.0.0",
+    "rxjs": "^6.2.2",
+    "sass-loader": "^7.0.3",
     "source-map-loader": "^0.2.3",
     "style-loader": "0.21.0",
-    "styled-components": "^3.2.6",
+    "styled-components": "^3.3.3",
     "sw-precache-webpack-plugin": "0.11.5",
-    "ts-loader": "^4.2.0",
-    "uglifyjs-webpack-plugin": "^1.2.5",
+    "ts-loader": "^4.4.2",
+    "typesafe-actions": "^2.0.4",
+    "uglifyjs-webpack-plugin": "^1.2.7",
     "url-loader": "1.0.1",
-    "webpack": "4.6.0",
-    "webpack-manifest-plugin": "2.0.2"
+    "webpack": "4.16.1",
+    "webpack-manifest-plugin": "2.0.3"
   },
   "devDependencies": {
-    "@types/jest": "^22.2.3",
-    "@types/react": "16.3.13",
-    "@types/react-dnd": "^2.0.36",
+    "@types/jest": "^23.3.0",
+    "@types/node": "^10.5.2",
+    "@types/react": "16.4.6",
     "@types/react-dnd-multi-backend": "^3.0.1",
-    "@types/react-dom": "^16.0.5",
-    "@types/react-redux": "5.0.19",
-    "gh-pages": "^1.1.0",
-    "husky": "^1.0.0-rc.2",
-    "lint-staged": "^7.0.5",
-    "prettier": "^1.12.1",
-    "ts-jest": "22.4.4",
-    "tsconfig-paths-webpack-plugin": "^3.0.4",
-    "tslint": "^5.9.1",
-    "tslint-config-prettier": "^1.12.0",
-    "tslint-config-standard": "^7.0.0",
-    "tslint-react": "^3.5.1",
-    "typescript": "^2.8.3",
+    "@types/react-dom": "^16.0.6",
+    "@types/react-hot-loader": "^4.1.0",
+    "@types/react-redux": "^6.0.4",
+    "gh-pages": "^1.2.0",
+    "husky": "^0.14.3",
+    "lint-staged": "^7.2.0",
+    "prettier": "^1.13.7",
+    "ts-jest": "23.0.1",
+    "tsconfig-paths-webpack-plugin": "^3.2.0",
+    "tslint": "^5.11.0",
+    "tslint-config-prettier": "^1.14.0",
+    "tslint-config-standard": "^7.1.0",
+    "tslint-react": "^3.6.0",
+    "typescript": "^2.9.2",
     "webpack-dev-server": "3.1.4"
   },
   "homepage": "https://beeequeue.github.io/mob-timer",
@@ -76,17 +80,22 @@
     }
   },
   "jest": {
-    "collectCoverageFrom": ["src/**/*.{js,jsx,ts,tsx}"],
-    "setupFiles": ["<rootDir>/config/polyfills.js"],
-    "testMatch": ["<rootDir>/src/**/?(*.)(test).(j|t)s?(x)"],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}"
+    ],
+    "setupFiles": [
+      "<rootDir>/config/polyfills.js"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/?(*.)(test).(j|t)s?(x)"
+    ],
     "testEnvironment": "node",
     "testURL": "http://localhost",
     "transform": {
       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
       "^.+\\.tsx?$": "<rootDir>/config/jest/typescriptTransform.js",
       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|mjs|css|json)$)":
-        "<rootDir>/config/jest/fileTransform.js"
+      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
     },
     "transformIgnorePatterns": [
       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$"
@@ -95,15 +104,24 @@
       "^react-native$": "react-native-web",
       "@state/(.*)": "<rootDir>/src/state/$1"
     },
-    "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json"],
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json"
+    ],
     "globals": {
       "ts-jest": {
         "tsConfigFile": "tsconfig.test.json"
       }
     }
   },
   "lint-staged": {
-    "*.{ts,tsx,json}": ["yarn format", "git add"]
+    "*.{ts,tsx,json}": [
+      "yarn format",
+      "git add"
+    ]
   },
   "private": true,
   "scripts": {

src/App.tsx

@@ -1,3 +1,4 @@
+import { hot } from 'react-hot-loader'
 import * as React from 'react'
 import { compose } from 'redux'
 import { connect } from 'react-redux'
@@ -6,12 +7,13 @@ import keydown from 'react-keydown/es'
 import styled from 'styled-components'
 
 import { startTimer, stopTimer, setTime } from '@state/actions/timerActions'
+
+import { Time } from './time'
+import { IRootState } from './state'
 import { TimerContainer } from './containers/Timer'
 import { UserContainer } from './containers/Users'
 // import { GitHubLink } from './components/GitHubLink'
 import { multiBackend } from './utils/dragDropContext'
-import { Time } from './time'
-import { IState } from './state'
 
 const Container = styled.div`
   font-family: 'Roboto', sans-serif;
@@ -30,22 +32,16 @@ interface IStateProps {
   duration: Time
 }
 
-interface IDispatchProps {
-  startTimer: typeof startTimer
-  stopTimer: typeof stopTimer
-  setTime: typeof setTime
-}
-
-const mapState = ({ timer }: IState): IStateProps => ({
+const mapState = ({ timer }: IRootState): IStateProps => ({
   counting: timer.counting,
   duration: timer.duration,
 })
 
-const mapActions: IDispatchProps = { startTimer, stopTimer, setTime }
+const mapActions = { startTimer, stopTimer, setTime }
+type DispatchProps = typeof mapActions
 
-export class AppComponent extends React.Component<
-  IStateProps & IDispatchProps
-> {
+@DragDropContext(multiBackend)
+export class AppComponent extends React.Component<IStateProps & DispatchProps> {
   constructor(props: any) {
     super(props)
 
@@ -78,6 +74,9 @@ export class AppComponent extends React.Component<
 }
 
 export const App = compose(
-  connect(mapState, mapActions),
-  DragDropContext(multiBackend)
+  hot(module),
+  connect(
+    mapState,
+    mapActions
+  )
 )(AppComponent)

src/components/AddUserDialog.tsx

@@ -1,3 +1,4 @@
+import { hot } from 'react-hot-loader'
 import * as React from 'react'
 import keydown from 'react-keydown/es'
 import { Button } from 'react-md/lib/Buttons'
@@ -16,7 +17,7 @@ interface IState {
   readonly names: ReadonlyArray<string>
 }
 
-export class AddUserDialog extends React.PureComponent<IProps, IState> {
+class AddUserDialogComponent extends React.PureComponent<IProps, IState> {
   constructor(props: IProps) {
     super(props)
 
@@ -57,16 +58,16 @@ export class AddUserDialog extends React.PureComponent<IProps, IState> {
     this.submit()
   }
 
-  private onInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  private onInputKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
     if (e.keyCode === 13) return this.submit()
   }
 
   private onFieldChange = (value: string) => {
     this.setState({ value })
   }
 
-  public selectName = (name: string) => {
-    this.setState({ value: name })
+  public selectName = (name: React.ReactText) => {
+    this.setState({ value: name as string })
   }
 
   private actions = [
@@ -101,3 +102,5 @@ export class AddUserDialog extends React.PureComponent<IProps, IState> {
     )
   }
 }
+
+export const AddUserDialog = hot(module)(AddUserDialogComponent)

src/components/Countdown.tsx

@@ -1,6 +1,8 @@
+import { hot } from 'react-hot-loader'
 import * as React from 'react'
-import styled, { StyledComponentClass } from 'styled-components'
 import { Button, ButtonProps } from 'react-md/lib/Buttons'
+import styled, { StyledComponentClass } from 'styled-components'
+
 import { Time } from '../time'
 
 const Container = styled.div`
@@ -47,8 +49,8 @@ interface IProps {
   onChangeTime: (time: Time) => void
 }
 
-export class Countdown extends React.PureComponent<IProps> {
-  private changeMinutes = (e: React.MouseEvent<HTMLButtonElement>) => {
+class CountdownComponent extends React.PureComponent<IProps> {
+  private changeMinutes = (e: React.MouseEvent<HTMLElement>) => {
     const { time, onChangeTime } = this.props
     const newMinutes = time.minutes + Number(e.currentTarget.textContent)
 
@@ -62,7 +64,7 @@ export class Countdown extends React.PureComponent<IProps> {
     onChangeTime(newTime)
   }
 
-  private changeSeconds = (e: React.MouseEvent<HTMLButtonElement>) => {
+  private changeSeconds = (e: React.MouseEvent<HTMLElement>) => {
     const { time, onChangeTime } = this.props
     let newSeconds = time.seconds + Number(e.currentTarget.textContent)
 
@@ -112,3 +114,5 @@ export class Countdown extends React.PureComponent<IProps> {
     )
   }
 }
+
+export const Countdown = hot(module)(CountdownComponent)

src/components/GitHubLink.tsx

@@ -1,3 +1,4 @@
+import { hot } from 'react-hot-loader'
 import * as React from 'react'
 import styled from 'styled-components'
 
@@ -13,8 +14,10 @@ const Icon = styled.img`
   background: #eee;
 `
 
-export const GitHubLink: React.SFC = () => (
+export const GitHubLinkComponent: React.SFC = () => (
   <a target="_blank" href="https://github.com/beeequeue/mob-timer">
     <Icon src={iconUrl} />
   </a>
 )
+
+export const GitHubLink = hot(module)(GitHubLinkComponent)

src/components/KeyboardShortcutsDialog.tsx

@@ -1,3 +1,4 @@
+import { hot } from 'react-hot-loader'
 import * as React from 'react'
 import { DialogContainer } from 'react-md/lib/Dialogs'
 import { FontIcon } from 'react-md/lib/FontIcons'
@@ -30,7 +31,7 @@ interface IProps {
   readonly hide: () => void
 }
 
-export class KeyboardShortcutsDialog extends React.PureComponent<IProps> {
+class KeyboardShortcutsDialogComponent extends React.PureComponent<IProps> {
   private actions = [{ children: 'Back', onClick: this.props.hide }]
 
   public render() {
@@ -53,3 +54,5 @@ export class KeyboardShortcutsDialog extends React.PureComponent<IProps> {
     )
   }
 }
+
+export const KeyboardShortcutsDialog = hot(module)(KeyboardShortcutsDialogComponent)