Jammming Page refresh after first song search

Projects
,
#1

I completed the Jamming project and was able to build it with surge. The link to this app is: http://time-to-jam.surge.sh/ .

My issue is that after a user authenticates their Spotify account and then refreshes the page, the first search results in a list of songs that then vanish or they don’t appear at all. However after this first search all of the songs show up as they should from there on out. Only after a user refreshes the page and tries to search again does stuff vanish or the page refreshes itself.

I found another classmates project on Github and opened it and found that they also had the same issue. Is there a way to avoid this?

6 Likes
#2

hi Alex,
AJAX requests like fetch() are cached by browsers. To check this try input a new name of song or artist which you have never inputted before, you will see the error.

Jamming REACT (general question)
#3

Hi! I have the same problem. Inputting a new artist/song doesn’t help. Is there another way to fix it?

#4

Can you link a source where you explain a bit more? I have this problem and i dont know how to adress it in order to solve it

1 Like
#5
#6

You can run an empty search the first time, which will reload the page and allow you to search with no problems. Knowing this, I chose to force an empty search automatically when the page loads by adding the following code to the App component:

 componentDidMount() {
    window.addEventListener('load', Spotify.search(''));
  }

This has the added benefit of bringing up the login screen automatically when the page loads if you are not already logged in.

4 Likes
#7

You can directly obtain the access token, which is slightly cleaner than using search I guess.

 componentDidMount() {
   window.addEventListener('load', () => {Spotify.getAccessToken()});
 }
23 Likes
#8

Hey @alex.debolt even I’m facing this problem how did you solve it?

#9

Hi @b_ma,
The solution’s given by @michaelwonka is a good one.
It’s worked for me.

#10

Worked, thanks @michaelwonka

#11

One question, how did you implement his solution? Where do you add the componentDidMount bit?

#12

I am facing the same problem. I am pretty sure i have written the correct code. Whenever i search for a track, it shows the tracklist the first time but it immediately disappears, and i can’t search for any other track for some time.
Can anyone help?

#13

Hey, have a read of your code in spotify.js- where would it go in that component? if you haven’t figured it out yet, let me know. :slight_smile:

#14

In the end I ended up placing it on App.js and it worked. Did you add it to Spotify.js?

#15

thats good to hear you managed to find a way to get it to work, i added mine at the end of spotify.js :slight_smile:

1 Like
#16

Thanks for the solution. it works. Why is this a more elegant method than just triggering Spotify.search as above?

#17

It’s been a while but IIRC it obtains it as the page loads and not when you search. Essentially a pre load.

#18

I was also having this issue, and the solution by michaelwonka worked nicely. Thank you!

#19

Great solution. But why not just call the Spotify.getAccessToken() in componentDidMount without using EventListener?

1 Like