import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import _ from 'lodash';


export default class UserPlaylist extends Component {
  static propTypes = {
    playlistsData: PropTypes.object.isRequired,
    playlistActions: PropTypes.object.isRequired,
  };
  loadPlaylists(){
    this.props.playlistActions.fetchUserPlaylists();
  }
  componentDidMount() {
    this.loadPlaylists();
  }
  render() {
    return (
      <div>
        <ul>
          { _.map(this.props.playlistsData.playlists, (playlist) => <li key={playlist.id}>{playlist.name}</li>) }
        </ul>
      </div>
    );
  }
}

@@ -108,16 +108,555 @@
 dash';%0A%0A
+class Playlist extends Component %7B%0A  constructor(props)%7B%0A    super(props);%0A    this.loadTracks = this.loadTracks.bind(this);%0A  %7D%0A  loadTracks(e)%7B%0A    e.preventDefault();%0A    this.props.fetchTracks(this.props.userId, this.props.id);%0A  %7D%0A  render()%7B%0A    return (%0A      %3Cdiv%3E%0A        %3Cli%3E%7Bthis.props.name%7D (%7Bthis.props.totalTracksCount%7D tracks)%3C/li%3E %3Ca href=%22#%22 onClick=%7Bthis.loadTracks%7D%3ELoad Tracks%3C/a%3E%0A        %3Cul%3E%0A          %7B_.map(this.props.tracks, (track) =%3E %3Cli key=%7Btrack.id%7D%3E%7Btrack.name%7D%3C/li%3E)%7D%0A        %3C/ul%3E%0A      %3C/div%3E%0A    )%0A  %7D%0A%7D%0A
 %0Aexport 
@@ -1082,51 +1082,94 @@
 =%3E %3C
-li key=%7Bplaylist.id%7D%3E%7Bplaylist.name%7D%3C/li
+Playlist %7B...playlist%7D fetchTracks=%7Bthis.props.playlistActions.fetchPlaylistTracks%7D/
 %3E)
- 
 %7D%0A  

Add tracks display.