Discover view (requires dynamic height and responsive)

src/js/views/discover/Discover.js

@@ -4,6 +4,8 @@ import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 
 import Header from '../../components/Header'
+import GridSlider from '../../components/GridSlider'
+import ArtistSentence from '../../components/ArtistSentence'
 
 import * as helpers from '../../helpers'
 import * as spotifyActions from '../../services/spotify/actions'
@@ -14,11 +16,36 @@ class Discover extends React.Component{
 		super(props);
 	}
 
+	componentDidMount(){
+		this.props.spotifyActions.getDiscover()
+	}
+
+	renderRecommendations(){
+		if (!this.props.discover || this.props.discover.length <= 0) return null
+
+		return (
+			<section className="recommendations">
+				{
+					this.props.discover.map(
+						(discover, index) => {
+							return (
+								<div className="grid-slider-wrapper" key={index}>
+									<h4>Because you listened to <ArtistSentence artists={discover.seed.artists} /></h4>
+									<GridSlider tracks={discover.tracks} />
+								</div>
+							)
+						}
+					)
+				}
+			</section>
+		)
+	}
+
 	render(){
 		return (
 			<div className="view discover-view">
 				<Header icon="compass" title="Discover" />
-				<h1>To come</h1>
+				{ this.renderRecommendations() }
 			</div>
 		)
 	}
@@ -33,7 +60,8 @@ class Discover extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
-
+		authorized: state.spotify.authorized,
+		discover: state.spotify.discover
 	}
 }