Handle click on album

Click on album should dispatch an SELECT_ALBUM action.

This is done by map to AlbumList, and providing a property to each
album. It could also had been done by introducing a container for Album,
but IMHO that's not motivated.

src/components/album-list.jsx

@@ -5,11 +5,18 @@ export default class AlbumList extends Component {
     render() {
         const {
             albums,
+            handleOnClick,
+            blurred,
         } = this.props;
+        const classNames = blurred ? 'blur' : ''
         return (
-            <div id="albums">
+            <div id="albums" className={classNames}>
                 {albums.map(album => (
-                    <Album key={album.id} {...album} />
+                    <Album
+                        key={album.id}
+                        album={album}
+                        handleOnClick={handleOnClick} 
+                    />
                 ))}
             </div>
         );

src/components/album.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 
 export default class Album extends Component {
     render() {
+        const { album, handleOnClick } = this.props
         const {
             id,
             artist,
@@ -10,11 +11,11 @@ export default class Album extends Component {
             year,
             img,
             purchased_on,
-        } = this.props;
+        } = album;
         const imagePath = `assets/covers/${img}`;
         const song = songs.join(', ');
         return (
-            <article>
+            <article onClick={() => handleOnClick(album)}>
                 <figure>
                     <img src={imagePath} alt="cover" />
                 </figure>

src/containers/album-list.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import AlbumList from '../components/album-list';
+import { selectAlbum } from '../actions'
 
 const getAlbums = (albums, filter) => {
     const atos = o => [o.artist, o.title, o.songs.join(' '), o.year].join(' ').toLowerCase();
@@ -13,6 +14,11 @@ const getAlbums = (albums, filter) => {
 
 const mapStateToProps = state => ({
     albums: getAlbums(state.albums, state.visibilityFilter),
+    blurred: "id" in state.selectedAlbum,
 });
 
-export default connect(mapStateToProps)(AlbumList);
+const mapDispatchToProps = dispatch => ({
+    handleOnClick: album => dispatch(selectAlbum(album)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(AlbumList);