Upgrading everything, especially router

mopidy_iris/static/index.html

@@ -98,7 +98,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1546737225";
+	var build = "1547004130";
 	var version = "3.31.8";
 
 	// Construct the script tag

package.json

@@ -10,39 +10,39 @@
   },
   "main": "app.js",
   "dependencies": {
-    "babel-core": "^6.26.3",
+    "jquery": "^3",
-    "babel-loader": "^7.1.4",
+    "mopidy": "^0.5"
-    "babel-preset-es2015": "^6.22.0",
+  },
-    "babel-preset-react": "^6.22.0",
+  "devDependencies": {
-    "babel-preset-stage-0": "^6.24.1",
+    "babel-core": "^6",
-    "babel-preset-stage-2": "^6.22.0",
+    "babel-loader": "^7",
+    "babel-preset-es2015": "^6",
+    "babel-preset-react": "^6",
+    "babel-preset-stage-0": "^6",
+    "babel-preset-stage-2": "^6",
     "copy-dir": "^0.3.0",
     "css-loader": "^0.28.11",
     "expose-loader": "0.7.3",
-    "extract-text-webpack-plugin": "3.0.0",
+    "extract-text-webpack-plugin": "^3",
     "file-loader": "^0.11.2",
-    "flux": "^3.1.3",
     "fs-copy-file": "2.1.2",
-    "jquery": "^3.2.1",
     "md5": "2.2.1",
-    "mopidy": "^0.5.0",
+    "node-sass": "^4",
-    "node-sass": "^4.11.0",
+    "react": "^16",
-    "react": "^16.3.0",
+    "react-router-dom": "^4",
-    "react-dom": "^16.3.0",
+    "react-dom": "^16",
     "react-fontawesome": "*",
     "react-ga": "^2.3.4",
     "react-input-range": "1.3.0",
-    "react-redux": "^5.0.7",
+    "redux": "^4",
-    "react-router": "^3.2.1",
+    "react-redux": "^6",
     "react-sortablejs": "^1.3.6",
-    "redux": "3.7.2",
+    "redux-thunk": "^2",
-    "redux-devtools": "^3.4.2",
+    "sass-loader": "^6",
-    "redux-thunk": "2.2.0",
+    "sortablejs": "^1.7",
-    "sass-loader": "^6.0.7",
-    "sortablejs": "^1.7.0",
     "style-loader": "^0.13.2",
     "url-loader": "^0.5.9",
-    "webpack": "^3.11.0",
+    "webpack": "^3",
     "webpack-strip": "0.1.0"
   },
   "scripts": {

src/js/App.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import { createStore, bindActionCreators } from 'redux';
-import { hashHistory, Link } from 'react-router';
+import { BrowserRouter, Route, Link } from "react-router-dom";
 import { connect } from 'react-redux';
 import ReactGA from 'react-ga';
 
@@ -117,7 +117,7 @@ class App extends React.Component{
 				// Allow 100ms for the action above to complete before we re-route
 				setTimeout(
 					() => {
-						hashHistory.push(global.baseURL);
+						this.props.history.push(global.baseURL);
 					},
 					100
 				);
@@ -126,7 +126,7 @@ class App extends React.Component{
 
 		// show initial setup if required
 		if (!this.props.initial_setup_complete){
-			hashHistory.push(global.baseURL+'initial-setup');
+			this.props.history.push(global.baseURL+'initial-setup');
 		}
 	}
 
@@ -298,7 +298,7 @@ class App extends React.Component{
 
 			case 70: // F
 				if ((e.ctrlKey || e.metaKey) && e.shiftKey){
-					hashHistory.push(global.baseURL+'modal/kiosk-mode');
+					this.props.history.push(global.baseURL+'modal/kiosk-mode');
 				}
 				break;
 		}

src/js/components/AlbumGrid.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
-import { hashHistory } from 'react-router'
+
 
 import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
@@ -44,7 +44,7 @@ class AlbumGrid extends React.Component{
 									type="album"
 									item={album}
 									show_source_icon={this.props.show_source_icon}
-									onClick={e => {hashHistory.push(global.baseURL+'album/'+encodeURIComponent(album.uri))}}
+									onClick={e => {this.props.history.push(global.baseURL+'album/'+encodeURIComponent(album.uri))}}
 									onContextMenu={e => this.handleContextMenu(e,album)}
 								/>
 							)}

src/js/components/ArtistGrid.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
-import { hashHistory } from 'react-router'
+
 
 import Thumbnail from './Thumbnail'
 import GridItem from './GridItem'
@@ -52,7 +52,7 @@ class ArtistGrid extends React.Component{
 										type="artist"
 										item={helpers.collate(artist, {albums: this.props.albums})}
 										show_source_icon={this.props.show_source_icon}
-										onClick={e => {hashHistory.push(global.baseURL+'artist/'+encodeURIComponent(artist.uri))}}
+										onClick={e => {this.props.history.push(global.baseURL+'artist/'+encodeURIComponent(artist.uri))}}
 										lastfmActions={this.props.lastfmActions}
 										onContextMenu={e => this.handleContextMenu(e,artist)}
 										onMount={() => this.itemMounted(artist)}

src/js/components/CategoryGrid.js

@@ -1,5 +1,5 @@
 
-import { hashHistory } from 'react-router'
+
 
 import React, { PropTypes } from 'react'
 import GridItem from './GridItem'
@@ -26,7 +26,7 @@ export default class CategoryGrid extends React.Component{
 								key={category.id}
 								type="category"
 								item={category}
-								onClick={e => {hashHistory.push(global.baseURL+'discover/categories/'+encodeURIComponent(category.id))}}
+								onClick={e => {this.props.history.push(global.baseURL+'discover/categories/'+encodeURIComponent(category.id))}}
 							/>
 						)
 					})

