No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Lista de pel铆culas favoritas

17/20
Recursos

Aportes 17

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Creo que la soluci贸n m谩s f谩cil que pude encontrar es simplemente ejecutar la funci贸n getLikedMovies() en el listener, literalmente solo agregue esa linea y por el momento funciona en todas las paginas que se agrega la pel铆cula sin necesidad de recargar

movieBtn.addEventListener('click', ()=>{
            movieBtn.classList.toggle('btnMovie--liked')
            likeMovie(movie);
            getLikedMovies() //煤nica linea agregada
        })

Actualizaci贸n de favoritos
.
Intente hacerla con el Windows.storage.event pero no pude. Le铆 la documentaci贸n y al parecer solo funciona cuando el localStorage se modifica desde otro documento. Hasta hay una nota al comienzo que dice:
.

Note: This won鈥檛 work on the same page that is making the changes 鈥 it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can鈥檛 access the same storage objects.

.
Quisiera saber si estoy en lo correcto y entend铆 bien, o de lo contrario como podr铆a realizarla.

Yo lo solucion茅 de una forma bastante sencilla, haciendo recargar el home cuando se realiza un cambio estando en el mismo.
As铆 como est谩 configurado el cache, el cambio es instant谩neo con cualquier velocidad de internet. Antes intent茅 hacerla llamando a la funcion getLikedMovies() en vez de al homePage(), pero al quitar una pel铆cula de favoritos sigue manteniendo el estilo en el resto de las secciones.

function likeMovie(movie) {
	...
  if (location.hash == ''){
    homePage();
  }
}

Ya que no me funcion贸 el window.storage, lo que hice fue volver a llamar a las funciones getTrendingMoviesPreview() y getLikedMovies() al final de la funcion likeMovies() y de momento funciona bien

function likeMovies(movie) {
    const likedMovies = likesMoviesList()

    if(likedMovies[movie.id]) {
        likedMovies[movie.id] = undefined
    } else {
        likedMovies[movie.id] = movie
    }
    localStorage.setItem("liked-movies", JSON.stringify(likedMovies))
    getTrendingMoviesPreview()
    getLikedMovies()
}

Bas谩ndome en el excelente aporte previo de Jonathan Alfonso, me d铆 cuenta que si hac铆a scroll horizontal en TrendingPreview y le daba like a una pel铆cula, al recarg谩rseme completamente el home el scroll horizontal volv铆a al comienzo. Siento que esto puede afectar un poco la Experiencia del Usuario, por lo que me pareci贸 mejor que la funci贸n likeMovie llame a getTrendingPreviewMovie y a getLikedMovies:

function likeMovie(movie) {
	...
  if (location.hash == ''){
        getLikedMovies();
        getTrendingMoviesPreview(); 
  }
}

Estas dos funciones limpian sus contenedores de scroll para que no se dupliquen las pel铆culas:

const getLikedMovies = () => {
    likedMoviesScroll.innerHTML = "";
    let likedMovies = Object.values(likedMovieList());
    printMoviePosters(likedMovies, likedMoviesScroll, true);
}
 
const getTrendingMoviesPreview = async () => {
    const { data } = await api('/trending/movie/day');
    const movies = data.results;
    trendingMoviesPreviewList.innerHTML = "";
    printMoviePosters(movies, trendingMoviesPreviewList, true);
}

Saludos, por mi parte solo inserte la funci贸n homepage() en el evento de hacer click en el bot贸n de me gusta de, as铆 cada que se cliquee para gustar o no una pel铆cula la pagina inicial se recargara

<code> 
movieBtn.addEventListener('click', () => {            
            movieBtn.classList.toggle('movie-btn--liked');
            likeMovie(movie);
            homePage();
        });

este c贸digo se encuentra dentro de la funci贸n createMovies()

Si quieren ocultar toda la secci贸n de favoritos cuando no hayan pel铆culas seleccionadas, se puede agregar la clase inactive dentro de la funci贸n getLikedMovies() de la siguiente forma:

