From 1aa8f0eb870659510c09c2816b0572de188a51c6 Mon Sep 17 00:00:00 2001
From: Jessie Zhang <zhang_jessie2017@outlook.com>
Date: Sat, 8 Dec 2018 20:52:49 -0800
Subject: [PATCH 1/5] fixed the favorite switch button

---
 src/components/Playlist.js | 10 ++++++----
 src/components/Track.js    |  4 +++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/Playlist.js b/src/components/Playlist.js
index 46b997c..44ec2e5 100644
--- a/src/components/Playlist.js
+++ b/src/components/Playlist.js
@@ -23,18 +23,20 @@ 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}`}
         {...track}
       />
     );
@@ -50,7 +52,7 @@ const Playlist = (props) => {
         {trackElements}
       </ul>
     </div>
-  );
+  )
 }
 
 Playlist.propTypes = {
diff --git a/src/components/Track.js b/src/components/Track.js
index 39103c9..5608e93 100644
--- a/src/components/Track.js
+++ b/src/components/Track.js
@@ -13,7 +13,9 @@ const Track = ({title, artist, playtime, albumart, favorite}) => {
       <input
         type="checkbox"
         className="track--favorite"
-        checked={!favorite}
+        // checked={!favorite}
+        defaultChecked={!favorite}
+        cd
       />
       <p className="track--artist">{artist}</p>
       <p className="track--playtime">{playtime}</p>

From ae2a2a1b817985ebc3ec5cc71effaa2d93ac7d4a Mon Sep 17 00:00:00 2001
From: Jessie Zhang <zhang_jessie2017@outlook.com>
Date: Sun, 9 Dec 2018 18:38:05 -0800
Subject: [PATCH 2/5] complete the task to move a track to the top of its own
 playlist

---
 src/App.js                 | 27 ++++++++++++++++++++++++++-
 src/components/Playlist.js | 12 ++++++++++++
 src/components/RadioSet.js | 16 +++++++++++++++-
 src/components/Track.js    | 22 ++++++++++++++++------
 4 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/src/App.js b/src/App.js
index 0218b3b..47aef04 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,14 +10,39 @@ songData.forEach((song, i) => {
 });
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tracks: songData
+
+    }
+  }
+
+  goTop = (index)=>{
+     let updatedTracks = this.state.tracks;
+     let length2 = updatedTracks.length / 2;
+
+     let temp = updatedTracks.splice(index,1)[0];
+     console.log(temp);
+     if (index >= length2) {
+       updatedTracks.splice(length2, 0, temp);
+     }else{
+       updatedTracks.unshift(temp);
+     }
+     this.setState({tracks: updatedTracks});
+  }
+
+
   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.tracks} appCallback={this.goTop}/>
         </main>
       </div>
     );
diff --git a/src/components/Playlist.js b/src/components/Playlist.js
index 44ec2e5..d354ccb 100644
--- a/src/components/Playlist.js
+++ b/src/components/Playlist.js
@@ -26,17 +26,29 @@ const calculatePlayTime = (tracks) => {
 };
 
 
+
 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!
 
+
+    const makeTopCallback  = (i)=>{
+      // console.log(props);
+      props.topCallback(i);
+    };
+
     return (
       <Track
         key={`${track.title}${track.artist}`}
+        index= {i}
+        toTopCallback = {makeTopCallback}
         {...track}
       />
     );
diff --git a/src/components/RadioSet.js b/src/components/RadioSet.js
index 4796d9c..19cacec 100644
--- a/src/components/RadioSet.js
+++ b/src/components/RadioSet.js
@@ -9,20 +9,34 @@ const RadioSet = (props) => {
     morningTracks: props.tracks.slice(0, props.tracks.length / 2),
     eveningTracks: props.tracks.slice(props.tracks.length / 2, props.tracks.length)
   };
+
+  const radioCallbackLeft =(index)=>{
+    // console.log(props);
+    props.appCallback(index);
+  };
+
+  const radioCallbackRight =(index)=>{
+    // console.log(props);
+    props.appCallback(index + playlists.morningTracks.length);
+  };
+
+
   return (
     <div className="radio-set">
       <section className="radio-set--playlist-container">
         <Playlist
           side="Morning"
           tracks={playlists.morningTracks}
+          topCallback={radioCallbackLeft}
         />
         <Playlist
           side="Evening"
           tracks={playlists.eveningTracks}
+          topCallback={radioCallbackRight}
         />
       </section>
     </div>
   );
 };
 
-export default RadioSet;
\ No newline at end of file
+export default RadioSet;
diff --git a/src/components/Track.js b/src/components/Track.js
index 5608e93..50064c6 100644
--- a/src/components/Track.js
+++ b/src/components/Track.js
@@ -5,22 +5,32 @@ 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}) => {
+const Track = (props) => {
+  const trackToTopClick = ()=>{
+    // console.log(props);
+    props.toTopCallback(props.index);
+  };
+
   return (
     <li className="track">
-      <img className="track--albumart" alt={`album art for ${title}`} src={albumart} />
-      <h3 className="track--title">{title}</h3>
+      <img className="track--albumart" alt={`album art for ${props.title}`} src={props.albumart} />
+      <h3 className="track--title">{props.title}</h3>
       <input
         type="checkbox"
         className="track--favorite"
         // checked={!favorite}
-        defaultChecked={!favorite}
+        defaultChecked={!props.favorite}
         cd
       />
-      <p className="track--artist">{artist}</p>
-      <p className="track--playtime">{playtime}</p>
+      <p className="track--artist">{props.artist}</p>
+      <p className="track--playtime">{props.playtime}</p>
       <button
         className="track--control track--to-top"
+        onClick ={trackToTopClick}
         >
         <span role="img" aria-label="send to top">🔝</span>
       </button>

From 07c4d61cf8e93d7abebe30bd310f702b21b5d74d Mon Sep 17 00:00:00 2001
From: Jessie Zhang <zhang_jessie2017@outlook.com>
Date: Sun, 9 Dec 2018 19:47:41 -0800
Subject: [PATCH 3/5] complete the task to move a trek sideways

---
 src/App.js                 | 36 +++++++++++++++++++++++++++++++-----
 src/components/Playlist.js | 10 ++++++++--
 src/components/RadioSet.js | 36 ++++++++++++++++++++++++++----------
 src/components/Track.js    |  5 +++++
 4 files changed, 70 insertions(+), 17 deletions(-)

diff --git a/src/App.js b/src/App.js
index 47aef04..953e26c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,17 +13,19 @@ class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      tracks: songData
-
+      tracks: songData,
+      leftCount: songData.length / 2,
     }
   }
 
+
+
   goTop = (index)=>{
      let updatedTracks = this.state.tracks;
-     let length2 = updatedTracks.length / 2;
+     let length2 = this.state.leftCount;
 
      let temp = updatedTracks.splice(index,1)[0];
-     console.log(temp);
+
      if (index >= length2) {
        updatedTracks.splice(length2, 0, temp);
      }else{
@@ -32,6 +34,25 @@ class App extends Component {
      this.setState({tracks: updatedTracks});
   }
 
+  switchSide = (index)=>{
+     let updatedTracks = this.state.tracks;
+     let updatedLeftCount = this.state.leftCount;
+
+     let temp = updatedTracks.splice(index,1)[0];
+
+     if (index >= updatedLeftCount) {
+       updatedLeftCount += 1;
+       updatedTracks.unshift(temp);
+
+     }else{
+       updatedLeftCount -= 1;
+       updatedTracks.splice(updatedLeftCount, 0, temp);
+     }
+     this.setState({tracks: updatedTracks});
+     this.setState({leftCount: updatedLeftCount});
+
+  }
+
 
   render() {
 
@@ -42,7 +63,12 @@ class App extends Component {
           <h1 className="page-header--title">Radio Lovelace</h1>
         </header>
         <main className="main">
-          <RadioSet tracks={this.state.tracks} appCallback={this.goTop}/>
+          <RadioSet
+            tracks={this.state.tracks}
+            appCallback={this.goTop}
+            appSwitchCallback={this.switchSide}
+            leftTrekCount={this.state.leftCount}
+          />
         </main>
       </div>
     );
diff --git a/src/components/Playlist.js b/src/components/Playlist.js
index d354ccb..8ce2054 100644
--- a/src/components/Playlist.js
+++ b/src/components/Playlist.js
@@ -39,16 +39,22 @@ const Playlist = (props) => {
     // the variable 'track' as props. Go look it up!
 
 
-    const makeTopCallback  = (i)=>{
+    const makeTop = (i)=>{
       // console.log(props);
       props.topCallback(i);
     };
 
+    const makeSwitch  = (i)=>{
+      // console.log(props);
+      props.radioSwitchCallback(i);
+    };
+
     return (
       <Track
         key={`${track.title}${track.artist}`}
         index= {i}
-        toTopCallback = {makeTopCallback}
+        toTopCallback = {makeTop}
+        listSwitchCallback ={makeSwitch}
         {...track}
       />
     );
diff --git a/src/components/RadioSet.js b/src/components/RadioSet.js
index 19cacec..f2ed5b6 100644
--- a/src/components/RadioSet.js
+++ b/src/components/RadioSet.js
@@ -5,19 +5,33 @@ 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)
+
+  let playlists = {
+    morningTracks: props.tracks.slice(0, props.leftTrekCount),
+    eveningTracks: props.tracks.slice(props.leftTrekCount, props.tracks.length)
+  };
+
+
+  const radioTopRight =(index)=>{
+
+    props.appCallback(index + playlists.morningTracks.length);
+
   };
 
-  const radioCallbackLeft =(index)=>{
-    // console.log(props);
+  const radioTopLeft =(index)=>{
+
     props.appCallback(index);
+
   };
 
-  const radioCallbackRight =(index)=>{
-    // console.log(props);
-    props.appCallback(index + playlists.morningTracks.length);
+  const radioSwitchRight =(index)=>{
+
+    props.appSwitchCallback(index);
+  };
+
+  const radioSwitchLeft =(index)=>{
+
+    props.appSwitchCallback(index + playlists.morningTracks.length);
   };
 
 
@@ -27,12 +41,14 @@ const RadioSet = (props) => {
         <Playlist
           side="Morning"
           tracks={playlists.morningTracks}
-          topCallback={radioCallbackLeft}
+          topCallback={radioTopLeft}
+          radioSwitchCallback={radioSwitchRight}
         />
         <Playlist
           side="Evening"
           tracks={playlists.eveningTracks}
-          topCallback={radioCallbackRight}
+          topCallback={radioTopRight}
+          radioSwitchCallback={radioSwitchLeft}
         />
       </section>
     </div>
diff --git a/src/components/Track.js b/src/components/Track.js
index 50064c6..aa7fb0d 100644
--- a/src/components/Track.js
+++ b/src/components/Track.js
@@ -15,6 +15,10 @@ const Track = (props) => {
     props.toTopCallback(props.index);
   };
 
+  const trackSwitchClick = ()=>{
+    props.listSwitchCallback(props.index);
+  };
+
   return (
     <li className="track">
       <img className="track--albumart" alt={`album art for ${props.title}`} src={props.albumart} />
@@ -36,6 +40,7 @@ const Track = (props) => {
       </button>
       <button
         className="track--control track--switch"
+        onClick={trackSwitchClick}
         >
         <span role="img" aria-label="switch lists">↔</span>
       </button>

From 7d83ee0a200ae9ed9c87dd54aa49e863077da2f3 Mon Sep 17 00:00:00 2001
From: Jessie Zhang <zhang_jessie2017@outlook.com>
Date: Sun, 9 Dec 2018 21:06:32 -0800
Subject: [PATCH 4/5] changes on the setState method

---
 src/App.js                 | 3 +--
 src/components/RadioSet.js | 6 ++++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index 953e26c..6951fc9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -48,8 +48,7 @@ class App extends Component {
        updatedLeftCount -= 1;
        updatedTracks.splice(updatedLeftCount, 0, temp);
      }
-     this.setState({tracks: updatedTracks});
-     this.setState({leftCount: updatedLeftCount});
+     this.setState({tracks: updatedTracks,leftCount: updatedLeftCount});
 
   }
 
diff --git a/src/components/RadioSet.js b/src/components/RadioSet.js
index f2ed5b6..2014cb9 100644
--- a/src/components/RadioSet.js
+++ b/src/components/RadioSet.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import "./styles/RadioSet.css";
+import PropTypes from 'prop-types'
 
 import Playlist from './Playlist';
 
@@ -55,4 +56,9 @@ const RadioSet = (props) => {
   );
 };
 
+RadioSet.propTypes = {
+  tracks: PropTypes.array,
+  
+}
+
 export default RadioSet;

From 85f57b6c384e5eaf1e7922f1572bbcca15a11b1f Mon Sep 17 00:00:00 2001
From: Jessie Zhang <zhang_jessie2017@outlook.com>
Date: Mon, 10 Dec 2018 22:58:14 -0800
Subject: [PATCH 5/5] fixed the favorite bug when swifting , moving the state
 from app to radioset

---
 src/App.js                 |  54 +---------------
 src/components/Playlist.js |  16 +----
 src/components/RadioSet.js | 124 +++++++++++++++++++++++++++----------
 src/components/Track.js    |  28 +++------
 4 files changed, 107 insertions(+), 115 deletions(-)

diff --git a/src/App.js b/src/App.js
index 6951fc9..5f198db 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,3 +1,5 @@
+
+
 import React, { Component } from 'react';
 import './App.css';
 
@@ -10,64 +12,14 @@ songData.forEach((song, i) => {
 });
 
 class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      tracks: songData,
-      leftCount: songData.length / 2,
-    }
-  }
-
-
-
-  goTop = (index)=>{
-     let updatedTracks = this.state.tracks;
-     let length2 = this.state.leftCount;
-
-     let temp = updatedTracks.splice(index,1)[0];
-
-     if (index >= length2) {
-       updatedTracks.splice(length2, 0, temp);
-     }else{
-       updatedTracks.unshift(temp);
-     }
-     this.setState({tracks: updatedTracks});
-  }
-
-  switchSide = (index)=>{
-     let updatedTracks = this.state.tracks;
-     let updatedLeftCount = this.state.leftCount;
-
-     let temp = updatedTracks.splice(index,1)[0];
-
-     if (index >= updatedLeftCount) {
-       updatedLeftCount += 1;
-       updatedTracks.unshift(temp);
-
-     }else{
-       updatedLeftCount -= 1;
-       updatedTracks.splice(updatedLeftCount, 0, temp);
-     }
-     this.setState({tracks: updatedTracks,leftCount: updatedLeftCount});
-
-  }
-
-
   render() {
-
-
     return (
       <div className="App">
         <header>
           <h1 className="page-header--title">Radio Lovelace</h1>
         </header>
         <main className="main">
-          <RadioSet
-            tracks={this.state.tracks}
-            appCallback={this.goTop}
-            appSwitchCallback={this.switchSide}
-            leftTrekCount={this.state.leftCount}
-          />
+          <RadioSet tracks={songData} />
         </main>
       </div>
     );
diff --git a/src/components/Playlist.js b/src/components/Playlist.js
index 8ce2054..c9ac4c1 100644
--- a/src/components/Playlist.js
+++ b/src/components/Playlist.js
@@ -38,23 +38,13 @@ const Playlist = (props) => {
     // We use "spread syntax" here to pass in all the properties of
     // the variable 'track' as props. Go look it up!
 
-
-    const makeTop = (i)=>{
-      // console.log(props);
-      props.topCallback(i);
-    };
-
-    const makeSwitch  = (i)=>{
-      // console.log(props);
-      props.radioSwitchCallback(i);
-    };
-
     return (
       <Track
         key={`${track.title}${track.artist}`}
         index= {i}
-        toTopCallback = {makeTop}
-        listSwitchCallback ={makeSwitch}
+        toTopCallback = {() => props.topCallback(i)}
+        listSwitchCallback ={() => props.radioSwitchCallback(i)}
+        listFavoriteCallback ={() => props.radioFavoriteCallback(i)}
         {...track}
       />
     );
diff --git a/src/components/RadioSet.js b/src/components/RadioSet.js
index 2014cb9..f431570 100644
--- a/src/components/RadioSet.js
+++ b/src/components/RadioSet.js
@@ -1,64 +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`);
 