src/js/components/ContextMenu.js

@@ -1,6 +1,6 @@
 
 import React, { PropTypes } from 'react';
-import { hashHistory } from 'react-router';
+
 import Link from './Link';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
@@ -273,7 +273,7 @@ class ContextMenu extends React.Component{
 	goToRecommendations(e){
 		this.props.uiActions.hideContextMenu();
 		var uris_string = helpers.arrayOf('uri',this.props.menu.items).join(',');
-		hashHistory.push(global.baseURL +'discover/recommendations/'+ uris_string );
+		this.props.history.push(global.baseURL +'discover/recommendations/'+ uris_string );
 	}
 
 	goToArtist(e){
@@ -283,7 +283,7 @@ class ContextMenu extends React.Component{
 			this.props.uiActions.hideContextMenu();
 			
 			// note: we can only go to one artist (even if this item has multiple artists, just go to the first one)
-			hashHistory.push(global.baseURL +'artist/'+ this.props.menu.items[0].artists_uris[0]);
+			this.props.history.push(global.baseURL +'artist/'+ this.props.menu.items[0].artists_uris[0]);
 		}
 	}
 
@@ -292,7 +292,7 @@ class ContextMenu extends React.Component{
 			return null;
 		} else {
 			this.props.uiActions.hideContextMenu();
-			hashHistory.push(global.baseURL +'user/'+ this.props.menu.items[0].user_uri);
+			this.props.history.push(global.baseURL +'user/'+ this.props.menu.items[0].user_uri);
 		}
 	}
 
@@ -301,7 +301,7 @@ class ContextMenu extends React.Component{
 			return null;
 		} else {
 			this.props.uiActions.hideContextMenu();
-			hashHistory.push(global.baseURL +'track/'+ encodeURIComponent(this.props.menu.items[0].uri));
+			this.props.history.push(global.baseURL +'track/'+ encodeURIComponent(this.props.menu.items[0].uri));
 		}
 	}
 

src/js/components/Fields/AddSeedField.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { hashHistory } from 'react-router'
+
 
 import Link from '../Link';
 import ArtistSentence from './../ArtistSentence'

src/js/components/Fields/AddTunabilityField.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { hashHistory } from 'react-router'
+
 import Link from './Link'
 
 import ArtistSentence from './../ArtistSentence'

src/js/components/Fields/Dropzones.js

@@ -1,7 +1,7 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { hashHistory } from 'react-router'
+
 import { bindActionCreators } from 'redux'
 
 import Dropzone from './Dropzone'
@@ -58,7 +58,7 @@ class Dropzones extends React.Component{
 				break
 
 			case 'add_to_playlist':
-				hashHistory.push(global.baseURL+'add-to-playlist/'+encodeURIComponent(uris.join(',')));
+				this.props.history.push(global.baseURL+'add-to-playlist/'+encodeURIComponent(uris.join(',')));
 				//uris
 				break
 		}

