Package

[josephgupkim]

Missing package json file to setup your project on the local machine. Full review paused until necessary files are all present.

[oxley007]

Hi @josephgupkim,

I think I've pushed my code correctly this time. Please continue your review.

Thanks, Andrew

[oxley007]

Hi @josephgupkim ,

Just checking back to see if I have pushed the code correctly?

And when you will be able to continue the code review?

Kind regards, Andrew

[josephgupkim]

I am getting a compiling error now:

Uncaught Error: Cannot find module "../../util/Spotify.js" at Object../src/Components/App/App.js (App.css?71b7:26) at webpack_require (bootstrap a55002be3f75d23e6f1b:678) at fn (bootstrap a55002be3f75d23e6f1b:88) at Object../src/index.js (index.css?f255:26) at webpack_require (bootstrap a55002be3f75d23e6f1b:678) at fn (bootstrap a55002be3f75d23e6f1b:88) at Object.0 (registerServiceWorker.js:117) at __webpack_require__ (bootstrap a55002be3f75d23e6f1b:678) at ./node_modules/ansi-regex/index.js.module.exports (bootstrap a55002be3f75d23e6f1b:724) at bootstrap a55002be3f75d23e6f1b:724 index.js:2178 ./src/Components/App/App.js master/src/Components/App'

[oxley007]

@josephgupkim ,

Sorry man - the util directory didn't commit. Have added and commited it now.

Thanks for letting me know.

Thanks, Andrew

[oxley007]

@josephgupkim ,

Just following up to see if you no longer see the compile error.

Thanks, Andrew

[josephgupkim]

Getting quite a lot of console messages. Also, your project is showing up a bit distorted as I'm unable to properly render the site. Have one more thorough look and handle those error messages then get back to me.

[josephgupkim]

[josephgupkim]

Functionality seems to be there which is great but the overall aesthetics (and inclusion of debuggers) are a bit unappealing.

[oxley007]

@josephgupkim

thanks for your feedback.

I have tidied up the UI and removed the debuggers.

I know there will be a few errors - specifically on the 'save to spotify' as I got stuck on the getAccessToken method. Any help on how to store the token and access it would be greatly appreciated.

Thanks again! Andrew

[oxley007]

@josephgupkim

Just checking if you have seen the above? I have now updated the UI and debuggers.

If there are too many errors/logs to easily review, can you please send me the solution for the spotify.js file?

Kind regards, Andrew

[josephgupkim]

Try this:

const clientId = ''; // Insert client ID here. const redirectUri = ''; // Have to add this to your accepted Spotify redirect URIs on the Spotify API. let accessToken;

const Spotify = { getAccessToken() { if (accessToken) { return accessToken; }

const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/);
if (accessTokenMatch && expiresInMatch) {
  accessToken = accessTokenMatch[1];
  const expiresIn = Number(expiresInMatch[1]);
  window.setTimeout(() => accessToken = '', expiresIn * 1000);
  window.history.pushState('Access Token', null, '/'); // This clears the parameters, allowing us to grab a new access token when it expires.
  return accessToken;
} else {
  const accessUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectUri}`;
  window.location = accessUrl;
}

},

search(term) { const accessToken = Spotify.getAccessToken(); return fetch(https://api.spotify.com/v1/search?type=track&q=${term}, { headers: { Authorization: Bearer ${accessToken} } }).then(response => { return response.json(); }).then(jsonResponse => { if (!jsonResponse.tracks) { return []; } return jsonResponse.tracks.items.map(track => ({ id: track.id, name: track.name, artist: track.artists[0].name, album: track.album.name, uri: track.uri })); }); },

savePlaylist(name, trackUris) { if (!name || !trackUris.length) { return; }

const accessToken = Spotify.getAccessToken();
const headers = { Authorization: `Bearer ${accessToken}` };
let userId;

return fetch('https://api.spotify.com/v1/me', {headers: headers}
).then(response => response.json()
).then(jsonResponse => {
  userId = jsonResponse.id;
  return fetch(`https://api.spotify.com/v1/users/${userId}/playlists`, {
    headers: headers,
    method: 'POST',
    body: JSON.stringify({name: name})
  }).then(response => response.json()
  ).then(jsonResponse => {
    const playlistId = jsonResponse.id;
    return fetch(`https://api.spotify.com/v1/users/${userId}/playlists/${playlistId}/tracks`, {
      headers: headers,
      method: 'POST',
      body: JSON.stringify({uris: trackUris})
    });
  });
});

} };

export default Spotify;