estoy aprendiendo React haciendo un clon de spotify y por ahora lo que estoy intentando hacer es mostrar secciones de spotify tales como "las ultimas canciones reproducidas"
, "top artistas"
y "top canciones"
mediante un componente llamado Body.js
Yo la data la obtengo desde una libreria de la API oficial de spotify creada por jmperez en un useEffect hook en el componente App.js. Una vez que consigo la data de la API, la guardo en un objeto llamado initialState en un archivo llamado reducer.js
Este archivo reducer.js
contiene el estado inicial y la funcion reducer para un custom hook llamado useDataLayer.js
que basicamente es un useContext hook que pasa como valor un useReducer a todas las ramas de mi programa. De esta forma yo lo que hago es actualizar el initialState desde App.js y accedo a este objeto mediante el useDataLayer hook
en las distintas ramas de mi programa (entre ellas el componente Body).
El problema que estoy teniendo ahora es que no me esta renderizando las tres secciones yantes mencionadas en spotify, sino que solo me muestra una la cual es la de "top canciones". Lo raro es que por un segundo si renderiza los otros componentes como si en un principio si obtuviera la data y se renderizara pero luego se actualiza y desaparecen. Por favor si alguien me puede ayudar con este problema y me explica porque sucede esto seria genial.
Codigo de App.js
import React, {useState, useEffect} from 'react';
import Login from './components/Login';
import Player from './components/Player';
import { getTokenFromResponse } from './spotify';
import './styles/App.scss';
import SpotifyWebApi from "spotify-web-api-js";
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { useDataLayer } from './components/Hooks/useDataLayer';
library.add(fas, fab);
//instancia de la libreria de spotify
const spotify = new SpotifyWebApi();
function App() {
const [token, setToken] = useState(null);
const [{ user }, dispatch] = useDataLayer();
//donde obtengo la data necesaria de la api
useEffect(() => {
//funcion para obtener token de acceso
let accessToken = getTokenFromResponse();
window.location.hash = '';
if(accessToken){
spotify.setAccessToken(accessToken);
setToken(accessToken);
//A PARTIR DE AQUI OBTENGO LA DATA QUE NECESITO
// aqui obtengo la data de mi usuario
spotify.getMe().then((data) =>{
dispatch({
type: "GET_USER",
user: data
})
});
spotify.getUserPlaylists().then((data) => {
dispatch({
type: "GET_PLAYLISTS",
playlists: data
})
});
spotify.getMyTopTracks({limit: 4}).then((data) => {
dispatch({
type: "GET_TOP_TRACKS",
top_tracks: data,
})
});
spotify.getMyRecentlyPlayedTracks({limit: 4}).then((data) => {
dispatch({
type: "RECENTLY_PLAYED",
recently_played: data,
})
});
spotify.getMyTopArtists({limit: 4}).then((data) => {
dispatch({
type: "GET_TOP_ARTISTS",
top_artists: data,
})
});
}
}, [token])
//si token es valido ingresa a Player.js donde dentro se encuentra Body.js y sino vuelve al componente login
return (
<div className="App">
{token ? <Player spotify= {spotify} /> : <Login />}
</div>
);
}
export default App;
Codigo Body.js
import React from 'react'
import '../styles/Body.scss'
import { useDataLayer } from "./Hooks/useDataLayer.js";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
function Body({ spotify }) {
//obtengo las propiedades de la data necesaria que quiero mostrar en este componente con useDataLayer
const [{ spotify_recommendations, recently_played, top_tracks, top_artists }, dispatch] = useDataLayer();
return (
<div className= "main-body">
<div className= "body-option">
<span className= "see-more">Ver Todos</span>
<FontAwesomeIcon icon={['fas', 'arrow-right']} />
<div>
{
//para mostrar la imagen e info del track
recently_played?.items.map((item, index) => {
return (
<div className= "track" key= {index}>
<img src= {item.track.album.images[1].url} alt= "recently played track"></img>
<div className= "track-data">
<h3>{item.track.name}</h3>
<p>{item.track.artists.map(artist => artist.name).join(", ")}</p>
</div>
</div>
)
})
}
</div>
</div>
<div className= "body-option">
<span className= "see-more">Ver Todos</span>
<FontAwesomeIcon icon={['fas', 'arrow-right']} />
<div>
{
//para mostrar la imagen e info del track
top_tracks?.items.map((topArtist, index) => {
return (
<div className= "track" key= {index}>
<img src= {topArtist.album.images[1].url} alt= "recently played track"></img>
<div className= "track-data">
<h3>{topArtist.name}</h3>
<p>{topArtist.artists.map(artist => artist.name).join(", ")}</p>
</div>
</div>
)
})
}
</div>
</div>
<div className= "body-option">
<span className= "see-more">Ver Todos</span>
<FontAwesomeIcon icon={['fas', 'arrow-right']} />
<div>
{
//para mostrar la imagen e info del artista
top_artists?.items.map((topTrack, index) => {
return (
<div className= "track" key= {index}>
<img src= {topTrack.images[1].url} alt= "recently played track"></img>
<div className= "track-data">
<h3>{topTrack.name}</h3>
<p>{topTrack.genres.join(", ")}</p>
</div>
</div>
)
})
}
</div>
</div>
</div>
)
}
export default Body
Codigo de mi custom hook useDataLayer.js
import React, {useContext, createContext, useReducer} from 'react'
let DataContext = createContext();
export function DataLayer({reducer, initialState, children}) {
return (
<DataContext.Provider value= {useReducer(reducer, initialState)}>
{children}
</DataContext.Provider>
)
}
export let useDataLayer = () => useContext(DataContext);
reducer.js
export const initialState = {
user: null,
top_tracks: null,
top_artists: null,
top_albums: null,
playlists: [],
playlists_tracks: [],
playing: false,
spotify_recommendations: null,
recently_played: null,
item: null,
}
const reducer = (action, state) => {
switch (action.type) {
case "GET_PLAYLISTS":
return {
...state,
playlists: action.playlists,
};
case "GET_PLAYLISTS_TRACKS":
return {
...state,
playlists_tracks: action.playlists_tracks,
};
case "GET_USER":
return{
...state,
user: action.user,
};
case "GET_TOP_ARTISTS":
return{
...state,
top_artists: action.top_artists,
};
case "GET_TOP_ALBUMS":
return{
...state,
top_albums: action.top_albums,
};
case "GET_TOP_TRACKS":
return{
...state,
top_tracks: action.top_tracks,
};
case "GET_RECOMMENDED":
return{
...state,
spotify_recommendations: action.get_recomended,
}
case "RECENTLY_PLAYED":
return {
...state,
recently_played: action.recently_played,
}
default:
return state;
}
}
export default reducer;
Desde ya muchas gracias por su tiempo y atencion.
if(accessToken) ... setToken(accessToken)
y finalmente le pasas como segundo parametro del useEfect[accessToken]
. Entiendo que ese segundo parámetro le dice al hook que se ejecute cada vez queaccessToken
cambie, y el hook está cambiando el token por el simple hecho de no ser null. Eso no sería un loop infinito? o le estoy errando?[]
en lugar de[accessToken]
, el hook solo se va a ejecutar cuando se monte el componente. Y creería que es eso lo que necesitas.spotify.setAccessToken(accessToken); setToken(accessToken);
. PREGUNTA: En este momento, cuando volves a setear el accessToken, no deberia volver a ejecutarse este useEffect? (por el segundo parametro) A partir de ahi, si la respuesta es sí, tenés un loop infinito.