hm

package.json

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

src/components/Filter.js

@@ -5,7 +5,7 @@ class Filter extends Component {
     return (
       <div className="filter">
         <label htmlFor="title-filter">Title: </label>
-        <input id="title-filter" type="text" />
+        <input onChange={(event) => this.props.handleChange(event)} placeholder='write a title' name='title' id="title-filter" type="text" />
       </div>
     );
   }

src/components/KaraokeDisplay.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import Lyrics from './Lyrics';
-
-const KaraokeDisplay = () => {
+import VoteBar from './VoteBar';
+const KaraokeDisplay = (props) => {
+  // console.log(props.object.likes)
   return (
     <div className="karaoke-display">
-      <h2>Song Title</h2>
-      <Lyrics lyrics="example song lyrics" />
+      {props.playing ? <VoteBar object={props.object} handleDislikeIncrement={props.handleDislikeIncrement} handleLikeIncrement={props.handleLikeIncrement} upTitle={props.object.likes}/> : null}
+      <h2>{props.title}</h2>
+      <Lyrics lyrics={props.lyrics} />
     </div>
   )
 }

src/components/Song.js

@@ -1,11 +1,15 @@
 import React from 'react';
 
-const Song = () => {
+const Song = (props) => {
+  // console.log(props.songObj.title)
   return (
     <tr className="song">
-      <td>title</td>
-      <td>singer</td>
-      <td><button>Play</button></td>
+      <td>{props.songObj.title}</td>
+      <td>{props.songObj.singer}</td>
+      <td>{props.songObj.likes}</td>
+      <td>{props.songObj.dislikes}</td>
+      <td>{props.songObj.plays}</td>
+      <td><button onClick={() => props.handleClick(props.songObj)}>Play</button></td>
     </tr>
   )
 }

src/components/SongList.js

@@ -1,20 +1,27 @@
 import React from 'react';
-
-const SongList = () => {
+import Song from './Song';
+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.filter(song => song.title.toLowerCase().includes(props.filterTerm.toLowerCase())).map(song => <Song handleClick={props.handleClick} songObj={song}/> )}
+        {/* {props.songs.map(song => <Song handleClick={props.handleClick} songObj={song}/> )} */}
 
       </tbody>
     </table>
   )
 }
 
 export default SongList;
+
+
+// 11:43 finished milestone 1

src/components/VoteBar.js

@@ -1,19 +1,24 @@
 import React from 'react';
 
-const VoteBar = ({ upTitle, voteUp, downTitle, voteDown }) => {
+// const VoteBar = ({ object, upTitle, voteUp, downTitle, voteDown }) => {
+const VoteBar = (props) => {
+  // console.log(upTitle)
   return (
     <div className="vote-bar">
       <button
         className="pure-button up-button"
-        onClick={voteUp}
+        onClick={() => props.handleLikeIncrement(props.object)}
       >
-        {upTitle}
+        {/* {upTitle} */}
+        Like
       </button>
       <button
         className="pure-button down-button"
-        onClick={voteDown}
+        // onClick={voteDown}
+        onClick={()=> props.handleDislikeIncrement(props.object)}
       >
-        {downTitle}
+        {/* {downTitle} */}
+        Dislike
       </button>
     </div>
   )

src/containers/App.js

@@ -2,12 +2,77 @@ import React, { Component } from 'react';
 import Header from '../components/Header';
 import KaraokeContainer from './KaraokeContainer';
 
+const endpoint = 'http://localhost:4000/users/2/songs'
 class App extends Component {
+
+  state = {
+    songs: []
+  }
+
+  componentDidMount(){
+    fetch('http://localhost:4000/users/2/songs')
+    .then(response => response.json())
+    .then(songsJSON => 
+      this.setState({
+        songs: songsJSON
+      })
+    )
+  }
+// if like is pressed then do this
+
+  handleLikeIncrement = (object) => {
+    console.log(object)
+    const id = object.id
+    const copylikes = object.likes
+
+    // componentDidMount(){
+      fetch(endpoint + '/' + id,
+      {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          "likes": copylikes + 1
+        })
+      })
+      .then(response => response.json())
+      .then(console.log('done'))
+    // }
+  }
+
+  handleDislikeIncrement = (object) => {
+    console.log(object)
+    const id = object.id
+    const copydislikes = object.dislikes
+
+    // componentDidMount(){
+      fetch(endpoint + '/' + id,
+      {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          "dislikes": copydislikes + 1
+        })
+      })
+      .then(response => response.json())
+      .then(console.log('done'))
+    // }
+  }
+
+
+
+  //patch here to change the likes?
+
+
+
   render() {
     return (
       <div className="app">
         <Header />
-        <KaraokeContainer />
+        <KaraokeContainer  handleDislikeIncrement={this.handleDislikeIncrement} handleLikeIncrement={this.handleLikeIncrement} songs={this.state.songs}/>
       </div>
     );
   }

src/containers/KaraokeContainer.js

@@ -3,19 +3,78 @@ import Filter from '../components/Filter';
 import SongList from '../components/SongList';
 import KaraokeDisplay from '../components/KaraokeDisplay';
 import songs from '../data/songs';
+import NavBar from '../components/NavBar'
 
+const endpoint = 'http://localhost:4000/users/2/songs'
 class KaraokeContainer extends Component {
+
+  state = {
+    shownlyrics: '',
+    title: '',
+    filterTerm: '',
+    object: {},
+    playing: false,
+    // playcount: 0,
+    queue: [],
+  }
+
+  handleClick = (obj) => {
+    // play BUTTON in here
+    //here i click get the obj send that obj down karaokedisplaay show the lyrics
+    // console.log(obj)
+    this.setState({
+      shownlyrics: obj.lyrics,
+      title: obj.title,
+      object: obj,
+      playing: !this.state.playing,
+      // playcount: this.state.playcount + 1,
+      queue: [...this.state.queue, obj]
+    })
+
+    console.log('I WANT TO PATCH PLAYS HEREEEEE')
+    const id = obj.id
+    const copyplays = obj.plays
+
+    // componentDidMount(){
+      fetch(endpoint + '/' + id,
+      {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          "plays": copyplays + 1
+        })
+      })
+      .then(response => response.json())
+      .then(console.log('done'))
+    // }
+  }
+
+  handleChange = (event) => {
+    //here I change filter Term to whatever is type in
+    console.log(event.target.value)
+    this.setState({
+      filterTerm: event.target.value
+    })
+  }
+
+  ///here I would show the queue
+
+
   render() {
     return (
       <div className="karaoke-container">
         <div className="sidebar">
-          <Filter />
-          <SongList />
+          <Filter handleChange={this.handleChange}/>
+          <NavBar queue={this.state.queue}/>
+          <SongList  filterTerm={this.state.filterTerm} handleClick={this.handleClick} songs={this.props.songs}/>
         </div>
-        <KaraokeDisplay />
+        <KaraokeDisplay  handleDislikeIncrement={this.props.handleDislikeIncrement} handleLikeIncrement={this.props.handleLikeIncrement} playing={this.state.playing} object={this.state.object} lyrics={this.state.shownlyrics} title={this.state.title}/>
       </div>
     );
   }
 }
 
 export default KaraokeContainer;
+// playcount={this.state.playcount}