secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Simplifying search uri; Search view in localStorage

Browse Source
This commit is contained in:
James Barnsley
2017-09-03 13:53:11 +12:00
parent b9ae8c449d
commit 285573284d
5 changed files with 22 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/components/Modal/SearchSettingsModal.js
View File

@ -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){

3
src/js/components/SearchForm.js
View File

@ -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
}

2
src/js/index.js
View File

@ -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} />

40
src/js/views/Search.js
View File

@ -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 : []),

1
src/scss/views/_search.scss
View File

@ -5,6 +5,7 @@
position: absolute;
top: 40px;
left: 90px;
right: 250px;
input {
@include feature_font();