Jackie F - Radio Lovelace

src/App.js

@@ -7,17 +7,63 @@ import songData from './data/tracks.json';
 
 songData.forEach((song, i) => {
   song.id = i;
+  song.favorite = false;
 });
 
 class App extends Component {
+
+  constructor() {
+    super();
+
+    this.state = {
+      allSongs: songData
+    };
+  }
+
+  sortTracks = (track) => {
+    if (track.props.side === "Morning") {
+      for (let song of this.state.allSongs) {
+        if (song.id === track.props.id) {
+          let trackArray = [...this.state.allSongs]
+          let removedTrack = trackArray.splice(song.id, 1)
+          trackArray.unshift(removedTrack[0])
+          this.setState({allSongs: trackArray}, () => {
+            console.log(this.state.allSongs)
+          });
+        }
+      }
+    } else {
+      // for (let song of this.state.allSongs) {
+      //   if (song.id === track.props.id) {
+      //     let trackArray = [...this.state.allSongs]
+      //     let removedTrack = [...this.state.allSongs].splice(song.id + 42, 1)
+      //     let firstHalf = [...this.state.allSongs].slice(0, 42)
+      //     let secondHalf = [...this.state.allSongs].slice(43, this.state.allSongs.length)
+      //     secondHalf.unshift(removedTrack[0])
+      //     console.log("second half:")
+      //     console.log(secondHalf)
+      //     let trackArray = firstHalf.concat(secondHalf)
+      //     // console.log(trackArray)
+      //     this.setState({allSongs: trackArray}, () => {
+      //       console.log(this.state.allSongs)
+      //     });
+      //   }
+      // }
+
+    }
+  }
+
   render() {
+
     return (
       <div className="App">
         <header>
           <h1 className="page-header--title">Radio Lovelace</h1>
         </header>
         <main className="main">
-          <RadioSet tracks={songData} />
+          <RadioSet
+          tracks={this.state.allSongs}
+           />
         </main>
       </div>
     );

src/components/Playlist.js

@@ -1,61 +1,66 @@
-import React from 'react'
+import React, { Component } from 'react';
 import PropTypes from 'prop-types'
 import './styles/Playlist.css';
 
 import Track from './Track';
 
-const calculatePlayTime = (tracks) => {
-  let minutes = 0;
-  let seconds = 0;
-  tracks.forEach((track) => {
-    const times = track.playtime.split(':');
-    minutes += parseInt(times[0]);
-    seconds += parseInt(times[1]);
-  });
 
-  minutes += Math.floor(seconds / 60);
-  const hours = Math.floor(minutes / 60);
+class Playlist extends Component {
 
-  seconds %= 60;
-  minutes %= 60;
 
-  seconds = ("" + seconds).padStart(2, "0");
-  minutes = ("" + minutes).padStart(2, "0");
+  calculatePlayTime = (tracks) => {
+      let minutes = 0;
+      let seconds = 0;
+      this.props.tracks.forEach((track) => {
+        const times = track.playtime.split(':');
+        minutes += parseInt(times[0]);
+        seconds += parseInt(times[1]);
+      });
+
+    minutes += Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+
+    seconds %= 60;
+    minutes %= 60;
+
+    seconds = ("" + seconds).padStart(2, "0");
+    minutes = ("" + minutes).padStart(2, "0");
+
+    return `${hours}:${minutes}:${seconds}`;
+  }
+
+
+render() {
+  const playtime = this.calculatePlayTime(this.props.tracks)
+
+  const trackList = this.props.tracks
+        .map((track, i)  => {
+            return (
+              <Track
+                key={`${track.title}${track.artist}`}
+                {...track}
+                id={i}
+                side={this.props.side}
+                switchPlayListCallback = {this.props.switchPlayListCallback}
+                sortTracksCallback = {this.props.sortTracksCallback}
+              />
+            )
+        })
 
-  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 
-    // the variable 'track' as props. Go look it up!
     return (
-      <Track
-        key={i}
-        {...track}
-      />
+      <div className="playlist">
+        <h2>{this.props.side} Playlist</h2>
+        <p>
+          {this.props.tracks.length} tracks - {playtime}
+        </p>
+        <ul className="playlist--track-list">
+          {trackList}
+        </ul>
+      </div>
     );
-  });
-
-  return (
-    <div className="playlist">
-      <h2>{props.side} Playlist</h2>
-      <p>
-        {trackCount} tracks - {playtime}
-      </p>
-      <ul className="playlist--track-list">
-        {trackElements}
-      </ul>
-    </div>
-  );
 }
 
-Playlist.propTypes = {
-  tracks: PropTypes.array,
-  side: PropTypes.string,
 }
 
 export default Playlist;

src/components/RadioSet.js

@@ -1,28 +1,107 @@
-import React from 'react';
+import React, { Component } from 'react';
 import "./styles/RadioSet.css";
 
 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(props);
+    console.log(`Radio set for ${props.tracks.length} tracks`);
+
+    this.state = {
+        morningTracks: this.props.tracks.slice(0, this.props.tracks.length / 2),
+        eveningTracks: this.props.tracks.slice(this.props.tracks.length / 2, this.props.tracks.length)
+      };
+  }
+
+  switchPlayList = (track, favStar) => {
+    let morningTrackArray = [...this.state.morningTracks]
+    let eveningTrackArray = [...this.state.eveningTracks]
+
+    if (track.props.side === "Morning") {
+      for (let song of morningTrackArray) {
+        if (track.props.title === song.title){
+          let removedTrack = morningTrackArray.splice(track.props.id, 1)
+          eveningTrackArray.unshift(removedTrack[0])
+          eveningTrackArray[0].favorite = favStar
+
+          this.setState({morningTracks: morningTrackArray}, () => {
+            console.log(this.state.morningTracks)
+          });
+          this.setState({eveningTracks: eveningTrackArray}, () => {
+            console.log(this.state.eveningTracks)
+          });
+        }
+      }
+    } else {
+      for (let song of eveningTrackArray) {
+        if (track.props.title === song.title){
+          let removedTrack = eveningTrackArray.splice(track.props.id, 1)
+          morningTrackArray.unshift(removedTrack[0])
+          morningTrackArray[0].favorite = favStar
+
+          this.setState({morningTracks: morningTrackArray}, () => {
+            console.log(this.state.morningTracks)
+          });
+          this.setState({eveningTracks: eveningTrackArray}, () => {
+            console.log(this.state.eveningTracks)
+          });
+        }
+      }
+    }
+  }
+
+  sortTracks = (track) => {
+    if (track.props.side === "Morning") {
+      for (let song of this.state.morningTracks) {
+        if (track.props.title === song.title){
+          let trackArray = [...this.state.morningTracks]
+          let removedTrack = trackArray.splice(track.props.id, 1)
+          trackArray.unshift(removedTrack[0])
+          this.setState({morningTracks: trackArray}, () => {
+            console.log(this.state.morningTracks)
+          });
+        }
+      }
+    } else {
+      for (let song of this.state.eveningTracks) {
+          if (track.props.title === song.title) {
+            let trackArray = [...this.state.eveningTracks]
+            let removedTrack = trackArray.splice(track.props.id, 1)
+            trackArray.unshift(removedTrack[0])
+            this.setState({eveningTracks: trackArray}, () => {
+              console.log(this.state.eveningTracks)
+            });
+          }
+      }
+    }
+  }
+
+
+  render() {
+
+      return (
+        <div className="radio-set">
+          <section className="radio-set--playlist-container">
+            <Playlist
+              side="Morning"
+              tracks={this.state.morningTracks}
+              switchPlayListCallback = {this.switchPlayList}
+              sortTracksCallback = {this.sortTracks}
+            />
+            <Playlist
+              side="Evening"
+              tracks={this.state.eveningTracks}
+              switchPlayListCallback = {this.switchPlayList}
+              sortTracksCallback = {this.sortTracks}
+            />
+          </section>
+        </div>
+      );
   };
-  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>
-  );
-};
-
-export default RadioSet;
+
+}
+
+export default RadioSet;