-  let playlists = {
-    morningTracks: props.tracks.slice(0, props.leftTrekCount),
-    eveningTracks: props.tracks.slice(props.leftTrekCount, 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});
+
   };
 
 
-  const radioTopRight =(index)=>{
+  radioSwitchRight =(index)=>{
+    let updatedMorningTracks = this.state.morningTracks;
+    let updatedEveningTracks = this.state.eveningTracks;
+
+    let temp = updatedMorningTracks.splice(index,1)[0];
 
-    props.appCallback(index + playlists.morningTracks.length);
+    updatedEveningTracks.unshift(temp);
+
+    this.setState({morningTracks: updatedMorningTracks, eveningTracks: updatedEveningTracks});
 
   };
 
-  const radioTopLeft =(index)=>{
+  radioSwitchLeft =(index)=>{
+    let updatedMorningTracks = this.state.morningTracks;
+    let updatedEveningTracks = this.state.eveningTracks;
+
+    let temp = updatedEveningTracks.splice(index,1)[0];
+
+    updatedMorningTracks.unshift(temp);
 
-    props.appCallback(index);
+    this.setState({morningTracks: updatedMorningTracks, eveningTracks: updatedEveningTracks});
 
   };
 
-  const radioSwitchRight =(index)=>{
+  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);
 
-    props.appSwitchCallback(index);
   };
 
-  const radioSwitchLeft =(index)=>{
+  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);
 
-    props.appSwitchCallback(index + playlists.morningTracks.length);
   };
 
 
