Remove autocomplete from search, will build unique one; AddSeedField unique to Discover

src/js/components/AddSeedField.js

@@ -8,7 +8,7 @@ import ArtistSentence from './ArtistSentence'
 import * as helpers from '../helpers'
 import * as spotifyActions from '../services/spotify/actions'
 
-class AutocompleteField extends React.Component{
+class AddSeedField extends React.Component{
 
 	constructor(props) {
 		super(props)
@@ -24,7 +24,7 @@ class AutocompleteField extends React.Component{
 	componentDidMount(){
 		window.addEventListener("click", this.handleClick, false)
 
-		if (this.props.types.includes('genre') && !this.props.genres){
+		if (!this.props.genres){
 			this.props.spotifyActions.getGenres()
 		}
 	}
@@ -34,8 +34,8 @@ class AutocompleteField extends React.Component{
 	}
 
 	handleClick(e){
-		if ($(e.target).closest('.autocomplete-field').length <= 0){
+		if ($(e.target).closest('.add-seed-field').length <= 0){
-			this.props.spotifyActions.clearAutocompleteResults()
+			this.props.spotifyActions.clearAutocompleteResults(this.id)
 		}
 	}
 
@@ -44,11 +44,6 @@ class AutocompleteField extends React.Component{
 
 		// update our local state
 		this.setState({value: value})
-
-		// pass the change up the line
-		if (this.props.onChange){
-			this.props.onChange(e,value)
-		}
 		
 		// start a timer to perform the actual search
 		// this provides a wee delay between key presses to avoid request spamming
@@ -56,49 +51,15 @@ class AutocompleteField extends React.Component{
         this.timer = setTimeout(
             function(){
             	self.setState({searching: true})
-                self.props.spotifyActions.getAutocompleteResults(self.id,value,self.props.types)
+                self.props.spotifyActions.getAutocompleteResults(self.id,value,['artist','track','genre'])
             },
             500
         )
 	}
 
 	handleSelect(e,item){
-		if (this.props.clearOnSelect){
+		this.setState({value: ''})
-			this.setState({value: ''})
+		this.props.onSelect(e,item)
-		} else {
-			this.setState({value: item.name})
-		}
-
-		// if we have a handler to pass down to
-		if (this.props.onSelect){
-			this.props.onSelect(e,item)
-
-		// no handler, so let's just go to this asset
-		} else {
-			switch (helpers.uriType(item.uri)){
-
-				case 'album':
-					hashHistory.push(global.baseURL+'album/'+item.uri)
-					break
-
-				case 'artist':
-					hashHistory.push(global.baseURL+'artist/'+item.uri)
-					break
-
-				case 'playlist':
-					hashHistory.push(global.baseURL+'playlist/'+item.uri)
-					break
-
-				case 'track':
-					hashHistory.push(global.baseURL+'album/'+item.album.uri)
-					break
-
-				case 'search':
-					hashHistory.push(global.baseURL+'search/'+item.uri)
-					break
-			}
-		}
-
 		this.props.spotifyActions.clearAutocompleteResults(this.id)
 	}
 
@@ -112,18 +73,6 @@ class AutocompleteField extends React.Component{
 		}
 	}
 
-	renderAllResultsButton(){
-		 if (this.props.hideAllResultsButton || !this.results()){
-		 	return null
-		 } else {
-			return (
-				<div className="all-results" onClick={e => this.handleSelect(e,{uri:'iris:search:all:'+this.state.value, name: ''})}>
-					All results
-				</div>
-			)
-		 }
-	}
-
 	renderResults(type){
 		var results = this.results()
 		if (!results || typeof(results[type]) === 'undefined' || results[type].length <= 0) return null
@@ -149,7 +98,7 @@ class AutocompleteField extends React.Component{
 	}
 
 	render(){
-		var className = "field autocomplete-field"
+		var className = "field autocomplete-field add-seed-field"
 		if (this.results() && this.results().loading){
 			className += " loading"
 		}
@@ -163,16 +112,9 @@ class AutocompleteField extends React.Component{
 						placeholder={this.props.placeholder ? this.props.placeholder : "Start typing..."} />
 				</div>
 				<div className="results">
-					{
+					{this.renderResults('artists')}
-						this.props.types.map(type => {
+					{this.renderResults('tracks')}
-							return (
+					{this.renderResults('genres')}
-								<div key={type}>
-									{this.renderResults(type+'s')}
-								</div>
-							)
-						})
-					}
-					{this.renderAllResultsButton()}
 				</div>
 			</div>
 		);
@@ -192,4 +134,4 @@ const mapDispatchToProps = (dispatch) => {
 	}
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(AutocompleteField)
+export default connect(mapStateToProps, mapDispatchToProps)(AddSeedField)

src/js/components/SearchForm.js

@@ -5,7 +5,6 @@ import { Link, hashHistory } from 'react-router'
 import { createStore, bindActionCreators } from 'redux'
 import FontAwesome from 'react-fontawesome'
 
-import AutocompleteField from './AutocompleteField'
 import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
 
@@ -19,7 +18,7 @@ class SearchForm extends React.Component{
 		}
 	}
 
-	handleSubmit(e,value){
+	handleSubmit(e){
 		e.preventDefault()
 
 		// check for uri type matching
@@ -47,12 +46,12 @@ class SearchForm extends React.Component{
 
 	render(){
 		return (
-			<form className={this.props.context+' search-form'} onSubmit={e => this.handleSubmit(e, this.state.query)}>
+			<form className={this.props.context+' search-form'} onSubmit={ e => this.handleSubmit(e) }>
-				<AutocompleteField 
+				<input					
-					value={this.state.query}
+					type="text"
-					types={['artist','album','playlist']}
 					placeholder="Search"
-					onChange={(e,value) => this.setState({query: value})} />
+					onChange={ e => this.setState({ query: e.target.value }) } 
+					value={ this.state.query } />
 			</form>
 		)
 	}

src/js/views/discover/Discover.js

@@ -9,7 +9,7 @@ import GridSlider from '../../components/GridSlider'
 import ArtistSentence from '../../components/ArtistSentence'
 import TrackList from '../../components/TrackList'
 import Parallax from '../../components/Parallax'
-import AutocompleteField from '../../components/AutocompleteField'
+import AddSeedField from '../../components/AddSeedField'
 
 import * as helpers from '../../helpers'
 import * as spotifyActions from '../../services/spotify/actions'
@@ -88,13 +88,7 @@ class Discover extends React.Component{
 						)
 					})
 				}
-				<AutocompleteField 
+				<AddSeedField onSelect={(e,item) => this.handleSelect(e,item)} />
-					value={this.state.add_seed} 
-					types={['artist','track','genre']} 
-					placeholder="Add seed" 
-					onSelect={(e,item) => this.handleSelect(e,item)} 
-					clearOnSelect
-					hideAllResultsButton />
 			</div>
 		)
 	}

src/scss/global/_variables.scss

@@ -159,5 +159,9 @@ $bp_shallow: 650px;
 		@media( min-width: $min_width ){ 
 			@content;
 		}
+	}@else if $min_height {
+		@media( min-height: $min_height ){ 
+			@content;
+		}
 	}
 }