- Created the endpoint for user authorization and authentication.
- spotify-web-api-js is installed using npm, and initialized and set to spotify
- Wrapped the App component in the index.js in a DatalayerContext which is used for globall state management.
- Created a reducer.js file which contained the initialState{which contains the user, playlist, playing, item, token} and reducer function
- In the index.js, initialState is accessed by importing from the reducer.js file and then passed as the value to the DataLayerContext
- In the App.js, the initialState is destuctured : {user, token_ } and set to the useContext(DataLayerContext)
- In the App.js, the useReducer hook is imported and initialized thus : const [state, dispatch] = useReducer(reducer, {user, token_})
- Now, using the dispatch function that has a listener in the reducer function , the user is set using the spotify.getMe(user => {...} ), also the token_ is set and stored in the state which is globally accessible
- Now, the spotify is passed as prop to the Playlist component.