Update dependencies & change to React-router v5

browser/main/TopBar/index.js

@@ -7,6 +7,8 @@ import ee from 'browser/main/lib/eventEmitter'
 import NewNoteButton from 'browser/main/NewNoteButton'
 import i18n from 'browser/lib/i18n'
 import debounce from 'lodash/debounce'
+import { push } from 'connected-react-router'
+import queryString from 'query-string'
 
 class TopBar extends React.Component {
   constructor (props) {
@@ -26,6 +28,8 @@ class TopBar extends React.Component {
     }
 
     this.codeInitHandler = this.handleCodeInit.bind(this)
+    this.updateKeyword = this.updateKeyword.bind(this)
+    this.handleSearchClearButton = this.handleSearchClearButton.bind(this)
 
     this.updateKeyword = debounce(this.updateKeyword, 1000 / 60, {
       maxWait: 1000 / 8
@@ -33,8 +37,8 @@ class TopBar extends React.Component {
   }
 
   componentDidMount () {
-    const { params } = this.props
-    const searchWord = params.searchword
+    const { match: { params } } = this.props
+    const searchWord = params && params.searchword
     if (searchWord !== undefined) {
       this.setState({
         search: searchWord,
@@ -51,13 +55,13 @@ class TopBar extends React.Component {
   }
 
   handleSearchClearButton (e) {
-    const { router } = this.context
+    const { dispatch } = this.props
     this.setState({
       search: '',
       isSearching: false
     })
     this.refs.search.childNodes[0].blur
-    router.push('/searched')
+    dispatch(push('/searched'))
     e.preventDefault()
   }
 
@@ -124,7 +128,8 @@ class TopBar extends React.Component {
   }
 
   updateKeyword (keyword) {
-    this.context.router.push(`/searched/${encodeURIComponent(keyword)}`)
+    const { dispatch } = this.props
+    dispatch(push(`/searched/${encodeURIComponent(keyword)}`))
     this.setState({
       search: keyword
     })
@@ -210,8 +215,8 @@ class TopBar extends React.Component {
             'dispatch',
             'data',
             'config',
-            'params',
-            'location'
+            'location',
+            'match'
           ])}
         />}
       </div>