ReactMarathonStepbyStep.md

Step 1. #src/components/App.js

import React from 'react';
import PlaylistCollection from './PlaylistCollection'

class App extends React.Component {
  constructor(props) {
    super(props);
  };

  render() {
    let data = this.props.data

    let selectedPlaylistSongIds = data.playlists[this.state.selectedPlaylistId-1].songs;

    let filterById = (obj) => {
      return selectedPlaylistSongIds.includes(obj.id);
    }

    let selectedPlaylistSongs = data.songs.filter(filterById);

    return (
      <div className="App row">
        <div className="small-6 columns">
          <h2>PLAYLISTS!</h2>
          <PlaylistCollection playlists={ data.playlists }/>
        </div>
      </div>
    );
  }
};

export default App;

Step 2. #src/components/PlaylistCollection.js

import React from 'react';
import Playlist from './Playlist';

class PlaylistCollection extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    let playlists = this.props.playlists.map(playlist => {
      return(
        <Playlist
          key={ playlist.id}
          playlist={ playlist }
        />
      )
    })

    return(
      <ul>{ playlists }</ul>
    );
  }
};

export default PlaylistCollection;

Step 3. #src/components/Playlist.js

import React from 'react';

class Playlist extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <li>{ this.props.playlist.name }</li>
    );
  }
};

export default Playlist;

Step 4. #src/components/App.js

import SongCollection from './SongCollection';
...
return (
      <div className="App row">
        <div className="small-6 columns">
          <h2>PLAYLISTS!</h2>
          <PlaylistCollection playlists={ data.playlists }/>
        </div>
        <div className="small-6 columns">
          <h2>SONGS!</h2>
          <SongCollection songs={ selectedPlaylistSongs }/>
        </div>
      </div>
    );

Step 5. #src/components/SongCollection.js

import React from 'react';
import Song from './Song';

class SongCollection extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    let songs = this.props.songs.map(song => {
      let handleSongSelect = () => this.props.handleSongSelect(song.id);
      return(
        <Song
          key={ song.id}
          song={ song }
        />
      )
    })

    return(
      <ul>{ songs }</ul>
    );
  }
};

export default SongCollection;

Step 6. #src/components/Song.js

import React from 'react';

class Song extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <li>{ this.props.song.name } - { this.props.song.artist }</li>
    );
  }
};

export default Song;

Step 7 and Step 8. #src/components/App.js

...
return (
      <div className="App row">
        <div className="small-6 columns">
          <h2>PLAYLISTS!</h2>
          <PlaylistCollection playlists={ data.playlists } selectedPlaylistId={ this.state.selectedPlaylistId }/>
        </div>
        <div className="small-6 columns">
          <h2>SONGS!</h2>
          <SongCollection songs={ selectedPlaylistSongs } selectedSongId={ this.state.selectedSongId }/>
        </div>
      </div>
    );
...

#src/components/SongCollection.js

...
render() {
    let selectedSongId = this.props.selectedSongId

    let songs = this.props.songs.map(song => {
      let className

      if(song.id == selectedSongId){
        className = "selected"
      };

      return(
        <Song
          key={ song.id}
          song={ song }
          className={ className }
        />
      )
    })
...

#src/components/Song.js

...
render() {
    return(
      <li className={ this.props.className }>{ this.props.song.name } - { this.props.song.artist }</li>
    );
  }

#src/components/PlaylistCollection.js

...
render() {
    let selectedPlaylistId = this.props.selectedPlaylistId

    let playlists = this.props.playlists.map(playlist => {
      let className

      if(playlist.id == selectedPlaylistId){
        className = "selected"
      };

      return(
        <Playlist
          key={ playlist.id}
          playlist={ playlist }
          className={ className }
        />
      )
    })
...

#src/components/Playlist.js

...
render() {
    return(
      <li className={ this.props.className }>{ this.props.playlist.name }</li>
    );
  }
...

All Files after steps 9 and 10. #src/components/App.js

import React from 'react';
import PlaylistCollection from './PlaylistCollection'
import SongCollection from './SongCollection'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedSongId: this.props.data.selectedSongId,
      selectedPlaylistId: this.props.data.selectedPlaylistId
    };
    this.handleSongSelect = this.handleSongSelect.bind(this);
    this.handlePlaylistSelect = this.handlePlaylistSelect.bind(this);
  };

  handleSongSelect(id) {
    this.setState({ selectedSongId: id })
  };

  handlePlaylistSelect(id) {
    let newSelectedSong;
    newSelectedSong = this.props.data.playlists[id-1].songs[0]
    this.setState({
      selectedSongId: newSelectedSong,
      selectedPlaylistId: id
    })
  };

  render() {
    let data = this.props.data

    let selectedPlaylistSongIds = data.playlists[this.state.selectedPlaylistId-1].songs;

    let filterById = (obj) => {
      return selectedPlaylistSongIds.includes(obj.id);
    }

    let selectedPlaylistSongs = data.songs.filter(filterById);

    return (
      <div className="App row">
        <div className="small-6 columns">
          <h2>PLAYLISTS!</h2>
          <PlaylistCollection playlists={ data.playlists } selectedPlaylistId={ this.state.selectedPlaylistId } handlePlaylistSelect={ this.handlePlaylistSelect }/>
        </div>
        <div className="small-6 columns">
          <h2>SONGS!</h2>
          <SongCollection songs={ selectedPlaylistSongs } selectedSongId={ this.state.selectedSongId } handleSongSelect={ this.handleSongSelect }/>
        </div>
      </div>
    );
  }
};

export default App;

#src/components/PlaylistCollection.js

import React from 'react';
import Playlist from './Playlist';

class PlaylistCollection extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    let selectedPlaylistId = this.props.selectedPlaylistId

    let playlists = this.props.playlists.map(playlist => {
      let className

      let handlePlaylistSelect = () => this.props.handlePlaylistSelect(playlist.id);

      if(playlist.id == selectedPlaylistId){
        className = "selected"
      };

      return(
        <Playlist
          key={ playlist.id}
          playlist={ playlist }
          className={ className }
          handlePlaylistSelect={ handlePlaylistSelect }
        />
      )
    })

    return(
      <ul>{ playlists }</ul>
    );
  }
};

export default PlaylistCollection;

#src/components/Playlist.js

import React from 'react';

class Playlist extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <li className={ this.props.className } onClick={ this.props.handlePlaylistSelect }>{ this.props.playlist.name }</li>
    );
  }
};

export default Playlist;

#src/SongCollection.js

import React from 'react';
import Song from './Song';

class SongCollection extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    let songs = this.props.songs.map(song => {
      let selectedSongId = this.props.selectedSongId

      let handleSongSelect = () => this.props.handleSongSelect(song.id);

      let className

      if(song.id == selectedSongId){
        className = "selected"
      };

      return(
        <Song
          key={ song.id}
          song={ song }
          className={ className }
          handleSongSelect={ handleSongSelect }
        />
      )
    })

    return(
      <ul>{ songs }</ul>
    );
  }
};

export default SongCollection;

#src/components/Song.js

import React from 'react';

class Song extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <li className={ this.props.className } onClick={ this.props.handleSongSelect }>{ this.props.song.name } - { this.props.song.artist }</li>
    );
  }
};

export default Song;