Use useHistory from react-router

Author: xcv58

package.json

@@ -19,9 +19,9 @@
     "test": "yarn lint && yarn build"
   },
   "dependencies": {
-    "@material-ui/core": "^4.5.1",
-    "@material-ui/styles": "^4.5.0",
-    "chrome-extension-async": "^3.4.0",
+    "@material-ui/core": "^4.6.0",
+    "@material-ui/styles": "^4.6.0",
+    "chrome-extension-async": "^3.4.1",
     "clean-webpack-plugin": "^3.0.0",
     "js-beautify": "^1.10.2",
     "lodash": "^4.17.15",
@@ -36,12 +36,12 @@
   },
   "devDependencies": {
     "@types/chrome": "^0.0.91",
-    "@types/jasmine": "^3.4.4",
-    "@types/jest": "^24.0.20",
+    "@types/jasmine": "^3.4.6",
+    "@types/jest": "^24.0.22",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.3",
-    "@typescript-eslint/eslint-plugin": "^2.5.0",
-    "@typescript-eslint/parser": "^2.5.0",
+    "@typescript-eslint/eslint-plugin": "^2.6.1",
+    "@typescript-eslint/parser": "^2.6.1",
     "babel-eslint": "^10.0.3",
     "chrome-webstore-upload-cli": "^1.2.0",
     "codecov": "^3.6.1",
@@ -54,7 +54,7 @@
     "eslint": "^6.6.0",
     "eslint-plugin-typescript": "^0.14.0",
     "file-loader": "^4.2.0",
-    "fork-ts-checker-webpack-plugin": "^2.0.0",
+    "fork-ts-checker-webpack-plugin": "^3.0.1",
     "hard-source-webpack-plugin": "^0.13.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
@@ -78,9 +78,9 @@
     "terser-webpack-plugin": "^2.2.1",
     "ts-jest": "^24.1.0",
     "ts-loader": "^6.2.1",
-    "typescript": "^3.6.4",
+    "typescript": "^3.7.2",
     "typescript-eslint-parser": "^22.0.0",
-    "web-ext": "^3.2.0",
+    "web-ext": "^3.2.1",
     "webpack": "4.39.3",
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-dev-server": "^3.9.0",

src/js/components/Hosts.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { getHostKey } from 'libs'
-import { withRouter } from 'react-router'
+import { useHistory } from 'react-router-dom'
 import queryString from 'query-string'
 import { useStore } from './StoreContext'
 import { observer } from 'mobx-react'
 import { MenuItem, FormControl, Select } from '@material-ui/core'
 
-const Hosts = observer(props => {
+export default observer(props => {
+  const history = useHistory()
   const { hosts, matchedHost = '' } = useStore().AppStore
   const options = hosts.map(host => {
     const key = getHostKey(host)
@@ -29,13 +30,11 @@ const Hosts = observer(props => {
           } else {
             Object.assign(query, value)
           }
-          props.history.push(`?${queryString.stringify(query)}`)
+          history.push(`?${queryString.stringify(query)}`)
         }}
       >
         {options}
       </Select>
     </FormControl>
   )
 })
-
-export default withRouter(Hosts)

src/js/components/NewPattern.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { withRouter } from 'react-router'
+import { useHistory } from 'react-router-dom'
 import queryString from 'query-string'
 import { useStore } from './StoreContext'
 import { observer } from 'mobx-react'
@@ -26,49 +26,48 @@ const Content = () => (
   </DialogContentText>
 )
 
-const NewPatternDialog = withRouter(
-  observer(props => {
-    const { NewPatternStore } = useStore()
-    const { closeDialog, error, validPattern, pattern } = NewPatternStore
-    return (
-      <Dialog open onClose={closeDialog}>
-        <DialogTitle>New RegExp Pattern</DialogTitle>
-        <DialogContent>
-          <Content />
-          <FormControl fullWidth error={!validPattern}>
-            <TextField
-              autoFocus
-              margin='dense'
-              type='text'
-              placeholder='.*github.com'
-              label='RegExp Pattern'
-              error={!validPattern}
-              value={pattern}
-              onChange={e => {
-                NewPatternStore.setPattern(e.target.value)
-              }}
-            />
-            <FormHelperText>{error}</FormHelperText>
-          </FormControl>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={closeDialog}>Cancel</Button>
-          <Button
-            color='primary'
-            onClick={() => {
-              const { addToHosts, host } = NewPatternStore
-              addToHosts()
-              props.history.push(`?${queryString.stringify(host)}`)
+const NewPatternDialog = observer(() => {
+  const history = useHistory()
+  const { NewPatternStore } = useStore()
+  const { closeDialog, error, validPattern, pattern } = NewPatternStore
+  return (
+    <Dialog open onClose={closeDialog}>
+      <DialogTitle>New RegExp Pattern</DialogTitle>
+      <DialogContent>
+        <Content />
+        <FormControl fullWidth error={!validPattern}>
+          <TextField
+            autoFocus
+            margin='dense'
+            type='text'
+            placeholder='.*github.com'
+            label='RegExp Pattern'
+            error={!validPattern}
+            value={pattern}
+            onChange={e => {
+              NewPatternStore.setPattern(e.target.value)
             }}
-            disabled={!validPattern}
-          >
-            Add
-          </Button>
-        </DialogActions>
-      </Dialog>
-    )
-  })
-)
+          />
+          <FormHelperText>{error}</FormHelperText>
+        </FormControl>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={closeDialog}>Cancel</Button>
+        <Button
+          color='primary'
+          onClick={() => {
+            const { addToHosts, host } = NewPatternStore
+            addToHosts()
+            history.push(`?${queryString.stringify(host)}`)
+          }}
+          disabled={!validPattern}
+        >
+          Add
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+})
 
 export default observer(() => {
   // TODO: support to use current domain