Upgrade React & React-DOM & React-Router + adding DevTools

.babelrc

@@ -7,7 +7,7 @@
     "test": {
       "presets": ["env" ,"react", "es2015"],
       "plugins": [
-        [ "babel-plugin-webpack-alias", { "config": "${PWD}/webpack.config.js" } ]
+        [ "babel-plugin-webpack-alias", { "config": "<rootDir>/webpack.config.js" } ]
       ]
     }
   }

browser/components/MarkdownPreview.js

@@ -1015,15 +1015,19 @@ export default class MarkdownPreview extends React.Component {
     e.preventDefault()
     e.stopPropagation()
 
-    const href = e.target.getAttribute('href')
-    const linkHash = href.split('/').pop()
+    const rawHref = e.target.getAttribute('href')
+    const parser = document.createElement('a')
+    parser.href = e.target.getAttribute('href')
+    const { href, hash } = parser
+    const linkHash = hash === '' ? rawHref : hash // needed because we're having special link formats that are removed by parser e.g. :line:10
 
-    if (!href) return
+    if (!rawHref) return // not checked href because parser will create file://... string for [empty link]()
 
-    const regexNoteInternalLink = /main.html#(.+)/
-    if (regexNoteInternalLink.test(linkHash)) {
-      const targetId = mdurl.encode(linkHash.match(regexNoteInternalLink)[1])
-      const targetElement = this.refs.root.contentWindow.document.getElementById(
+    const regexNoteInternalLink = /.*[main.\w]*.html#/
+
+    if (regexNoteInternalLink.test(href)) {
+      const targetId = mdurl.encode(linkHash)
+      const targetElement = this.refs.root.contentWindow.document.querySelector(
         targetId
       )
 

browser/lib/CSSModules.js

@@ -1,5 +1,5 @@
 import CSSModules from 'react-css-modules'
 
 export default function (component, styles) {
-  return CSSModules(component, styles, {errorWhenNotFound: false})
+  return CSSModules(component, styles, {handleNotFoundStyleName: 'log'})
 }

browser/lib/newNote.js

@@ -1,7 +1,8 @@
-import { hashHistory } from 'react-router'
 import dataApi from 'browser/main/lib/dataApi'
 import ee from 'browser/main/lib/eventEmitter'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import queryString from 'query-string'
+import { push } from 'connected-react-router'
 
 export function createMarkdownNote (storage, folder, dispatch, location, params, config) {
   AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_MARKDOWN')
@@ -28,10 +29,10 @@ export function createMarkdownNote (storage, folder, dispatch, location, params,
         note: note
       })
 
-      hashHistory.push({
+      dispatch(push({
         pathname: location.pathname,
-        query: { key: noteHash }
-      })
+        search: queryString.stringify({ key: noteHash })
+      }))
       ee.emit('list:jump', noteHash)
       ee.emit('detail:focus')
     })
@@ -70,10 +71,10 @@ export function createSnippetNote (storage, folder, dispatch, location, params,
         type: 'UPDATE_NOTE',
         note: note
       })
-      hashHistory.push({
+      dispatch(push({
         pathname: location.pathname,
-        query: { key: noteHash }
-      })
+        search: queryString.stringify({ key: noteHash })
+      }))
       ee.emit('list:jump', noteHash)
       ee.emit('detail:focus')
     })

browser/main/Detail/MarkdownNoteDetail.js

@@ -9,7 +9,6 @@ import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
 import dataApi from 'browser/main/lib/dataApi'
-import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
 import markdown from 'browser/lib/markdownTextHelper'
 import StatusBar from '../StatusBar'
@@ -30,6 +29,8 @@ import { getTodoPercentageOfCompleted } from 'browser/lib/getTodoStatus'
 import striptags from 'striptags'
 import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
 import markdownToc from 'browser/lib/markdown-toc-generator'
