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?

2 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.

1 Like
#7

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

 componentDidMount() {
   window.addEventListener('load', () => {Spotify.getAccessToken()});
 }
8 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