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

Supporting url-unsafe characters in search term, fixes #446

Browse Source
This commit is contained in:
James Barnsley
2019-10-18 14:02:10 +13:00
parent c82326f452
commit 6e7b72e6a5
5 changed files with 64 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/js/components/Fields/SearchForm.js
View File

@ -5,7 +5,7 @@ import { bindActionCreators } from 'redux';
import * as helpers from '../../helpers';
import * as uiActions from '../../services/ui/actions';
class SearchForm extends React.Component {
class SearchForm extends React.Component {
constructor(props) {
super(props);
@ -36,7 +36,7 @@ class SearchForm extends React.Component {
e.preventDefault();
// check for uri type matching
switch (helpers.uriType(this.state.term)) {
switch (helpers.uriType(this.state.term)) {
case 'album':
this.props.history.push(`/album/${encodeURIComponent(this.state.term)}`);
break;
@ -71,7 +71,7 @@ class SearchForm extends React.Component {
onChange={(e) => this.setState({ term: e.target.value, pristine: false })}
onBlur={(e) => this.handleBlur}
onFocus={(e) => this.handleFocus}
value={this.state.term}
value={this.state.term}
/>
</label>
</form>
@ -83,4 +83,4 @@ const mapDispatchToProps = (dispatch) => ({
uiActions: bindActionCreators(uiActions, dispatch),
});
export default connect(mapDispatchToProps)(SearchForm);
export default connect(mapDispatchToProps)(SearchForm);

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

@ -44,9 +44,13 @@ class Search extends React.Component {
}
componentWillReceiveProps(nextProps) {
// Query changed
if (nextProps.term !== this.props.term || nextProps.type !== this.props.type) {
this.digestUri(nextProps);
const { type, term } = this.props;
const { type: nextType, term: nextTerm } = nextProps;
if (nextType !== type || nextTerm !== term) {
this.digestUri({
type: nextType,
term: nextTerm,
});
}
// Services came online
@ -60,6 +64,8 @@ class Search extends React.Component {
}
handleSubmit(term) {
const encodedTerm = encodeURIComponent(term);
this.setState(
{ term }, () => {
// Unchanged term, so this is a forced re-search
@ -68,7 +74,7 @@ class Search extends React.Component {
if (this.props.term == term) {
this.search();
} else {
this.props.history.push(`/search/${this.state.type}/${term}`);
this.props.history.push(`/search/${this.state.type}/${encodedTerm}`);
}
},
);
@ -132,10 +138,11 @@ class Search extends React.Component {
}
renderArtists(artists, spotify_search_enabled) {
const encodedTerm = encodeURIComponent(this.state.term);
return (
<div>
<h4>
<URILink type="search" uri={`search:all:${this.state.term}`}>
<URILink type="search" uri={`search:all:${encodedTerm}`}>
Search
</URILink>
<Icon type="fontawesome" name="angle-right" />
@ -150,10 +157,11 @@ class Search extends React.Component {
}
renderAlbums(albums, spotify_search_enabled) {
const encodedTerm = encodeURIComponent(this.state.term);
return (
<div>
<h4>
<URILink type="search" uri={`search:all:${this.state.term}`}>
<URILink type="search" uri={`search:all:${encodedTerm}`}>
{`Search `}
</URILink>
<Icon type="fontawesome" name="angle-right" />
@ -168,10 +176,11 @@ class Search extends React.Component {
}
renderPlaylists(playlists, spotify_search_enabled) {
const encodedTerm = encodeURIComponent(this.state.term);
return (
<div>
<h4>
<URILink type="search" uri={`search:all:${this.state.term}`}>
<URILink type="search" uri={`search:all:${encodedTerm}`}>
{`Search `}
</URILink>
<Icon type="fontawesome" name="angle-right" />
@ -186,17 +195,18 @@ class Search extends React.Component {
}
renderTracks(tracks, spotify_search_enabled) {
const encodedTerm = encodeURIComponent(this.state.term);
return (
<div>
<h4>
<URILink type="search" uri={`search:all:${this.state.term}`}>
<URILink type="search" uri={`search:all:${encodedTerm}`}>
{`Search `}
</URILink>
<Icon type="fontawesome" name="angle-right" />
{` Tracks`}
</h4>
<section className="list-wrapper">
<TrackList tracks={tracks} uri={`iris:search:${this.state.type}:${this.state.term}`} show_source_icon />
<TrackList tracks={tracks} uri={`iris:search:${this.state.type}:${encodedTerm}`} show_source_icon />
<LazyLoadListener enabled={this.props.tracks_more && spotify_search_enabled} loadMore={() => this.loadMore('tracks')} />
</section>
</div>
@ -204,16 +214,17 @@ class Search extends React.Component {
}
renderAll(artists, albums, playlists, tracks, spotify_search_enabled) {
const encodedTerm = encodeURIComponent(this.state.term);
if (artists.length > 0) {
var artists_section = (
<section>
<div className="inner">
<URILink type="search" uri={`search:artist:${this.state.term}`}>
<URILink type="search" uri={`search:artist:${encodedTerm}`}>
<h4>Artists</h4>
</URILink>
<ArtistGrid mini show_source_icon artists={artists.slice(0, 6)} />
{artists.length >= 6 && (
<URILink type="search" uri={`search:artist:${this.state.term}`} className="button button--default">
<URILink type="search" uri={`search:artist:${encodedTerm}`} className="button button--default">
{`All artists (${artists.length})`}
</URILink>
)}
@ -228,12 +239,12 @@ class Search extends React.Component {
var albums_section = (
<section>
<div className="inner">
<URILink type="search" uri={`search:album:${this.state.term}`}>
<URILink type="search" uri={`search:album:${encodedTerm}`}>
<h4>Albums</h4>
</URILink>
<AlbumGrid mini show_source_icon albums={albums.slice(0, 6)} />
{albums.length >= 6 && (
<URILink type="search" uri={`search:album:${this.state.term}`} className="button button--default">
<URILink type="search" uri={`search:album:${encodedTerm}`} className="button button--default">
{`All albums (${albums.length})`}
</URILink>
)}
@ -248,12 +259,12 @@ class Search extends React.Component {
var playlists_section = (
<section>
<div className="inner">
<URILink type="search" uri={`search:playlist:${this.state.term}`}>
<URILink type="search" uri={`search:playlist:${encodedTerm}`}>
<h4>Playlists</h4>
</URILink>
<PlaylistGrid mini show_source_icon playlists={playlists.slice(0, 6)} />
{playlists.length >= 6 && (
<URILink type="search" uri={`search:playlist:${this.state.term}`} className="button button--default">
<URILink type="search" uri={`search:playlist:${encodedTerm}`} className="button button--default">
{`All playlists (${playlists.length})`}
</URILink>
)}
@ -267,7 +278,7 @@ class Search extends React.Component {
if (tracks.length > 0) {
var tracks_section = (
<section className="list-wrapper">
<TrackList tracks={tracks} uri={`iris:search:${this.state.type}:${this.state.term}`} show_source_icon />
<TrackList tracks={tracks} uri={`iris:search:${this.state.type}:${encodedTerm}`} show_source_icon />
<LazyLoadListener loading={this.props.tracks_more && spotify_search_enabled} loadMore={() => this.loadMore('tracks')} />
</section>
);