From 285573284dc53de1f6d04e4d8b416997d48717c5 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Sun, 3 Sep 2017 13:53:11 +1200
Subject: [PATCH] Simplifying search uri; Search view in localStorage

---
 .../components/Modal/SearchSettingsModal.js   |  2 +-
 src/js/components/SearchForm.js               |  3 +-
 src/js/index.js                               |  2 +-
 src/js/views/Search.js                        | 40 +++++++++----------
 src/scss/views/_search.scss                   |  1 +
 5 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/js/components/Modal/SearchSettingsModal.js b/src/js/components/Modal/SearchSettingsModal.js
index ca55526a..525eb5e0 100755
--- a/src/js/components/Modal/SearchSettingsModal.js
+++ b/src/js/components/Modal/SearchSettingsModal.js
@@ -30,7 +30,7 @@ export default class SearchSettingsModal extends React.Component{
 	handleSubmit(e){
 		this.props.uiActions.set({search_settings: this.state})
 		this.props.uiActions.closeModal()
-		this.props.coreActions.startSearch(this.props.data.type, this.props.data.query)
+		this.props.coreActions.startSearch('all', this.props.data.query)
 	}
 
 	handleToggle(scheme){
diff --git a/src/js/components/SearchForm.js b/src/js/components/SearchForm.js
index 2f52bcef..3972be9c 100755
--- a/src/js/components/SearchForm.js
+++ b/src/js/components/SearchForm.js
@@ -27,7 +27,6 @@ class SearchForm extends React.Component{
 
 	componentWillReceiveProps(newProps){
 		if (newProps.query && newProps.query != this.state.query && newProps.query != this.props.query && !this.state.in_focus){
-			console.log('changing',newProps.query,this.props.query)
 			this.setState({query: newProps.query})
 		}
 	}
@@ -51,7 +50,7 @@ class SearchForm extends React.Component{
 				break
 
 			default:
-				hashHistory.push(global.baseURL+'search/iris:search:all:'+this.state.query)
+				hashHistory.push(global.baseURL+'search/iris:search:'+this.state.query)
 				break
 		}
 
diff --git a/src/js/index.js b/src/js/index.js
index 34e04d32..6f74017f 100755
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -57,7 +57,7 @@ ReactDOM.render(
 				<Route path="settings" component={Settings} />
 				<Route path="settings/debug" component={Debug} />
 				
-				<Route path="search(/iris::search::type::query)" component={Search} />
+				<Route path="search(/iris::search::query)" component={Search} />
 				<Route path="album/:uri" component={Album} />
 				<Route path="artist/:uri(/:sub_view)" component={Artist} />
 				<Route path="playlist/:uri" component={Playlist} />
diff --git a/src/js/views/Search.js b/src/js/views/Search.js
index c6f5bebc..f3a08c52 100755
--- a/src/js/views/Search.js
+++ b/src/js/views/Search.js
@@ -30,8 +30,8 @@ class Search extends React.Component{
 	componentDidMount(){
 
 		// Make sure we have search parameters to start with
-		if (this.props.params && this.props.params.type && this.props.params.query){
-			this.props.coreActions.startSearch(this.props.params.type, this.props.params.query)
+		if (this.props.params && this.props.params.query){
+			this.props.coreActions.startSearch(this.props.view, this.props.params.query)
 		}
 
 		// Auto-focus on the input field
@@ -41,21 +41,21 @@ class Search extends React.Component{
 	componentWillReceiveProps(newProps){
 		
 		// Make sure we have some search parameters
-		if (newProps.params && newProps.params.type && newProps.params.query){
+		if (newProps.params && newProps.view && newProps.params.query){
 
-			if (this.props.params.query != newProps.params.query || this.props.params.type != newProps.params.type){
-				this.props.coreActions.startSearch(newProps.params.type, newProps.params.query)
+			if (this.props.params.query != newProps.params.query || this.props.view != newProps.view){
+				this.props.coreActions.startSearch(newProps.view, newProps.params.query)
 			}
 
 			// mopidy comes online
 			if (!this.props.mopidy_connected && newProps.mopidy_connected){
-				this.props.coreActions.startSearch(newProps.params.type, newProps.params.query, true)
+				this.props.coreActions.startSearch(newProps.view, newProps.params.query, true)
 			}
 		}
 	}
 
 	loadMore(type){
-		this.props.spotifyActions.getURL( this.props[type+'_more'], 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_'+type.toUpperCase());
+		this.props.spotifyActions.getURL( this.props['spotify_'+type+'_more'], 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_'+type.toUpperCase());
 	}
 
 	renderResults(){
@@ -93,7 +93,7 @@ class Search extends React.Component{
 			tracks = [...tracks, ...this.props.mopidy_search_results.tracks]
 		}
 
-		switch (this.props.params.type){
+		switch (this.props.view){
 
 			case 'artists':
 				return (
@@ -132,7 +132,7 @@ class Search extends React.Component{
 				return (
 					<div>
 						<section className="list-wrapper">
-							<TrackList tracks={tracks} uri={'iris:search:'+this.props.params.type+':'+this.props.params.query} show_source_icon />
+							<TrackList tracks={tracks} uri={'iris:search:'+this.props.params.query} show_source_icon />
 							<LazyLoadListener enabled={this.props['tracks_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('tracks') }/>
 						</section>
 					</div>
@@ -145,7 +145,7 @@ class Search extends React.Component{
 					var artists_section = (					
 						<section>
 							<div className="inner">
-								<h4><Link to={global.baseURL+'search/iris:search:artists:'+this.props.params.query}>Artists</Link></h4>
+								<h4>Artists</h4>
 								<ArtistGrid show_source_icon artists={artists.slice(0,5)} />
 							</div>
 						</section>
@@ -158,7 +158,7 @@ class Search extends React.Component{
 					var albums_section = (					
 						<section>
 							<div className="inner">
-								<h4><Link to={global.baseURL+'search/iris:search:albums:'+this.props.params.query}>Albums</Link></h4>
+								<h4>Albums</h4>
 								<AlbumGrid show_source_icon albums={albums.slice(0,5)} />
 							</div>
 						</section>
@@ -171,7 +171,7 @@ class Search extends React.Component{
 					var playlists_section = (					
 						<section>
 							<div className="inner">
-								<h4><Link to={global.baseURL+'search/iris:search:playlists:'+this.props.params.query}>Playlists</Link></h4>
+								<h4>Playlists</h4>
 								<PlaylistGrid show_source_icon playlists={playlists.slice(0,5)} />
 							</div>
 						</section>
@@ -189,8 +189,8 @@ class Search extends React.Component{
 						</div>
 
 						<section className="list-wrapper">
-							<h4><Link to={global.baseURL+'search/'+this.props.params.query+'/tracks'}>Tracks</Link></h4>
-							<TrackList tracks={tracks} uri={'iris:search:'+this.props.params.type+':'+this.props.params.query} show_source_icon />
+							<h4>Tracks</h4>
+							<TrackList tracks={tracks} uri={'iris:search:'+this.props.params.query} show_source_icon />
 							<LazyLoadListener loading={this.props['tracks_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('tracks') }/>
 						</section>
 
@@ -199,13 +199,8 @@ class Search extends React.Component{
 		}
 	}
 
-	handleTypeChange(val){
-		this.props.uiActions.hideContextMenu()
-		hashHistory.push(global.baseURL+'search/iris:search:'+val+':'+this.props.params.query)
-	}
-
 	render(){
-		var type_options = [
+		var view_options = [
 			{
 				value: 'all',
 				label: 'All'
@@ -230,8 +225,8 @@ class Search extends React.Component{
 
 		var options = (
 			<span>
-				<DropdownField icon="eye" name="Type" value={this.props.params.type} options={type_options} handleChange={val => this.handleTypeChange(val)} />
-				<button className="no-hover" onClick={e => this.props.uiActions.openModal('search_settings', {type: this.props.params.type, query: this.props.params.query})}>
+				<DropdownField icon="eye" name="View" value={this.props.view} options={view_options} handleChange={val => {this.props.uiActions.set({ search_view: val }); this.props.uiActions.hideContextMenu() }} />
+				<button className="no-hover" onClick={e => this.props.uiActions.openModal('search_settings', {query: this.props.params.query})}>
 					<FontAwesome name="wrench" />&nbsp;
 					Sources
 				</button>
@@ -252,6 +247,7 @@ class Search extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		view: (state.ui.search_view ? state.ui.search_view : 'all'),
 		mopidy_connected: state.mopidy.connected,
 		spotify_connected: state.spotify.connected,
 		albums: (state.core.albums ? state.core.albums : []),
diff --git a/src/scss/views/_search.scss b/src/scss/views/_search.scss
index c198c91f..b2719887 100755
--- a/src/scss/views/_search.scss
+++ b/src/scss/views/_search.scss
@@ -5,6 +5,7 @@
 		position: absolute;
 		top: 40px;
 		left: 90px;
+		right: 250px;
 
 		input {
 			@include feature_font();