Jammming Bug encountered when hitting Save Playlist but Playlist still submits Confused!

Web Development Full-Stack
1

Hi Guys,

I’ve encountered a bug in my code that I’m not sure how to remedy.
Whenever I hit the ‘Save Playlist’ button it submits the playlist with its tracks to the relelvant Spotify account and seemingly works however, it also throws an error to me saying that the function used to save the playlist is undefined.
After the playlist is saved I’m then attempting to reset the playlist name and playlist tracks but the error fires off before this so it never happens.

This is the error message I get back after hitting the save playlist button;

ERROR
savePlaylist(...) is undefined
handleSubmitPlaylist@http://localhost:3000/main.41c396ad7a7587e28337.hot-update.js:125:17
callCallback@http://localhost:3000/static/js/bundle.js:10740:18
invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:10784:20
invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:10841:35
invokeGuardedCallbackAndCatchFirstError@http://localhost:3000/static/js/bundle.js:10855:29
executeDispatch@http://localhost:3000/static/js/bundle.js:14998:46
processDispatchQueueItemsInOrder@http://localhost:3000/static/js/bundle.js:15024:26
processDispatchQueue@http://localhost:3000/static/js/bundle.js:15035:41
dispatchEventsForPlugins@http://localhost:3000/static/js/bundle.js:15044:27
./node_modules/react-dom/cjs/react-dom.development.js/dispatchEventForPluginEventSystem/<@http://localhost:3000/static/js/bundle.js:15204:16
batchedUpdates$1@http://localhost:3000/static/js/bundle.js:29622:16
batchedUpdates@http://localhost:3000/static/js/bundle.js:10588:16
dispatchEventForPluginEventSystem@http://localhost:3000/static/js/bundle.js:15203:21
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay@http://localhost:3000/static/js/bundle.js:12710:42
dispatchEvent@http://localhost:3000/static/js/bundle.js:12704:88
dispatchDiscreteEvent@http://localhost:3000/static/js/bundle.js:12681:22

I assume it must have something to do with how I’ve written the save playlist function and how it works but I’m completely lost in the sauce on this one.

I have a handler function in my App.js

  const handleSubmitPlaylist = () => {
    const trackUris = playlistTracks.map((track) => track.uri);
    savePlaylist(playlistName, trackUris).then(() => {
      setPlaylistName('');
      setPlaylistTracks([]);
    });
  };

Which then references these functions in my Spotify.js file;

 const savePlaylist = (playlistName, trackUris) => {
    if (!playlistName || !trackUris.length) {
      return;
    }
    createPlaylist(playlistName).then(response => { 
      const playlistId = response.id; 
      addItemsToPlaylist(playlistId, trackUris)
    });
    
  };

  //Create playlists
  async function createPlaylist(playlistName) {
    const response = await fetch(`https://api.spotify.com/v1/users/${userData.id}/playlists`, {
        method: 'POST',
        headers: { 'Authorization': 'Bearer ' + currentToken.access_token,
          'Content-Type': 'application/json'
          },
        body: JSON.stringify ({
          "name": `${playlistName}`
        })
    });

    return await response.json();
  };

  //Add Items to playlist
  async function addItemsToPlaylist(playlistId, trackUris) {
    const response = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}/tracks`, {
      method: 'POST',
      headers: { 'Authorization': 'Bearer ' + currentToken.access_token,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({uris: trackUris})
    });

    return await response.json();
  };

Any fresh eyes that could help would be greatly appreciated.
(Also please excuse the look of this at the minute, I haven’t really put any work into the styling yet so its looking pretty ugly!!)

Here is my repo;
https://github.com/ther4tm/playr.git

2

So I’ve found a solution.
I think the problem was rooted in the savePlaylist function.
I’ve re-factored the code to be;

 const savePlaylist = (playlistName, trackUris) => {
    createPlaylist(playlistName).then(response => { //Creates a playlist
      const playlistId = response.id; //Get the Id for the created playlist to use in next step
      addItemsToPlaylist(playlistId, trackUris) //Add tracks to new playlist
    });
  };

…and then I’ve relocated the conditional statement to sit somewhere less conflicting within the code.
Everything seems to be working just fine now!