Todo

[boostup]

Bugs

• virtual keyboard appears when navigating away from search page. It should not.
• In night mode, Material UI Menu component backdrop is hiding the whole app UI, and the menu options are bearly legible
• Logout procedure -> because when logging out, all sagas for home page are triggering needlessly. BW, the automatic auth_error flow does it correctly => DRY
• Must rehydrate user after a full page browser refresh => isPlaylistOwner && isPlaylistFollowedByUser depend on this being correct, and also the user picture not showing in Avatar Area
• A crash was detected when track image is not supplied by API => was resolved by not displaying track that are local to user computer. By filtering those out, the API guarantees an image for every track.
• CSS bug : cannot scroll all the way down to the list of playlists, nor the list of songs => fixed by revamping the layout, which gave birth to the MainLayoutPageWrapper component
• CSS bug on the right of the footer (had to set it to 96% for some unknown reason) -> if I set box-sizing: border-box; on the footer, I can set its witdh to 100%, and this fixes the issue
• rehydrate token: when on routes like /library or /home, basically any route where the component makes an API request will fail if I reload the app using the reload button of the browser. This is because, as per the JS error in the console, the API did not receive the bearer token along with the request.

[boostup]

Quick note taking

• default playlist was Discover Weekly "37i9dQZEVXcDGlrEgKnU30"

• playlist with 100+ tracks : 37i9dQZF1DX32oVqaQE8BM - Chill Out Music

• album : http://localhost:3000/#/album/4kwN0SqdqyuOrp7e409uj4

General work

• virtualized list for
  - [ ] sidebar
  - [ ] ItemPage (=> TrackList component)

• Track More Icon : Copy track link to clipboard (React provides Synthetic events for this BTW)

Further to the integration of the new SpotifLy backend

Token Refresh

• Check if this is all that is need to refresh token, in which case, the whole process of refreshing token upon invalid access token response from Spotify API is return, becomes all much simpler !!
  • https://github.com/vercel/next.js/blob/bb1bdbb10fb7f8b4f5d6b05c5e63ba589151cb50/examples/cms-wordpress/lib/api.js#L103

  if (process.env.WORDPRESS_AUTH_REFRESH_TOKEN) {
    headers[
      'Authorization'
    ] = `Bearer ${process.env.WORDPRESS_AUTH_REFRESH_TOKEN}`
  }

• This backend functionality remains to be tested
• Check the following is still necessary and if so, make sure the code enforces it :
  • When starting auth with stored token:
    1. rehydrate Token & User data into the redux store in case the browser page refresh functionality was triggered by the user
    2. check token expiry prior to every Spotify API call. The authWithStoredTokenStart used to end up setting authState.success to false, which would redirect the user the login page. Now instead, the backen refresh token should be invoked prior any Spotify API call, to ensure this API does not throw an execption of the frontend app.

[boostup]

To research

When an item in the list below is checked, i means the research was done, but has not necessarily been integrated yet into code base.