+import queryString from 'query-string'
+import { replace } from 'connected-react-router'
 
 class MarkdownNoteDetail extends React.Component {
   constructor (props) {
@@ -140,6 +141,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleFolderChange (e) {
+    const { dispatch } = this.props
     const { note } = this.state
     const value = this.refs.folder.value
     const splitted = value.split('-')
@@ -159,12 +161,12 @@ class MarkdownNoteDetail extends React.Component {
             originNote: note,
             note: newNote
           })
-          hashHistory.replace({
+          dispatch(replace({
             pathname: location.pathname,
-            query: {
+            search: queryString.stringify({
               key: newNote.key
-            }
-          })
+            })
+          }))
           this.setState({
             isMovingNote: false
           })
@@ -491,7 +493,7 @@ class MarkdownNoteDetail extends React.Component {
         <InfoPanel
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}
-          noteLink={`[${note.title}](:note:${location.query.key})`}
+          noteLink={`[${note.title}](:note:${queryString.parse(location.search).key})`}
           updatedAt={formatDate(note.updatedAt)}
           createdAt={formatDate(note.createdAt)}
           exportAsMd={this.exportAsMd}

browser/main/Detail/SnippetNoteDetail.js

@@ -8,7 +8,6 @@ import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
 import dataApi from 'browser/main/lib/dataApi'
-import {hashHistory} from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
 import CodeMirror from 'codemirror'
 import 'codemirror-mode-elixir'
@@ -18,7 +17,6 @@ import context from 'browser/lib/context'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import _ from 'lodash'
 import {findNoteTitle} from 'browser/lib/findNoteTitle'
-import convertModeName from 'browser/lib/convertModeName'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import FullscreenButton from './FullscreenButton'
 import TrashButton from './TrashButton'
@@ -31,6 +29,8 @@ import { formatDate } from 'browser/lib/date-formatter'
 import i18n from 'browser/lib/i18n'
 import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
 import markdownToc from 'browser/lib/markdown-toc-generator'
+import queryString from 'query-string'
+import { replace } from 'connected-react-router'
 
 const electron = require('electron')
 const { remote } = electron
@@ -166,12 +166,12 @@ class SnippetNoteDetail extends React.Component {
             originNote: note,
             note: newNote
           })
-          hashHistory.replace({
+          dispatch(replace({
             pathname: location.pathname,
-            query: {
+            search: queryString.stringify({
               key: newNote.key
-            }
-          })
+            })
+          }))
           this.setState({
             isMovingNote: false
           })
@@ -814,7 +814,7 @@ class SnippetNoteDetail extends React.Component {
         <InfoPanel
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}
-          noteLink={`[${note.title}](:note:${location.query.key})`}
+          noteLink={`[${note.title}](:note:${queryString.parse(location.search).key})`}
           updatedAt={formatDate(note.updatedAt)}
           createdAt={formatDate(note.createdAt)}
           exportAsMd={this.showWarning}

browser/main/Detail/index.js

@@ -10,6 +10,7 @@ import StatusBar from '../StatusBar'
 import i18n from 'browser/lib/i18n'
 import debounceRender from 'react-debounce-render'
 import searchFromNotes from 'browser/lib/search'
+import queryString from 'query-string'
 
 const OSX = global.process.platform === 'darwin'
 
@@ -36,11 +37,11 @@ class Detail extends React.Component {
   }
 
   render () {
-    const { location, data, params, config } = this.props
+    const { location, data, match: { params }, config } = this.props
+    const noteKey = location.search !== '' && queryString.parse(location.search).key
     let note = null
 
-    if (location.query.key != null) {
-      const noteKey = location.query.key
+    if (location.search !== '') {
       const allNotes = data.noteMap.map(note => note)
       const trashedNotes = data.trashedSet.toJS().map(uniqueKey => data.noteMap.get(uniqueKey))
       let displayedNotes = allNotes

browser/main/DevTools/index.dev.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { createDevTools } from 'redux-devtools'
+import LogMonitor from 'redux-devtools-log-monitor'
+import DockMonitor from 'redux-devtools-dock-monitor'
+
+const DevTools = createDevTools(
+  <DockMonitor
+    toggleVisibilityKey='ctrl-h'
+    changePositionKey='ctrl-q'
+    defaultIsVisible={false}
+  >
+    <LogMonitor theme='tomorrow' />
+  </DockMonitor>
+)
+
+export default DevTools

browser/main/DevTools/index.js

@@ -0,0 +1,8 @@
+/* eslint-disable no-undef */
+if (process.env.NODE_ENV === 'production') {
+  // eslint-disable-next-line global-require
+  module.exports = require('./index.prod').default
+} else {
+  // eslint-disable-next-line global-require
+  module.exports = require('./index.dev').default
+}

browser/main/DevTools/index.prod.js

@@ -0,0 +1,6 @@
+import React from 'react'
+
+const DevTools = () => <div />
+DevTools.instrument = () => {}
+
+export default DevTools

browser/main/Main.js

@@ -12,11 +12,11 @@ import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import eventEmitter from 'browser/main/lib/eventEmitter'
-import { hashHistory } from 'react-router'
-import store from 'browser/main/store'
+import { store } from 'browser/main/store'
 import i18n from 'browser/lib/i18n'
 import { getLocales } from 'browser/lib/Languages'
 import applyShortcuts from 'browser/main/lib/shortcutManager'
+import { push } from 'connected-react-router'
 const path = require('path')
 const electron = require('electron')
 const { remote } = electron
@@ -132,7 +132,7 @@ class Main extends React.Component {
           .then(() => data.storage)
       })
       .then(storage => {
-        hashHistory.push('/storages/' + storage.key)
+        store.dispatch(push('/storages/' + storage.key))
       })
       .catch(err => {
         throw err
@@ -311,7 +311,7 @@ class Main extends React.Component {
         onMouseUp={e => this.handleMouseUp(e)}
       >
         <SideNav
-          {..._.pick(this.props, ['dispatch', 'data', 'config', 'params', 'location'])}
+          {..._.pick(this.props, ['dispatch', 'data', 'config', 'match', 'location'])}
           width={this.state.navWidth}
         />
         {!config.isSideNavFolded &&
@@ -341,7 +341,7 @@ class Main extends React.Component {
               'dispatch',
               'config',
               'data',
-              'params',
+              'match',
               'location'
             ])}
           />
@@ -351,7 +351,7 @@ class Main extends React.Component {
               'dispatch',
               'data',
               'config',
-              'params',
+              'match',
               'location'
             ])}
           />
@@ -373,7 +373,7 @@ class Main extends React.Component {
               'dispatch',
               'data',
               'config',
-              'params',
+              'match',
               'location'
             ])}
             ignorePreviewPointerEvents={this.state.isRightSliderFocused}

browser/main/NewNoteButton/index.js

@@ -21,23 +21,20 @@ class NewNoteButton extends React.Component {
     this.state = {
     }
 
-    this.newNoteHandler = () => {
-      this.handleNewNoteButtonClick()
-    }
+    this.handleNewNoteButtonClick = this.handleNewNoteButtonClick.bind(this)
   }
 
   componentDidMount () {
-    eventEmitter.on('top:new-note', this.newNoteHandler)
+    eventEmitter.on('top:new-note', this.handleNewNoteButtonClick)
   }
 
   componentWillUnmount () {
-    eventEmitter.off('top:new-note', this.newNoteHandler)
+    eventEmitter.off('top:new-note', this.handleNewNoteButtonClick)
   }
 
   handleNewNoteButtonClick (e) {
-    const { location, params, dispatch, config } = this.props
+    const { location, dispatch, match: { params }, config } = this.props
     const { storage, folder } = this.resolveTargetFolder()
-
     if (config.ui.defaultNote === 'MARKDOWN_NOTE') {
       createMarkdownNote(storage.key, folder.key, dispatch, location, params, config)
     } else if (config.ui.defaultNote === 'SNIPPET_NOTE') {
@@ -55,9 +52,8 @@ class NewNoteButton extends React.Component {
   }
 
   resolveTargetFolder () {
-    const { data, params } = this.props
+    const { data, match: { params } } = this.props
     let storage = data.storageMap.get(params.storageKey)
-
     // Find first storage
     if (storage == null) {
       for (const kv of data.storageMap) {
@@ -93,7 +89,7 @@ class NewNoteButton extends React.Component {
       >
         <div styleName='control'>
           <button styleName='control-newNoteButton'
-            onClick={(e) => this.handleNewNoteButtonClick(e)}>
+            onClick={this.handleNewNoteButtonClick}>
             <img styleName='iconTag' src='../resources/icon/icon-newnote.svg' />
             <span styleName='control-newNoteButton-tooltip'>
               {i18n.__('Make a note')} {OSX ? '⌘' : i18n.__('Ctrl')} + N