function getLikedMovies() {
    const likedMovies = likedMovieList();
    const moviesArray = Object.values(likedMovies);

    likedMoviesListArticle.innerHTML = '';

    !moviesArray.length && likedMoviesSection.classList.add('inactive');

    createMovies(moviesArray, likedMoviesListArticle);
}

Mi soluci贸n fue tan sencilla, que aun sigo mirando si comet铆 algun error jaja
Solo agregue un llamado a homepage() desde al final del evento click del bot贸n movieBtn.

Guardar favoritos en la API de TMDB

Les comparto la forma de agregar y eliminar las pel铆culas de favoritos usando la API de TMDB V3. Les dejo el c贸digo utilizando Axios como fetch. 馃榾

Recuerden leer siempre la documentaci贸n de la API atentamente, as铆 no tienen d贸lares de cabeza como yo los tuve. 馃槄

fetch

Obtener request_token

const getRequestToken = async () => {
	const REQUEST_TOKEN_URL = 'authentication/token/new';
	const init = {
		method  : 'GET',
		headers : {
			'Content-Type' : 'application/json;charset=utf-8'
		}
	};
	const RESPONSE = await fetch(`${URL}/${REQUEST_TOKEN_URL}?api_key=${YOUR_API_KEY}`, init);
	const DATA = await RESPONSE.json();
	const REQUEST_TOKEN = DATA.request_token;

	return REQUEST_TOKEN;
};

Obtener session_id

Antes de obtener nuestro session_id tenemos que aceptar la autenticaci贸n de terceros desde nuestra cuenta de TMDB, lo realizamos desde la siguiente URL

www.themoviedb.org/authenticate/{your_request_token}.

Una vez aceptado ya pod茅s seguir con el siguiente c贸digo.

const getSession = async () => {
	const SESSION_ID_URL = 'authentication/session/new';
	const request_token = 'your_request_token';
	const REQUEST_BODY = JSON.stringify({
		request_token
	});
	const init = {
		method  : 'POST',
		headers : {
			'Content-Type' : 'application/json;charset=utf-8'
		},
		body : REQUEST_BODY
	};
	// *Tenemos que aceptar, en nuestra cuenta de The Movie DB, la autenticaci贸n de terceros en https://www.themoviedb.org/authenticate/{request_token}
	const RESPONSE = await fetch(`${URL}/${SESSION_ID_URL}?api_key=${YOUR_API_KEY}`, init);
	const DATA = await RESPONSE.json();
	const SESSION_ID = DATA.session_id;

	return SESSION_ID;
};

Obtener account_id

const getAccountId = async () => {
	const SESSION_ID = 'your_session_id';
	const ACCOUNT_URL = 'account';
	const init = {
		method  : 'GET',
		headers : {
			'Content-Type' : 'application/json;charset=utf-8'
		},
	};
	const RESPONSE = await fetch(`${URL}/${ACCOUNT_URL}?api_key=${YOUR_API_KEY}&session_id=${SESSION_ID}`, init);
	const ACCOUNT = await RESPONSE.json();
	const ID = ACCOUNT.id;

	return ID;
};

Agregar o eliminar una pel铆cula de favoritos

El par谩metro favorite(boolean) es el que nos permite agregar o eliminar una pel铆cula de favoritos.

favorite = true add movie.

favorite = false remove movie.

const addOrDeleteFavoriteMovie = async ({ media_id, remove = false }) => {
	// Si queremos eliminar la pel铆cula de favoritos tenemos que pasar el par谩metro favorite = false;
	const SESSION_ID = 'your_session_id';
	const media_type = 'movie';
	const favorite = !remove;
	const ACCOUNT_ID = await getAccountId();
	const REQUEST_BODY = JSON.stringify({
		media_type,
		media_id,
		favorite
	});
	const init = {
		method  : 'POST',
		headers : {
			'Content-Type' : 'application/json;charset=utf-8'
		},
		body : REQUEST_BODY
	};
	const RESPONSE = await fetch(`${URL}/account/${ACCOUNT_ID}/favorite?api_key=${YOUR_API_KEY}&session_id=${SESSION_ID}`, init);
	const STATUS = await RESPONSE.json();

	return STATUS;
};

