commit

package.json

@@ -13,4 +13,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/components/Filter.js

@@ -1,11 +1,24 @@
 import React, { Component } from 'react';
 
 class Filter extends Component {
+
+  state ={
+    title: "",
+  }
+
+  //method
+  handleChange = (e) => {
+    this.setState({
+      [e.target.name] : e.target.value
+    })
+    this.props.handleFilter(this.state.title);
+  };
+
   render() {
     return (
       <div className="filter">
         <label htmlFor="title-filter">Title: </label>
-        <input id="title-filter" type="text" />
+        <input id="title-filter" type="text" name="title" value={this.state.value} onChange={this.handleChange}/>
       </div>
     );
   }

src/components/KaraokeDisplay.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import Lyrics from './Lyrics';
+import VoteBar from './VoteBar';
 
-const KaraokeDisplay = () => {
+const KaraokeDisplay = (props) => {
+
   return (
     <div className="karaoke-display">
+      <VoteBar handleVote={props.handleVote}/>
       <h2>Song Title</h2>
-      <Lyrics lyrics="example song lyrics" />
+      <Lyrics lyrics={props.lyrics} />
     </div>
-  )
-}
+  );
+};
 
 export default KaraokeDisplay;

src/components/Song.js

@@ -1,13 +1,16 @@
 import React from 'react';
 
-const Song = () => {
+const Song = (props) => {
   return (
     <tr className="song">
-      <td>title</td>
-      <td>singer</td>
-      <td><button>Play</button></td>
+      <td>{props.song.title}</td>
+      <td>{props.song.singer}</td>
+      <td>Likes</td>
+      <td>Dislikes</td>
+      <td>Plays</td>
+      <td><button onClick={() => props.handlePlayClick(props.song)}>Play</button></td>
     </tr>
-  )
-}
+  );
+};
 
 export default Song;

src/components/SongList.js

@@ -1,20 +1,28 @@
 import React from 'react';
+import Song from './Song.js';
 
-const SongList = () => {
+const SongList = (props) => {
   return (
     <table className="song-list">
       <tbody>
         <tr>
           <th>Title</th>
           <th>Singer</th>
+          <th>Likes</th>
+          <th>Dislikes</th>
+          <th>Plays</th>
           <th>▶</th>
         </tr>
 
-        {/* Your Code Goes Here */}
+        {props.songs.map(song => {
+          return <Song song={song} handlePlayClick={props.handlePlayClick}/>;
+        })
+          /* Your Code Goes Here */
+          }
 
       </tbody>
     </table>
-  )
-}
+  );
+};
 
 export default SongList;

src/components/VoteBar.js

@@ -6,17 +6,17 @@ const VoteBar = ({ upTitle, voteUp, downTitle, voteDown }) => {
       <button
         className="pure-button up-button"
         onClick={voteUp}
-      >
+      > Like
         {upTitle}
       </button>
       <button
         className="pure-button down-button"
         onClick={voteDown}
-      >
+      > Dislike
         {downTitle}
       </button>
     </div>
-  )
-}
+  );
+};
 
 export default VoteBar;

src/containers/KaraokeContainer.js

@@ -5,14 +5,66 @@ import KaraokeDisplay from '../components/KaraokeDisplay';
 import songs from '../data/songs';
 
 class KaraokeContainer extends Component {
+
+  state ={
+    songs:[],
+    filterSongs:[],
+    clickedLyrics: "",
+  }
+
+  // Fetching 
+
+  componentDidMount(){
+    fetch("http://localhost:4000/songs")
+    .then(response => response.json())
+    .then(songs => {
+      this.setState({
+        songs: songs,
+        filterSongs: songs
+      })
+    })
+  }
+
+  //methods
+
+  handlePlayClick = (song) => {
+    // let played = song.play;
+    let playSong = {...song, play: 1 };
+    let songId = song.id;
+    let lyrics = song.lyrics;
+    this.setState({
+      clickedLyrics: lyrics
+    })
+    fetch(`http:localhost:4000/users/:user_id/songs/${songId}/play` , {
+    method: 'PATCH',
+    headers: {
+      'content-Type': 'application/json'
+    },
+    body : JSON.stringify(playSong)
+  })
+  }
+
+  handleFilter = (word) => {
+    // console.log(word);
+    let newArray = [...this.state.songs].filter( song => {
+      return song.title.toLowerCase() === word
+    })
+    console.log(newArray);
+  }
+
+  handleVote = () => {
+    console.log("Pass");
+  }
+
   render() {
+    // console.log(this.state.songs);
     return (
       <div className="karaoke-container">
         <div className="sidebar">
-          <Filter />
-          <SongList />
+          <Filter handleFilter={this.handleFilter}/>
+          <SongList songs={this.state.filterSongs} handlePlayClick={this.handlePlayClick}/>
         </div>
-        <KaraokeDisplay />
+        <KaraokeDisplay lyrics={this.state.clickedLyrics} handleVote={this.handleVote}/>
       </div>
     );
   }