src/js/components/Fields/SearchForm.js

@@ -1,7 +1,7 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { hashHistory } from 'react-router'
+
 import { createStore, bindActionCreators } from 'redux'
 
 import * as helpers from '../../helpers'
@@ -24,19 +24,19 @@ class SearchForm extends React.Component{
 		switch (helpers.uriType(this.props.term)){
 
 			case 'album':
-				hashHistory.push(global.baseURL+'album/'+encodeURIComponent(this.props.term))
+				this.props.history.push(global.baseURL+'album/'+encodeURIComponent(this.props.term))
 				break
 
 			case 'artist':
-				hashHistory.push(global.baseURL+'artist/'+encodeURIComponent(this.props.term))
+				this.props.history.push(global.baseURL+'artist/'+encodeURIComponent(this.props.term))
 				break
 
 			case 'playlist':
-				hashHistory.push(global.baseURL+'playlist/'+encodeURIComponent(this.props.term))
+				this.props.history.push(global.baseURL+'playlist/'+encodeURIComponent(this.props.term))
 				break
 
 			case 'track':
-				hashHistory.push(global.baseURL+'track/'+encodeURIComponent(this.props.term))
+				this.props.history.push(global.baseURL+'track/'+encodeURIComponent(this.props.term))
 				break
 
 			default:

src/js/components/GridItem.js

@@ -1,7 +1,6 @@
 
-import React, { PropTypes } from 'react'
+import React, { PropTypes } from 'react';
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom';
-import { Router, Link, hashHistory } from 'react-router'
 
 import * as helpers from '../helpers'
 import Icon from './Icon'

src/js/components/GridSlider.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
-import { hashHistory } from 'react-router'
+
 import Link from './Link'
 
 import ArtistSentence from './ArtistSentence'
@@ -24,7 +24,7 @@ class GridSlider extends React.Component{
 
 	handleClick(e,link){
 		if (e.target.tagName.toLowerCase() !== 'a'){
-			hashHistory.push(link)
+			this.props.history.push(link)
 		}
 	}
 

src/js/components/Link.js

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import {Link} from 'react-router';
+import {Link} from 'react-router-dom';
 
 import * as helpers from '../helpers';
 

src/js/components/List.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
-import { hashHistory } from 'react-router'
+
 
 import ArtistSentence from './ArtistSentence'
 import Dater from './Dater'
@@ -26,7 +26,7 @@ class List extends React.Component{
 		// make sure we haven't clicked a nested link (ie Artist name)
 		if (e.target.tagName.toLowerCase() !== 'a'){
 			e.preventDefault();
-			hashHistory.push((this.props.link_prefix ? this.props.link_prefix : '') + encodeURIComponent(uri));
+			this.props.history.push((this.props.link_prefix ? this.props.link_prefix : '') + encodeURIComponent(uri));
 			helpers.scrollTo();
 		}
 	}
@@ -36,7 +36,7 @@ class List extends React.Component{
 		// make sure we haven't clicked a nested link (ie Artist name)
 		if (e.target.tagName.toLowerCase() !== 'a'){
 			e.preventDefault();
-			hashHistory.push((this.props.link_prefix ? this.props.link_prefix : '') + encodeURIComponent(uri));
+			this.props.history.push((this.props.link_prefix ? this.props.link_prefix : '') + encodeURIComponent(uri));
 			helpers.scrollTo();
 		}
 	}

src/js/components/Notifications.js

@@ -1,6 +1,6 @@
 
 import React, { PropTypes } from 'react';
-import { hashHistory } from 'react-router'
+
 import Link from './Link';
 import Icon from './Icon';
 

src/js/components/PlaybackControls.js

@@ -2,7 +2,6 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { hashHistory } from 'react-router';
 
 import Link from './Link';
 import ProgressSlider from './Fields/ProgressSlider'
@@ -124,7 +123,7 @@ class PlaybackControls extends React.Component{
 		if (this.start_position.x + tap_distance_threshold > end_position.x &&
 			this.start_position.x - tap_distance_threshold < end_position.x){
 
-			hashHistory.push(global.baseURL+'queue');
+			this.props.history.push(global.baseURL+'queue');
 		} else {
 
 			// Swipe to the left = previous track

src/js/components/PlaylistGrid.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
-import { hashHistory } from 'react-router'
+
 
 import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
@@ -44,7 +44,7 @@ class PlaylistGrid extends React.Component{
 								type="playlist"
 								item={playlist}
 								show_source_icon={this.props.show_source_icon}
-								onClick={e => {hashHistory.push(global.baseURL+'playlist/'+encodeURIComponent(playlist.uri))}}
+								onClick={e => {this.props.history.push(global.baseURL+'playlist/'+encodeURIComponent(playlist.uri))}}
 								onContextMenu={e => this.handleContextMenu(e,playlist)}
 							/>
 						)}

src/js/components/Sidebar.js

@@ -1,16 +1,15 @@
 
-import React, { PropTypes } from 'react'
+import React, { PropTypes } from 'react';
-import { connect } from 'react-redux'
+import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux'
+import { bindActionCreators } from 'redux';
-import { withRouter } from 'react-router'
 
 import Link from './Link';
-import Icon from './Icon'
+import Icon from './Icon';
-import Dropzones from './Fields/Dropzones'
+import Dropzones from './Fields/Dropzones';
-import Thumbnail from './Thumbnail'
+import Thumbnail from './Thumbnail';
 
-import * as uiActions from '../services/ui/actions'
+import * as uiActions from '../services/ui/actions';
-import * as mopidyActions from '../services/mopidy/actions'
+import * as mopidyActions from '../services/mopidy/actions';
 
 class Sidebar extends React.Component{
 
@@ -136,5 +135,4 @@ const mapDispatchToProps = (dispatch) => {
 	}
 }
 
-// We wrap our Sidebar with the Router, and then to the redux store
+export default connect(mapStateToProps, mapDispatchToProps)(Sidebar)
-export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Sidebar))

src/js/index.js

@@ -2,11 +2,12 @@
  * Base-level application wrapper
  **/
 
-import React, { PropTypes } from 'react';
+import React, { PropTypes } from 'react';;
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom';;
-import { Provider } from 'react-redux'
+import { Provider } from 'react-redux';
-import { createStore } from 'redux'
+import { createStore } from 'redux';
-import { Router, Route, Link, IndexRoute, hashHistory } from 'react-router'
+//import { Router, Route, Link, IndexRoute, hashHistory } from 'react-router';
+import { BrowserRouter, Route, IndexRoute } from "react-router-dom";
 
 import store from './bootstrap.js';
 require('../scss/app.scss');
@@ -50,7 +51,7 @@ global.baseURL = '/';
 
 ReactDOM.render(
 	<Provider store={store}>
-		<Router history={hashHistory}>
+		<BrowserRouter>
 			<Route path={global.baseURL} component={App}>
 
 				<IndexRoute component={Queue} />
@@ -91,7 +92,7 @@ ReactDOM.render(
 				<Route path="library/browse(/:uri)" component={LibraryBrowse} />
 
 			</Route>
-		</Router>
+		</BrowserRouter>
 	</Provider>,
 	document.getElementById('app')
 );

src/js/services/mopidy/middleware.js

@@ -2,7 +2,7 @@
 import ReactGA from 'react-ga';
 import Mopidy from 'mopidy';
 import md5 from 'md5';
-import { hashHistory } from 'react-router';
+
 import * as helpers from '../../helpers';
 
 var mopidyActions = require('./actions.js');
@@ -1672,7 +1672,7 @@ const MopidyMiddleware = (function(){
                                         key: action.key,
                                         new_key: response.uri
                                     });
-                                    hashHistory.push(global.baseURL+'playlist/'+encodeURIComponent(response.uri));
+                                    this.props.history.push(global.baseURL+'playlist/'+encodeURIComponent(response.uri));
                                 }
 
                                 store.dispatch(uiActions.createNotification({type: 'info', content: 'Playlist saved'}));

src/js/views/Debug.js

@@ -1,7 +1,7 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { hashHistory } from 'react-router'
+
 import { bindActionCreators } from 'redux'
 
 import Header from '../components/Header'
@@ -52,7 +52,7 @@ class Debug extends React.Component{
 	render(){
 
 		var options = (
-			<a className="button button--default button--no-hover" onClick={e => hashHistory.push(global.baseURL+'settings')}>
+			<a className="button button--default button--no-hover" onClick={e => this.props.history.push(global.baseURL+'settings')}>
 				<Icon name="keyboard_backspace" />Back
 			</a>
 		)

src/js/views/Playlist.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { hashHistory } from 'react-router'
+
 import ReactGA from 'react-ga'
 
 import Link from '../components/Link';
@@ -37,7 +37,7 @@ class Playlist extends React.Component{
 		// We accept the old format, and redirect to the new one
 		if (uri.includes("spotify:user:")){
 			uri = uri.replace(/spotify:user:([^:]*?):/i, "spotify:");
-			hashHistory.push(global.baseURL+'playlist/'+encodeURIComponent(uri));
+			this.props.history.push(global.baseURL+'playlist/'+encodeURIComponent(uri));
 		}
 	}
 

src/js/views/Queue.js

@@ -1,7 +1,7 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { hashHistory } from 'react-router'
+
 import Link from '../components/Link';
 import { bindActionCreators } from 'redux'
 

src/js/views/QueueHistory.js

@@ -1,7 +1,7 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { hashHistory } from 'react-router'
+
 import { bindActionCreators } from 'redux'
 
 import TrackList from '../components/TrackList'
@@ -38,7 +38,7 @@ class QueueHistory extends React.Component{
 
 	render(){
 		var options = (
-			<a className="button button--no-hover" onClick={e => hashHistory.push(global.baseURL+'queue')}>
+			<a className="button button--no-hover" onClick={e => this.props.history.push(global.baseURL+'queue')}>
 				<Icon name="keyboard_backspace" />&nbsp;
 				Back
 			</a>

src/js/views/Search.js

@@ -1,7 +1,7 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { hashHistory } from 'react-router'
+
 import Link from '../components/Link';
 import { bindActionCreators } from 'redux'
 

src/js/views/Settings.js

@@ -1,8 +1,8 @@
 
-import React, { PropTypes } from 'react'
+import React, { PropTypes } from 'react';
-import { connect } from 'react-redux'
+import { connect } from 'react-redux';
-import { hashHistory, Link } from 'react-router'
+import { bindActionCreators } from 'redux';
-import { bindActionCreators } from 'redux'
+import { Link } from 'react-router-dom';
 
 import ConfirmationButton from '../components/Fields/ConfirmationButton'
 import PusherConnectionList from '../components/PusherConnectionList'
@@ -194,7 +194,7 @@ class Settings extends React.Component {
 
 		var options = (
 			<span>
-				<a className="button button--default button--no-hover" onClick={e => hashHistory.push(global.baseURL+'settings/debug')}>
+				<a className="button button--default button--no-hover" onClick={e => this.props.history.push(global.baseURL+'settings/debug')}>
 					<Icon name="code" />Debug
 				</a>
 				<a className="button button--default button--no-hover" href="https://github.com/jaedb/Iris/wiki" target="_blank">

src/js/views/library/LibraryBrowse.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { hashHistory } from 'react-router'
+
 import Link from '../../components/Link';
 
 import Header from '../../components/Header'
@@ -122,7 +122,7 @@ class LibraryBrowse extends React.Component{
 									key={subdirectory.uri}
 									type="category"
 									item={subdirectory}
-									onClick={e => {hashHistory.push(global.baseURL+'library/browse/'+encodeURIComponent(subdirectory.uri))}}
+									onClick={e => {this.props.history.push(global.baseURL+'library/browse/'+encodeURIComponent(subdirectory.uri))}}
 								/>
 							);
 						})
@@ -284,7 +284,7 @@ class LibraryBrowse extends React.Component{
 												item={item} 
 												key={index}
 												type="category"
-												onClick={e => hashHistory.push(item.link)}
+												onClick={e => this.props.history.push(item.link)}
 											/>
 										)
 									}

src/js/views/modals/InitialSetup.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { hashHistory } from 'react-router'
+
 import Link from '../../components/Link'
 import ReactGA from 'react-ga';
 
@@ -61,7 +61,7 @@ class InitialSetup extends React.Component{
 
 			// Safe to just close modal
 			} else {
-				hashHistory.push(global.baseURL);
+				this.props.history.push(global.baseURL);
 			}
 		}, 200);