Ver las pel铆culas guardadas

const getFavoriteMovies = async () => {
	const SESSION_ID = 'your_session_id';
	const ACCOUNT_ID = await getAccountId();
	const init = {
		method  : 'GET',
		headers : {
			'Content-Type' : 'application/json;charset=utf-8'
		}
	};
	const RESPONSE = await fetch(`${URL}/account/${ACCOUNT_ID}/favorite/movies?api_key=${YOUR_API_KEY}&session_id=${SESSION_ID}`);
	const DATA = await RESPONSE.json();
	const MOVIES = DATA.results;

	return MOVIES;
};

Axios

Una cosa para aclarar, el par谩metro params son los query parameters y nuestro par谩metro data es el body que utilizamos con fetch.

Creando instancia para usar la API

const config = {
	baseURL : 'https://api.themoviedb.org/3/',
	headers : {
		'Content-Type' : 'application/json;charset=utf-8'
	},
	params : {
		api_key : YOUR_API_KEY
	}
};

const api = axios.create(config);

Obtener request_token

const getRequestToken = async () => {
	const RESPONSE = await api('authentication/token/new');
	const DATA = RESPONSE.data;
	const REQUEST_TOKEN = DATA.request_token;

	return REQUEST_TOKEN;
};

Obtener session_id

Antes de obtener nuestro session_id tenemos que aceptar la autenticaci贸n de terceros desde nuestra cuenta de TMDB, lo realizamos desde la siguiente URL

www.themoviedb.org/authenticate/{your_request_token}.

Una vez aceptado ya pod茅s seguir con el siguiente c贸digo.

const getSession = async () => {
	const request_token = 'your_request_token';
	const config = {
		params : { request_token }
	};
	// *Tenemos que aceptar, en nuestra cuenta de The Movie DB, la autenticaci贸n de terceros en https://www.themoviedb.org/authenticate/{request_token}
	const RESPONSE = await api('authentication/session/new', config);
	const DATA = RESPONSE.data;
	const SESSION_ID = DATA.session_id;

	return SESSION_ID;
};

Obtener account_id

const getAccountId = async () => {
	const session_id = 'your_session_id';
	const config = {
		params : { session_id }
	};
	const RESPONSE = await api('account', config);
	const ACCOUNT = RESPONSE.data;
	const ID = ACCOUNT.id;

	return ID;
};

Agregar o eliminar una pel铆cula de favoritos

El par谩metro favorite(boolean) es el que nos permite agregar o eliminar una pel铆cula de favoritos.

favorite = true add movie.

favorite = false remove movie.

const addOrDeleteFavoriteMovie = async ({ media_id, remove = false }) => {
	// Si queremos eliminar la pel铆cula de favoritos tenemos que pasar el par谩metro favorite = false;
	const session_id = 'your_request_token';
	const media_type = 'movie';
	const favorite = !remove;
	const ACCOUNT_ID = await getAccountId();
	const config = {
		method : 'POST',
		params : { session_id },
		data   : {
			media_type,
			media_id,
			favorite
		}
	};
	const RESPONSE = await api(`account/${ACCOUNT_ID}/favorite`, config);
	const STATUS = RESPONSE.data;

	return STATUS;
};

Ver las pel铆culas guardadas

const getFavoriteMovies = async () => {
	const session_id = 'your_request_token';
	const ACCOUNT_ID = await getAccountId();
	const config = {
		params : { session_id }
	};
	const RESPONSE = await api(`account/${ACCOUNT_ID}/favorite/movies`, config);
	const DATA = RESPONSE.data;
	const MOVIES = DATA.results;

	return MOVIES;
};

PD: No puedo dejar los links directos a la explicaci贸n de cada secci贸n de la p谩gina de TMDB, ya que el sistema de comentarios lo detecta como 鈥渆nlace malicioso鈥. Si quieren mayor detalles, pueden ver directo en la p谩gina de la API.

