From b6212f4bfeb5ba65e882c3cf91291a550eb60bd5 Mon Sep 17 00:00:00 2001 From: AWolf81 Date: Fri, 3 May 2019 23:53:00 +0200 Subject: [PATCH] Update dependencies & change to React-router v5 --- .babelrc | 2 +- browser/lib/CSSModules.js | 2 +- browser/lib/newNote.js | 12 +- browser/main/Detail/MarkdownNoteDetail.js | 12 +- browser/main/Detail/SnippetNoteDetail.js | 13 +- browser/main/Detail/index.js | 7 +- browser/main/Main.js | 14 +- browser/main/NewNoteButton/index.js | 11 +- browser/main/NoteList/index.js | 112 ++-- browser/main/SideNav/StorageItem.js | 7 +- browser/main/SideNav/index.js | 34 +- browser/main/TopBar/index.js | 19 +- browser/main/index.js | 52 +- browser/main/lib/modal.js | 2 +- browser/main/modals/CreateFolderModal.js | 2 +- browser/main/modals/NewNoteModal.js | 7 +- browser/main/modals/PreferencesModal/Blog.js | 2 +- .../modals/PreferencesModal/FolderItem.js | 2 +- .../modals/PreferencesModal/FolderList.js | 2 +- .../main/modals/PreferencesModal/HotkeyTab.js | 2 +- .../main/modals/PreferencesModal/InfoTab.js | 2 +- .../modals/PreferencesModal/StorageItem.js | 2 +- browser/main/modals/PreferencesModal/UiTab.js | 2 +- browser/main/modals/RenameFolderModal.js | 2 +- browser/main/store.js | 20 +- lib/main-window.js | 27 + lib/main.html | 4 +- package.json | 30 +- yarn.lock | 534 ++++++++++++++---- 29 files changed, 668 insertions(+), 271 deletions(-) diff --git a/.babelrc b/.babelrc index 270349d2..3a366286 100644 --- a/.babelrc +++ b/.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": "/webpack.config.js" } ] ] } } diff --git a/browser/lib/CSSModules.js b/browser/lib/CSSModules.js index 181274f4..691b44d2 100644 --- a/browser/lib/CSSModules.js +++ b/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'}) } diff --git a/browser/lib/newNote.js b/browser/lib/newNote.js index d8ef196f..149961d2 100644 --- a/browser/lib/newNote.js +++ b/browser/lib/newNote.js @@ -1,7 +1,9 @@ -import { hashHistory } from 'react-router' +// import { hashHistory } from 'react-router' +import { history } from 'browser/main/store' 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' export function createMarkdownNote (storage, folder, dispatch, location, params, config) { AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_MARKDOWN') @@ -28,9 +30,9 @@ export function createMarkdownNote (storage, folder, dispatch, location, params, note: note }) - hashHistory.push({ + history.push({ pathname: location.pathname, - query: { key: noteHash } + search: queryString.stringify({ key: noteHash }) }) ee.emit('list:jump', noteHash) ee.emit('detail:focus') @@ -70,9 +72,9 @@ export function createSnippetNote (storage, folder, dispatch, location, params, type: 'UPDATE_NOTE', note: note }) - hashHistory.push({ + history.push({ pathname: location.pathname, - query: { key: noteHash } + search: queryString.stringify({ key: noteHash }) }) ee.emit('list:jump', noteHash) ee.emit('detail:focus') diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index cf3be072..5bd67d72 100755 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -9,7 +9,8 @@ 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 { hashHistory } from 'react-router' +import { history } from 'browser/main/store' import ee from 'browser/main/lib/eventEmitter' import markdown from 'browser/lib/markdownTextHelper' import StatusBar from '../StatusBar' @@ -30,6 +31,7 @@ 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' class MarkdownNoteDetail extends React.Component { constructor (props) { @@ -159,11 +161,11 @@ class MarkdownNoteDetail extends React.Component { originNote: note, note: newNote }) - hashHistory.replace({ + history.replace({ pathname: location.pathname, - query: { + search: queryString.stringify({ key: newNote.key - } + }) }) this.setState({ isMovingNote: false @@ -491,7 +493,7 @@ class MarkdownNoteDetail extends React.Component { note) const trashedNotes = data.trashedSet.toJS().map(uniqueKey => data.noteMap.get(uniqueKey)) let displayedNotes = allNotes diff --git a/browser/main/Main.js b/browser/main/Main.js index 26fc8377..0742cd03 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -12,8 +12,8 @@ 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 { hashHistory } from 'react-router' +import { store, history } from 'browser/main/store' import i18n from 'browser/lib/i18n' import { getLocales } from 'browser/lib/Languages' import applyShortcuts from 'browser/main/lib/shortcutManager' @@ -132,7 +132,7 @@ class Main extends React.Component { .then(() => data.storage) }) .then(storage => { - hashHistory.push('/storages/' + storage.key) + history.push('/storages/' + storage.key) }) .catch(err => { throw err @@ -311,7 +311,7 @@ class Main extends React.Component { onMouseUp={e => this.handleMouseUp(e)} > {!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} diff --git a/browser/main/NewNoteButton/index.js b/browser/main/NewNoteButton/index.js index c34443be..63dab8d1 100644 --- a/browser/main/NewNoteButton/index.js +++ b/browser/main/NewNoteButton/index.js @@ -21,6 +21,9 @@ class NewNoteButton extends React.Component { this.state = { } + this.handleNewNoteButtonClick = this.handleNewNoteButtonClick.bind(this) + + // why is there a newNoteHandler?! this.newNoteHandler = () => { this.handleNewNoteButtonClick() } @@ -35,9 +38,8 @@ class NewNoteButton extends React.Component { } 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 +57,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 +94,7 @@ class NewNoteButton extends React.Component { >
diff --git a/browser/main/index.js b/browser/main/index.js index 6e8bdcc5..b3a909e5 100644 --- a/browser/main/index.js +++ b/browser/main/index.js @@ -1,11 +1,13 @@ import { Provider } from 'react-redux' import Main from './Main' -import store from './store' -import React from 'react' +import { store, history } from './store' +import React, { Fragment } from 'react' import ReactDOM from 'react-dom' require('!!style!css!stylus?sourceMap!./global.styl') -import { Router, Route, IndexRoute, IndexRedirect, hashHistory } from 'react-router' -import { syncHistoryWithStore } from 'react-router-redux' +import { Route, Switch, Redirect } from 'react-router-dom' +import { ConnectedRouter } from 'connected-react-router' +import DevTools from './DevTools' + require('./lib/ipcClient') require('../lib/customMeta') import i18n from 'browser/lib/i18n' @@ -77,7 +79,6 @@ document.addEventListener('click', function (e) { }) const el = document.getElementById('content') -const history = syncHistoryWithStore(hashHistory, store) function notify (...args) { return new window.Notification(...args) @@ -98,29 +99,24 @@ function updateApp () { ReactDOM.render(( - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + {/* storages */} + + + + + + + ), el, function () { const loadingCover = document.getElementById('loadingCover') diff --git a/browser/main/lib/modal.js b/browser/main/lib/modal.js index 7a7a9c8c..955cb5c8 100644 --- a/browser/main/lib/modal.js +++ b/browser/main/lib/modal.js @@ -1,7 +1,7 @@ import React from 'react' import { Provider } from 'react-redux' import ReactDOM from 'react-dom' -import store from '../store' +import { store } from '../store' class ModalBase extends React.Component { constructor (props) { diff --git a/browser/main/modals/CreateFolderModal.js b/browser/main/modals/CreateFolderModal.js index b061b0f3..b48d6e42 100644 --- a/browser/main/modals/CreateFolderModal.js +++ b/browser/main/modals/CreateFolderModal.js @@ -3,7 +3,7 @@ import React from 'react' import CSSModules from 'browser/lib/CSSModules' import styles from './CreateFolderModal.styl' import dataApi from 'browser/main/lib/dataApi' -import store from 'browser/main/store' +import { store } from 'browser/main/store' import consts from 'browser/lib/consts' import ModalEscButton from 'browser/components/ModalEscButton' import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig' diff --git a/browser/main/modals/NewNoteModal.js b/browser/main/modals/NewNoteModal.js index 41c174cb..a17a36cd 100644 --- a/browser/main/modals/NewNoteModal.js +++ b/browser/main/modals/NewNoteModal.js @@ -4,6 +4,7 @@ import styles from './NewNoteModal.styl' import ModalEscButton from 'browser/components/ModalEscButton' import i18n from 'browser/lib/i18n' import { createMarkdownNote, createSnippetNote } from 'browser/lib/newNote' +import queryString from 'query-string' class NewNoteModal extends React.Component { constructor (props) { @@ -21,7 +22,8 @@ class NewNoteModal extends React.Component { } handleMarkdownNoteButtonClick (e) { - const { storage, folder, dispatch, location, params, config } = this.props + const { storage, folder, dispatch, location, config } = this.props + const params = location.search !== '' && queryString.parse(location.search) if (!this.lock) { this.lock = true createMarkdownNote(storage, folder, dispatch, location, params, config).then(() => { @@ -38,7 +40,8 @@ class NewNoteModal extends React.Component { } handleSnippetNoteButtonClick (e) { - const { storage, folder, dispatch, location, params, config } = this.props + const { storage, folder, dispatch, location, config } = this.props + const params = location.search !== '' && queryString.parse(location.search) if (!this.lock) { this.lock = true createSnippetNote(storage, folder, dispatch, location, params, config).then(() => { diff --git a/browser/main/modals/PreferencesModal/Blog.js b/browser/main/modals/PreferencesModal/Blog.js index 2c93fb29..4d59bea1 100644 --- a/browser/main/modals/PreferencesModal/Blog.js +++ b/browser/main/modals/PreferencesModal/Blog.js @@ -2,7 +2,7 @@ import React from 'react' import CSSModules from 'browser/lib/CSSModules' import styles from './ConfigTab.styl' import ConfigManager from 'browser/main/lib/ConfigManager' -import store from 'browser/main/store' +import { store } from 'browser/main/store' import PropTypes from 'prop-types' import _ from 'lodash' import i18n from 'browser/lib/i18n' diff --git a/browser/main/modals/PreferencesModal/FolderItem.js b/browser/main/modals/PreferencesModal/FolderItem.js index dc9082b9..e6bd1e37 100644 --- a/browser/main/modals/PreferencesModal/FolderItem.js +++ b/browser/main/modals/PreferencesModal/FolderItem.js @@ -4,7 +4,7 @@ import CSSModules from 'browser/lib/CSSModules' import ReactDOM from 'react-dom' import styles from './FolderItem.styl' import dataApi from 'browser/main/lib/dataApi' -import store from 'browser/main/store' +import { store } from 'browser/main/store' import { SketchPicker } from 'react-color' import { SortableElement, SortableHandle } from 'react-sortable-hoc' import i18n from 'browser/lib/i18n' diff --git a/browser/main/modals/PreferencesModal/FolderList.js b/browser/main/modals/PreferencesModal/FolderList.js index e7cc6f94..02f5cee9 100644 --- a/browser/main/modals/PreferencesModal/FolderList.js +++ b/browser/main/modals/PreferencesModal/FolderList.js @@ -3,7 +3,7 @@ import React from 'react' import CSSModules from 'browser/lib/CSSModules' import dataApi from 'browser/main/lib/dataApi' import styles from './FolderList.styl' -import store from 'browser/main/store' +import { store } from 'browser/main/store' import FolderItem from './FolderItem' import { SortableContainer } from 'react-sortable-hoc' import i18n from 'browser/lib/i18n' diff --git a/browser/main/modals/PreferencesModal/HotkeyTab.js b/browser/main/modals/PreferencesModal/HotkeyTab.js index 218a68f6..713f6a65 100644 --- a/browser/main/modals/PreferencesModal/HotkeyTab.js +++ b/browser/main/modals/PreferencesModal/HotkeyTab.js @@ -3,7 +3,7 @@ import React from 'react' import CSSModules from 'browser/lib/CSSModules' import styles from './ConfigTab.styl' import ConfigManager from 'browser/main/lib/ConfigManager' -import store from 'browser/main/store' +import { store } from 'browser/main/store' import _ from 'lodash' import i18n from 'browser/lib/i18n' diff --git a/browser/main/modals/PreferencesModal/InfoTab.js b/browser/main/modals/PreferencesModal/InfoTab.js index 8682f62d..71e99da9 100644 --- a/browser/main/modals/PreferencesModal/InfoTab.js +++ b/browser/main/modals/PreferencesModal/InfoTab.js @@ -2,7 +2,7 @@ import React from 'react' import CSSModules from 'browser/lib/CSSModules' import styles from './InfoTab.styl' import ConfigManager from 'browser/main/lib/ConfigManager' -import store from 'browser/main/store' +import { store } from 'browser/main/store' import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig' import _ from 'lodash' import i18n from 'browser/lib/i18n' diff --git a/browser/main/modals/PreferencesModal/StorageItem.js b/browser/main/modals/PreferencesModal/StorageItem.js index 3a2b075c..9af02962 100644 --- a/browser/main/modals/PreferencesModal/StorageItem.js +++ b/browser/main/modals/PreferencesModal/StorageItem.js @@ -4,7 +4,7 @@ import CSSModules from 'browser/lib/CSSModules' import styles from './StorageItem.styl' import consts from 'browser/lib/consts' import dataApi from 'browser/main/lib/dataApi' -import store from 'browser/main/store' +import { store } from 'browser/main/store' import FolderList from './FolderList' import i18n from 'browser/lib/i18n' diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index 5de4b12b..f74dbda5 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -3,7 +3,7 @@ import React from 'react' import CSSModules from 'browser/lib/CSSModules' import styles from './ConfigTab.styl' import ConfigManager from 'browser/main/lib/ConfigManager' -import store from 'browser/main/store' +import { store } from 'browser/main/store' import consts from 'browser/lib/consts' import ReactCodeMirror from 'react-codemirror' import CodeMirror from 'codemirror' diff --git a/browser/main/modals/RenameFolderModal.js b/browser/main/modals/RenameFolderModal.js index edbcee67..9fdd70c8 100644 --- a/browser/main/modals/RenameFolderModal.js +++ b/browser/main/modals/RenameFolderModal.js @@ -3,7 +3,7 @@ import React from 'react' import CSSModules from 'browser/lib/CSSModules' import styles from './RenameFolderModal.styl' import dataApi from 'browser/main/lib/dataApi' -import store from 'browser/main/store' +import { store } from 'browser/main/store' import ModalEscButton from 'browser/components/ModalEscButton' import i18n from 'browser/lib/i18n' diff --git a/browser/main/store.js b/browser/main/store.js index 5edc115f..91152aff 100644 --- a/browser/main/store.js +++ b/browser/main/store.js @@ -1,8 +1,10 @@ -import { combineReducers, createStore } from 'redux' -import { routerReducer } from 'react-router-redux' +import { combineReducers, createStore, compose, applyMiddleware } from 'redux' +import { connectRouter, routerMiddleware } from 'connected-react-router' +import { createHashHistory as createHistory } from 'history' import ConfigManager from 'browser/main/lib/ConfigManager' import { Map, Set } from 'browser/lib/Mutable' import _ from 'lodash' +import DevTools from './DevTools' function defaultDataMap () { return { @@ -465,13 +467,21 @@ function getOrInitItem (target, key) { return results } +const history = createHistory() + +// Query not available in HashHistory with ReactRouter >= v4 +// Relevant Issue https://github.com/ReactTraining/react-router/issues/4410#issuecomment-293772446 +// --> moved from query to search - so we only need query-string parsing/stringify for noteKey. +// (No need to add query to history with a listener) + const reducer = combineReducers({ data, config, status, - routing: routerReducer + router: connectRouter(history) // I think we could also go with-out connected-router as we're using history with imports directly }) -const store = createStore(reducer) +const store = createStore(reducer, undefined, compose( + applyMiddleware(routerMiddleware(history)), DevTools.instrument())) -export default store +export { store, history } diff --git a/lib/main-window.js b/lib/main-window.js index 418fd442..614127e1 100644 --- a/lib/main-window.js +++ b/lib/main-window.js @@ -6,6 +6,33 @@ const Config = require('electron-config') const config = new Config() const _ = require('lodash') +// set up some chrome extensions +if (process.env.NODE_ENV === 'development') { + const { + default: installExtension, + REACT_DEVELOPER_TOOLS, + REACT_PERF + } = require('electron-devtools-installer') + + require('electron-debug')({ showDevTools: false }) + + const ChromeLens = { + // ID of the extension (https://chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd) + id: 'idikgljglpfilbhaboonnpnnincjhjkd', + electron: '>=1.2.1' + } + + const extensions = [REACT_DEVELOPER_TOOLS, REACT_PERF, ChromeLens] + + for (const extension of extensions) { + try { + installExtension(extension) + } catch (e) { + console.error(`[ELECTRON] Extension installation failed`, e) + } + } +} + const windowSize = config.get('windowsize') || { x: null, y: null, diff --git a/lib/main.html b/lib/main.html index 0d9feade..38e2cea9 100644 --- a/lib/main.html +++ b/lib/main.html @@ -141,8 +141,8 @@ - - + +