radio-lovelace jessie

src/App.js

@@ -1,3 +1,5 @@
+
+
 import React, { Component } from 'react';
 import './App.css';
 

src/components/Playlist.js

@@ -23,18 +23,28 @@ const calculatePlayTime = (tracks) => {
   minutes = ("" + minutes).padStart(2, "0");
 
   return `${hours}:${minutes}:${seconds}`;
-}
+};
+
+
 
 const Playlist = (props) => {
   const tracks = props.tracks;
   const trackCount = tracks.length;
   const playtime = calculatePlayTime(tracks);
+
+
+
   const trackElements = tracks.map((track, i) => {
-    // We use "spread syntax" here to pass in all the properties of 
+    // We use "spread syntax" here to pass in all the properties of
     // the variable 'track' as props. Go look it up!
+
     return (
       <Track
-        key={i}
+        key={`${track.title}${track.artist}`}
+        index= {i}
+        toTopCallback = {() => props.topCallback(i)}
+        listSwitchCallback ={() => props.radioSwitchCallback(i)}
+        listFavoriteCallback ={() => props.radioFavoriteCallback(i)}
         {...track}
       />
     );
@@ -50,7 +60,7 @@ const Playlist = (props) => {
         {trackElements}
       </ul>
     </div>
-  );
+  )
 }
 
 Playlist.propTypes = {

src/components/RadioSet.js

@@ -1,28 +1,122 @@
-import React from 'react';
+
+
+import React, { Component } from 'react';
+
 import "./styles/RadioSet.css";
+import PropTypes from 'prop-types'
 
 import Playlist from './Playlist';
 
-const RadioSet = (props) => {
-  console.log(`Radio set for ${props.tracks.length} tracks`);
-  const playlists = {
-    morningTracks: props.tracks.slice(0, props.tracks.length / 2),
-    eveningTracks: props.tracks.slice(props.tracks.length / 2, props.tracks.length)
+
+class RadioSet extends Component {
+  constructor(props) {
+    super();
+
+    this.state = {
+      morningTracks: props.tracks.slice(0, props.tracks.length / 2),
+      eveningTracks: props.tracks.slice(props.tracks.length / 2, props.tracks.length)
+    }
+
+  }
+
+
+  radioTopLeft =(index)=>{
+    let updatedMorningTracks = this.state.morningTracks;
+    let temp = updatedMorningTracks.splice(index,1)[0];
+
+    updatedMorningTracks.unshift(temp);
+
+    this.setState({morningTracks: updatedMorningTracks});
+
+  };
+
+  radioTopRight =(index)=>{
+    let updatedEveningTracks = this.state.eveningTracks;
+    let temp = updatedEveningTracks.splice(index,1)[0];
+    updatedEveningTracks.unshift(temp);
+    this.setState({eveningTracks: updatedEveningTracks});
+
+  };
+
+
+  radioSwitchRight =(index)=>{
+    let updatedMorningTracks = this.state.morningTracks;
+    let updatedEveningTracks = this.state.eveningTracks;
+
+    let temp = updatedMorningTracks.splice(index,1)[0];
+
+    updatedEveningTracks.unshift(temp);
+
+    this.setState({morningTracks: updatedMorningTracks, eveningTracks: updatedEveningTracks});
+
   };
-  return (
-    <div className="radio-set">
-      <section className="radio-set--playlist-container">
-        <Playlist
-          side="Morning"
-          tracks={playlists.morningTracks}
-        />
-        <Playlist
-          side="Evening"
-          tracks={playlists.eveningTracks}
-        />
-      </section>
-    </div>
-  );
+
+  radioSwitchLeft =(index)=>{
+    let updatedMorningTracks = this.state.morningTracks;
+    let updatedEveningTracks = this.state.eveningTracks;
+
+    let temp = updatedEveningTracks.splice(index,1)[0];
+
+    updatedMorningTracks.unshift(temp);
+
+    this.setState({morningTracks: updatedMorningTracks, eveningTracks: updatedEveningTracks});
+
+  };
+
+  radioFavoriteLeft =(index)=>{
+     const newState = {...this.state};
+     const playlistTracks = [...newState["morningTracks"]];
+     const track = {...playlistTracks[index]};
+
+     track.favorite = !track.favorite;
+
+     playlistTracks[index] = track;
+     newState["morningTracks"] = playlistTracks;
+     this.setState(newState);
+
+  };
+
+  radioFavoriteRight =(index)=>{
+     const newState = {...this.state};
+     const playlistTracks = [...newState["eveningTracks"]];
+     const track = {...playlistTracks[index]};
+
+     track.favorite = !track.favorite;
+
+     playlistTracks[index] = track;
+     newState["eveningTracks"] = playlistTracks;
+     this.setState(newState);
+
+  };
+
+
+  render() {
+    return (
+      <div className="radio-set">
+        <section className="radio-set--playlist-container">
+          <Playlist
+            side="Morning"
+            tracks={this.state.morningTracks}
+            topCallback={this.radioTopLeft}
+            radioSwitchCallback={this.radioSwitchRight}
+            radioFavoriteCallback={this.radioFavoriteLeft}
+          />
+          <Playlist
+            side="Evening"
+            tracks={this.state.eveningTracks}
+            topCallback={this.radioTopRight}
+            radioSwitchCallback={this.radioSwitchLeft}
+            radioFavoriteCallback={this.radioFavoriteRight}
+          />
+        </section>
+      </div>
+    );
+  }
 };
 
-export default RadioSet;
+RadioSet.propTypes = {
+  tracks: PropTypes.array,
+
+}
+
+export default RadioSet;

src/components/Track.js

@@ -5,25 +5,34 @@ import "./styles/Track.css";
 
 // Here we use destructuring to extract the props into separate variables
 // See https://wesbos.com/destructuring-objects/
-const Track = ({title, artist, playtime, albumart, favorite}) => {
+
+
+
+const Track = ({title, artist, playtime, albumart, favorite, index, id,toTopCallback,listSwitchCallback, listFavoriteCallback}) => {
+
   return (
     <li className="track">
       <img className="track--albumart" alt={`album art for ${title}`} src={albumart} />
       <h3 className="track--title">{title}</h3>
       <input
         type="checkbox"
         className="track--favorite"
-        checked={!favorite}
+        // checked={!favorite}
+        defaultChecked={!favorite}
+        onChange={listFavoriteCallback}
+
       />
       <p className="track--artist">{artist}</p>
       <p className="track--playtime">{playtime}</p>
       <button
         className="track--control track--to-top"
+        onClick ={toTopCallback}
         >
         <span role="img" aria-label="send to top">🔝</span>
       </button>
       <button
         className="track--control track--switch"
+        onClick={listSwitchCallback}
         >
         <span role="img" aria-label="switch lists">↔</span>
       </button>