Para actualizar la secci贸n de favoritos siempre que se haga clic sobre el bot贸n de coraz贸n, modifiqu茅 la funci贸n likeMovie(). Lo primero que cre贸 el profesor en esa funci贸n fue una variable likedMovies que contiene a la ejecuci贸n de la funci贸n likedMoviesList(), entonces, justo despu茅s de que se reescribe la informaci贸n en local storage, cre茅 una nueva variable llamada NewLikedMovies que contiene tambi茅n a la ejecuci贸n de la funci贸n likedMoviesList() pero esta vez obviamente luego de la sobreescritura. Luego establezco un condicional para que si hay diferencia entre la primera variable y la segunda, ejecute la funci贸n getLikedMovies();

As铆 queda la funci贸n:

function likeMovie(movie) {
  const likedMovies = likedMoviesList();

  console.log(likedMovies);

  if(likedMovies[movie.id]) {
    likedMovies[movie.id] = undefined;
    console.log('La pelicula ya esta en storage');
  } else {
    likedMovies[movie.id] = movie;
    console.log('La pelicula no esta en storage');
  }
  localStorage.setItem('liked_movies', JSON.stringify(likedMovies));

  const NewlikedMovies = likedMoviesList();

  if(likedMovies !== NewlikedMovies) {
    getLikedMovies();
  }
}

No me funcion贸 escuchar el evento storage, pero lo solucion茅 llamando a las funciones getLikedMovies y getTrendingMoviesPreview al hacer click en el bot贸n de favoritos.

Mi soluci贸n fue llamar a homePage para que refresque la p谩gina. No s茅 si est谩 bien, pero fue una soluci贸n r谩pida. En este caso, item reemplaza a movie.

        movieBtn.addEventListener('click',()=>{
            movieBtn.classList.toggle('movie-btn--liked');
                likeMovie(item);
                homePage();
        })

Mi soluci贸n de que los botones que est谩n en la lista de favoritos est茅n con la clase de bot贸n likeado fue simplemente preguntar si el container era el de las pel铆culas likeadas, y de ser as铆 pues les agrega tal clase:

mi soluci贸n para recargar al hacer like o don麓t like:
en el evento del bot贸n de like le agregue estas 3 lineas de c贸digo para recargar y volver al inicio de la pantalla

<         
 window.location.reload();
             document.documentElement.scrollTop=0;
             document.body.scrollTop=0;> 

para actualizar en el momento las pel铆culas de favoritos, solo agregue dentro de createMovies, en el bot贸n movieBtn en el evento ya existente de addEventListener a getLikeMovies() y me funciono.

Probablemente no sea la mejor, pero si fue la mas r谩pida en este momento鈥

Vaya, la soluci贸n del bot贸n like de JD es muy sencilla y eficiente, la m铆a fue crear una funci贸n isMovieLiked, y retornar true o false seg煤n el caso y despu茅s agregar o quitar la clase movie-btn鈥搇iked, funcion贸 pero met铆 c贸digo innecesario y una funci贸n que pr谩cticamente repite lo que hace otra. Me falta experiencia.

Sobre el reto, pues la soluci贸n de @Jonathan Alfonso es la mejor. Intent茅 hacer algo escuchando con el MutationObserver modificaciones en aquellos lugares que cambian con los likes, pero me genera muchos.

Saludos.

Hice algo muy, pero, muy sencillo.

Solo mand茅 a llamar la funci贸n **getLikedMovies ** en el evento del bot贸n de like. 鉂

Mi propuesta

Repositorio commit actual: Click Aqu铆

.

Funcionalidades:

  • Almacenamiento de los datos de movies en un array con objetos en el local storage
  • Si le damos like verifica si ya est谩 en el storage por si hay error
  • Si damos like me lo agrega de forma din谩mica a la lista de favoritos desde cualquier secci贸n
  • Si damos dislike me lo elimina de la lista de favorita desde cualquier secci贸n
  • Cargar lista de favoritos al iniciar la secci贸n de home
    .

Por hacer

  • Cargar los likes de todas las movies al cargar la secci贸n consultando al local storage
  • Si doy dislike desde la secci贸n de favorito actualizar ese dislike en trending movies en el home