• route animated transitions ?
• contentEditable (for possible playlist details edition)
• Firestore offline/online sync
• Unit Testing
• Migrate to project to NextJS
• check if infinite loading can be refactored using Vercel's SWR
• check if scroll detection can be refactored using the material ui hook
• Ellipsis for rows of options in the Playlists section of sidebar (color, vertical padding, one-line only, [ellipsis materialUI]
• finish intermediate and advanced tuts from the redux-toolkit
• inegration of redux-toolkit or setup redux for the redux devtools extension
• Implementing private routes : https://reactrouter.com/web/example/auth-workflow
• Spotify refresh token flow: https://www.youtube.com/watch?v=n6d4KHSKqGk&feature=youtu.be&t=556
• React-router transition animations: https://reactrouter.com/web/example/animated-transitions
  (https://material-ui.com/system/display/) ) | Typography -> noWrap
• How to handle the paginated playlist results from API ? Should I get all playlists at once, or should I do a sort of infinite loader ? the response object has properties next and previous which is a url I can fetch
• useReducer + sagas => Can we use redux-saga with useReducer? redux-saga/redux-saga#1692 (comment)
• combineReducers => https://codesandbox.io/s/combinereducers-a-la-redux-zdv7f?file=/src/index.js
• must i remove the :hover for touch screen on scrolling lists. It seems they are sporadically getting stuck.
• recoving from ErrorBoundary error=true => using a package called react-error-boundary that wraps ErrorBoundary, which seems much easier to work with

---

[boostup]

Clipboard

API field selection

//fields for playlist
id,name,description,images,owner(display_name),primary_color,type,tracks(limit,next,offset,total,items(track(id,name,album(album_type,artists),is_local,is_playable,popularity,duration_ms,explicit,artists)))

//@TODO fields for albums

Spotify API scopes

const scopes = [
  "user-read-currently-playing",
  "user-read-recently-played",
  "user-read-playback-state",
  "user-top-read",
  "user-modify-playback-state",
];

Me / Personnalisatin

• getRecommendations(
  

• getMyRecentlyPlayedTracks(
• getMyTopArtists(
• getMyTopTracks(
• containsMySavedTracks(
  trackIds: string[],
• addToMySavedTracks(
  trackIds: string[],
• removeFromMySavedTracks(
  trackIds: string[],
• getMySavedTracks

Music info

getNewReleases(
getAlbum(
getAlbumTracks(
getTrack(
getTracks(
trackIds: string[],
getArtist(
getArtistAlbums(
getArtistTopTracks(
getArtistRelatedArtists(
getNewReleases(

Playlist management

Following

isFollowingArtists(
followPlaylist(
unfollowPlaylist(

unfollowArtists(

Devices

getMyDevices():

Playback

getMyCurrentPlaybackState(
getMyCurrentPlayingTrack(
transferMyPlayback(
  deviceIds: string[],

• queue(
• play(options?: SpotifyApi.PlayParameterObject): Promise;
• pause(
• skipToNext(
• skipToPrevious(
• seek(
• setRepeat(
• setVolume( volumePercent: number,
• setShuffle(

  // for progress bar:
  // - currentplaybackState?.item.duration_ms
  // - currentplaybackState?.progress_ms

  // currentplaybackState?.repeat_state: track, context, off
  // currentplaybackState?.shuffle_state: true, false
  // currentplaybackState?.item.type: "track"
  // currentplaybackState?.currently_playing_type;
  // currentplaybackState?.timestamp;

  console.log("IS PLAYING", isPlaying);
  console.log("VOLUME PERCENT", volume);
  console.log("MUTE STATE", muteButtonState);
  console.log("SHUFFLE", shuffle);
  console.log("REPEAT", repeat);
  console.log("TRACK NAME", currentTrackName);
  console.log("ALBUM IMAGE", albumImage);
  console.log("ALBUM NAME", albumName);
  console.log("ARTISTS", artists);

    // => condition to reach bottom in case I need it: `element.scrollHeight - element.scrollTop === element.clientHeight`

  
    togglefollowPlaylist,
    isPlaylistFollowedByUser,
  

  const isFollowed = isPlaylistFollowedByUser({
    playlistId: id,
    userId: user.id,
  });



{/* <FavoriteIcon className="playlistToolbar__favorite" fontSize="large" /> */}

  <p>{/* {id} * {playlist?.owner.id} * {user.id} */}</p>
  
  import QueuePlayNextIcon from "@material-ui/icons/QueuePlayNext";
  import ExitToAppIcon from '@material-ui/icons/ExitToApp';
  import ShuffleIcon from "@material-ui/icons/Shuffle";
  import RepeatIcon from "@material-ui/icons/Repeat";
  import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";  

---

  // const userId = user?.id;
  // const isPlaylistOwner = playlist?.owner.id === userId;

      // userId &&
    //   !isPlaylistOwner &&
    //   isPlaylistFollowedByUser({ playlistId: id, userId }, dispatch);


            {/* <p>
            {id} * {playlist?.owner.id} * {userId}
          </p> */}

          //Toolbar

                    // isOwner={isPlaylistOwner}
          // isPlaylistFollower={}
          // toggleFollowPlaylist={}