-  return (
-    <div className="radio-set">
-      <section className="radio-set--playlist-container">
-        <Playlist
-          side="Morning"
-          tracks={playlists.morningTracks}
-          topCallback={radioTopLeft}
-          radioSwitchCallback={radioSwitchRight}
-        />
-        <Playlist
-          side="Evening"
-          tracks={playlists.eveningTracks}
-          topCallback={radioTopRight}
-          radioSwitchCallback={radioSwitchLeft}
-        />
-      </section>
-    </div>
-  );
+  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>
+    );
+  }
 };
 
 RadioSet.propTypes = {
   tracks: PropTypes.array,
-  
+
 }
 
 export default RadioSet;
diff --git a/src/components/Track.js b/src/components/Track.js
index aa7fb0d..71aecd5 100644
--- a/src/components/Track.js
+++ b/src/components/Track.js
@@ -8,39 +8,31 @@ import "./styles/Track.css";
 
 
 
-// const Track = ({title, artist, playtime, albumart, favorite}) => {
-const Track = (props) => {
-  const trackToTopClick = ()=>{
-    // console.log(props);
-    props.toTopCallback(props.index);
-  };
-
-  const trackSwitchClick = ()=>{
-    props.listSwitchCallback(props.index);
-  };
+const Track = ({title, artist, playtime, albumart, favorite, index, id,toTopCallback,listSwitchCallback, listFavoriteCallback}) => {
 
   return (
     <li className="track">
-      <img className="track--albumart" alt={`album art for ${props.title}`} src={props.albumart} />
-      <h3 className="track--title">{props.title}</h3>
+      <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}
-        defaultChecked={!props.favorite}
-        cd
+        defaultChecked={!favorite}
+        onChange={listFavoriteCallback}
+
       />
-      <p className="track--artist">{props.artist}</p>
-      <p className="track--playtime">{props.playtime}</p>
+      <p className="track--artist">{artist}</p>
+      <p className="track--playtime">{playtime}</p>
       <button
         className="track--control track--to-top"
-        onClick ={trackToTopClick}
+        onClick ={toTopCallback}
         >
         <span role="img" aria-label="send to top">🔝</span>
       </button>
       <button
         className="track--control track--switch"
-        onClick={trackSwitchClick}
+        onClick={listSwitchCallback}
         >
         <span role="img" aria-label="switch lists">↔</span>
       </button>