Upgrade to material-ui v4 and more

package.json

@@ -21,50 +21,51 @@
     "prepublishOnly": "rm -rf ./dist && yarn build:babel"
   },
   "dependencies": {
-    "@date-io/moment": "^1.1.0",
-    "@material-ui/core": "^3.0.0",
-    "@material-ui/icons": "^3.0.1",
-    "classnames": "^2.2.5",
+    "@date-io/moment": "^1.3.6",
+    "@material-ui/core": "^4.1.0",
+    "@material-ui/icons": "^4.1.0",
+    "@material-ui/pickers": "^3.1.0",
+    "@material-ui/styles": "^4.1.0",
+    "classnames": "^2.2.6",
     "init-uuid": "^1.2.0",
-    "is-url": "^1.2.2",
-    "isemail": "^3.0.0",
-    "jss": "^9.5.1",
-    "keycode": "^2.1.9",
-    "material-ui-pickers": "^2.0.1",
-    "moment": "^2.20.1",
-    "prop-types": "^15.6.1",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "react-jss": "^8.1.0",
-    "react-router-dom": "^5.0.0",
+    "is-url": "^1.2.4",
+    "isemail": "^3.2.0",
+    "jss": "^9.8.7",
+    "keycode": "^2.2.0",
+    "moment": "^2.24.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-jss": "^8.6.1",
+    "react-router-dom": "^5.0.1",
     "recompose": "^0.30.0",
-    "typescript": "^3.4.5",
+    "typescript": "^3.5.1",
     "vanilla-store": "^0.4.0"
   },
   "peerDependencies": {
-    "prop-types": "^15.6.1",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
   },
   "devDependencies": {
     "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.4",
+    "@babel/core": "^7.4.5",
     "babel-polyfill": "^6.26.0",
     "babel-preset-react-app": "^9.0.0",
-    "codecov": "^3.0.0",
-    "concurrently": "^4.0.1",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "enzyme-to-json": "^3.3.3",
-    "eslint": "^5.9.0",
+    "codecov": "^3.5.0",
+    "concurrently": "^4.1.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "enzyme-to-json": "^3.3.5",
+    "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.5.1",
-    "express": "^4.16.2",
-    "react-mock-router": "^1.0.11",
-    "react-scripts": "^3.0.0",
-    "tslint": "^5.16.0",
+    "eslint-plugin-import": "^2.17.3",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-react": "^7.13.0",
+    "express": "^4.17.1",
+    "react-mock-router": "^1.0.15",
+    "react-scripts": "^3.0.1",
+    "tslint": "^5.17.0",
     "tslint-react": "^4.0.0"
   },
   "keywords": [

src/AppContainer/createContext.js

@@ -2,20 +2,15 @@ import {
   create,
   SheetsRegistry,
 } from 'jss'
-import { jssPreset } from '@material-ui/core/styles'
-import createGenerateClassName from '@material-ui/core/styles/createGenerateClassName'
+import { jssPreset, createGenerateClassName } from '@material-ui/styles'
 
 // Configure JSS
 const jss = create(jssPreset())
 jss.options.createGenerateClassName = createGenerateClassName
 
-export const sheetsManager = new Map()
-
 export default function createContext() {
   return {
     jss,
-    // This is needed in order to deduplicate the injection of CSS in the page.
-    sheetsManager,
     // This is needed in order to inject the critical CSS.
     sheetsRegistry: new SheetsRegistry(),
   }

src/AppContainer/withRoot.jsx

@@ -40,7 +40,7 @@ const withRoot = (BaseComponent, props) => {
     render() {
       return (
         <JssProvider registry={context.sheetsRegistry} jss={context.jss}>
-          <MuiThemeProvider theme={props.theme} sheetsManager={context.sheetsManager}>
+          <MuiThemeProvider theme={props.theme}>
             <AppWrapper>
               <BaseComponent {...this.props} />
             </AppWrapper>

src/Base/Base.jsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { withRouter } from 'react-router-dom'
-
-import BaseBranch from './BaseBranch'
 
 import Cookie from '../CookieInfo/Cookie'
+import BaseBranch from './BaseBranch'
 
 const withBase = Component => class extends React.Component {
   static propTypes = {
@@ -108,4 +106,4 @@ const withBase = Component => class extends React.Component {
 
 const WithBase = withBase(BaseBranch)
 
-export default withRouter(WithBase)
+export default WithBase

src/Form/Form.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { withRouter } from 'react-router-dom'
 
 import FormBranch from './FormBranch'
 import isValid from './isValid'
@@ -167,6 +166,4 @@ const withForm = Component => class Form extends React.Component {
   }
 }
 
-const newForm = withForm(FormBranch)
-
-export default withRouter(newForm)
+export default withForm(FormBranch)

src/Form/FormFieldDate.jsx

@@ -12,7 +12,7 @@ import {
   DateTimePicker,
   DatePicker,
   TimePicker,
-} from 'material-ui-pickers'
+} from '@material-ui/pickers'
 
 import { TYPES } from './constants'