UI idea for Genre search scoping #11
Conversation
|
I like this idea!
You probably want an |
| @@ -189,15 +192,21 @@ class SeedSearchForm extends React.Component { | |||
| ) | |||
| } | |||
|
|
|||
| seedGenre(event) { | |||
| const seedInput = document.getElementById("seed") | |||
There was a problem hiding this comment.
Usually it's a red flag if you're using functions like getElementById or querySelector in a React app.
There was a problem hiding this comment.
Hah! I knew it felt wrong to be doing it that way.
|
|
||
| import SearchResultArtist from './search-result-artist.jsx' | ||
| import SearchResultTrack from './search-result-track.jsx' | ||
|
|
||
| const genreValue = "genre:" + Genres.fields[Math.floor(Math.random()*Genres.fields.length)] |
There was a problem hiding this comment.
What about putting this in a function, something like getGenreFilter?
| @@ -217,6 +226,7 @@ class SeedSearchForm extends React.Component { | |||
| </div> | |||
| </div> | |||
| {this.seedTypeControls()} | |||
| <strong>Tip!</strong> Try a genre search by typing <a onClick={e => this.seedGenre(e)}>{genreValue}</a> | |||
There was a problem hiding this comment.
Maybe setGenreFilter as a name. You could also pass genreValue to the function as the second parameter so you don't have to look at the innerHTML.
| class Genres { | ||
| } | ||
|
|
||
| Genres.fields = ['acoustic', 'afrobeat', 'alt-rock', 'alternative', 'ambient', |
| 'sad', 'salsa', 'samba', 'sertanejo', 'show-tunes', 'singer-songwriter', 'ska', | ||
| 'sleep', 'songwriter', 'soul', 'soundtracks', 'spanish', 'study', 'summer', | ||
| 'swedish', 'synth-pop', 'tango', 'techno', 'trance', 'trip-hop', 'turkish', | ||
| 'work-out', 'world-music'] |
There was a problem hiding this comment.
I wonder if it would be better to get the list of genres via a Spotify API call, in case they add/remove some in the future. Was the list available via an endpoint?
There was a problem hiding this comment.
Yeh that list came from their API. I need to dig into this a bit more. As I was testing different genres, a handful of them didn't return any results when the filter was applied a day later, so it probably needs to be fetched from the API to even work properly.
After looking through the search documentation, I noticed that the query (
q) parameter had an option to filter results based on genre. To test this out, I started by just typing ingenre:jazzin the input field and noticed it worked out of the box! If you are on Song, it only returns songs in that genre. If you are on Artist, it only returns artists in that genre.The problem is knowing the syntax and what genres to type. When I pulled in the list from the API, there are a total of 126 different genres and they're not all immediately obvious (I had to google pagode for instance 馃槅).
So the initial idea I had was to pull in a random genre as a "Tip!" just below the search box:
Every time you refresh the page you get a new genre. And some of those genres may be ones you've never even heard of! Your search is then scoped to that genre.
Example searching for just "Louis":
vs Searching for Louis in Genre:Jazz:
Thoughts? I think the implementation needs a bit of polish if done this way. Maybe something like how GitHub's repository search UI adds a header to the input field that just says "this repository". So you could lose the
genre:part of the syntax and just have an input field add-on with a human readable name of the Genre and a button to randomly pick another genre.I wasn't 馃挴 sure how to get React to handle this though. I ran into a warning about controlled vs uncontrolled input fields because I was using the
seedGenrefunction to try and modify the data in the input field, but I'm sure there's a workaround there I'm not thinking of.