Buscador de películas

Clase 13 de 17 • Curso de API REST con Javascript: Ejemplos con APIs reales

Edmir Galván Vázquez

student•

Mi solucion es esta:

En la funcion donde manejamos el evento click de arrowBtn ya no ponemos que nos devuelva a '#home', sino a la URL que estuvimos anteriormente.

Esto se logra mediante window.history que tiene varios metodos y entre ellos 'back()' que nos permite ir a la URL anterior que visito el usuario.

arrowBtn.addEventListener('click', () => {
   location.hash = window.history.back();
});

CHRISTIAN OLIVER SOLANO NUÑEZ

student•

solución muy funcional

Christian Velázquez

student•

Gracias! Buen tip!!

Ricardo Andres Ojeda Silva

student•

Usando el método trim() se pueden evitar fallas en la búsqueda cuando haya espacios en blanco al principio o al final del string.

searchFormBtn.addEventListener('click', () => {
    location.hash = `#search=${searchFormInput.value.trim()}`;
});

Diego Alejandro Presiga

student•

Que buen aporte!! Sin duda los detalles valen mucho!

Leal Brigitte

student•

Detalles importantes. Graciaaas

Antonio Rafael González Ferrer

student•

Buscando en la doc de Mozilla modifiqué el evento del arrowBtn:

arrowBtn.onclick = () => window.history.back()

Amauri Guillén

student•

Para evitar errores con búsquedas de 2 o más palabras separadas por un espacio, podemos usar decodeURI para decodificar el hash y obtener el string sin "%20".

const query = decodeURI(location.hash.split("=")[1]);
getMoviesBySearch(query)

Orangel Jose Gonzalez Urbina

student•

Esta es la forma que encontré 😬

arrowBtn.addEventListener('click', () => {
  history.go(-1)
});

Christian Velázquez

student•

También, interesante solución. Gracias.

JOSE RANGEL

student•

Esta solución me ayudó. El window.history.back() hace un refresh de la página.

Alan Cabrera

student•

Para solucionar el reto usé "window.history.back()" y además agregué un feature en el que si le das click al titúlo "Platzi Movies" te regresara al home. Para hacerlo solo habilité el título en esa pantalla quitandole la clase "inactive", y le agregué un addEventListener que redirigiera al home. Ponemos un "cursor: pointer" en css para que sea algo intuitivo en desktop y listo.

Matias Diaz

student•

Excelente! Yo termine removiendo la clase de 'inactive' para el titulo en la sección de 'categorías' y la de 'trends' porque use un poco por la app y me pareció incomodo no poder volver al home.

Fernando Orozco Velasquez

student•

Usando el método "decodeURI()" pude solucionar el problema de los espacios en blanco y el de tildes para realizar la búsqueda.

async function getMoviesBySearch(query) {                                                               query = decodeURI(query);                                                                             const { data } = await api(`search/movie`, {                                                      
    params: {                                                                                         
      query,                                                                                             
		},
  });         
  
 const movies = data.results;                                                                        
 genericSection.innerHTML = ""; 
 createMovies(movies, genericSection);

Kengya Moncada

student•

Amo ♥ éstas clases , la verdad he sentido mas confianza, me ha ayudado a reflexionar sobre mis proyectos anteriores. GRACIAS!!!

Humberto Delgado

student•

El método solo funciona para quitar los espacios de un Sting al final y al comienzo. Estos métodos cumplen con la finalidad: espero los sirva

location.hash = location.hash = `#search=${searchFormInput.value.replace(/\s+/g, '')}`


location.hash = `#search=${searchFormInput.value.split(" ").join("")}`

location.hash = `#search=${searchFormInput.value.split(" ").join("")}`

Misael Gomez

student•

Para eliminar los espacios en blanco, a los extremos y en el centro, podemos aplicar los siguientes métodos .split() y .join()

searchFormBtn.addEventListener('click', ()=>{
  location.hash='#search=' + searchFormInput.value.split(" ").join('');
  console.log(searchFormInput.value.split(" ").join(''));
});

Dejo la documentación y un ejemplo https://pixonauta.com/eliminar-espacios-en-blanco-de-un-string-con-javascript/

Manuel Cabos

student•

🚧 Problemas con el history.back(), tengo que retroceder 2 veces

Si a alguien más le pasa que cuando hace una búsqueda o cuando le da al botón de search, y luego intenta retroceder ++tiene que hacerlo 2 veces++, ya sea con el botón de la flecha o con el buscador, esta es la solución que encontré agregando como parámetro el evento e y la función e.preventDefault(); :

searchFormBtn.addEventListener('click', (e) => {
	if (searchFormInput.value.length > 0) {
		location.hash = `${SEARCH_HASH}=${searchFormInput.value}`;
	}

	e.preventDefault(); // Fix para que funcione correctamente el history.back()
});

. Estuve repasando mi código varias horas, debuggeando y regresando a commits anteriores, pero no encontré el problema, me pasa desde que creé el evento click para el botón del buscador, si alguien más sabe porque pasa, si estoy haciendo algo mal conoce otra solución, me avisa, dejo mi repo por si acaso 👀

Henry Alexander Velásquez Rosas

student•

Me sirvió, gracias.

Alirio Isea

student•

Me funciono esta solución, gracias!! también llevaba rato probando y nada funcionaba jaja

Eliezer Hernandez

student•

¿Esta forma de ocultar componentes y mostrarlos dependiendo de la navegación es la forma actual de desarrollar páginas webs? Tenía entendido que para cada página existía un correspondiente archivo HTML con la estructura correspondiente a esa página, la manera de desarrollar ha cambiado o solo es una alternativa con sus ventajas.

Juan Castro

teacher•

Sí y no. En este curso estamos desarrollando una Single Page Application, una aplicación que funciona en una sola página. Pero ¿cómo añadimos navegación en aplicaciones de una sola página? Hay muchas formas. Literalmente cada quien lo implementa como mejor funcione para su proyecto (o siguiendo las convenciones de su framework de preferencia). En este caso durante el curso implementamos nuestro propio router con JS vanilla. :D

Cristian Zapata

student•

en la función getMoviesBySearch, pueden agregar este string para que les salga el nombre de lo que buscaron,

headerCategoryTitle.innerHTML = 'Results for: ' + query;

y en searchPage()

headerCategoryTitle.classList.remove('inactive');

Kevin Daniel Hincapie Lumbaque

student•

Debo decir que mi código es diferente, he manejado de otra manera la navegabilidad y no tiene sentido para mi: 1- escuchar al icono de búsqueda para luego 2- leer el value del imput y 3-pasarlo al hash para luego volver a 4-leer el hash teniendo que aplicar métodos para separar el hash del valor y luego 5- realizar la solicitud 6- renderizar resultado

Así que yo preferí hacerlo menos enredado, se aparta de la lógica que veníamos manejando con los hash pero no me parece eficiente enredar todo mas solo por seguir el patrón.. Lo que hice fue básicamente escuchar el evento de click sobre el icono y el evento de enter en el input y llamar a mi función render que lee el valor del input, hace una validacion sencilla para confirmar que no esta vacío el input y procede a quitar los espacios del query (la gente no siempre busca solo una palabra) para luego usarlo en el hash, mientras se hace la solicitud a la api y se crea la interfaz con el resultado, al final limpio el input para que este vacío

export async function renderSearchModal() {
  const searchForm = document.querySelector(".search__input");
  if (searchForm.value.lenght > 0) {
    const searchedValue = searchForm.value;
    const arraySearch = searchedValue.split(" ");
    location.hash = `search=${arraySearch.join("_")}`;
    const searchList = await getSearchedMovie(searchedValue);

    const searchModal = createSearchModal(searchList, searchedValue);

    body.append(searchModal);

    searchForm.value = " ";
  }
}

Ariel Ezequiel Biazzo Genua

student•

Holaa!

No se si probaron en buscar con una separcion ej:_ star wars_

Pues si lo hacen, la API no les devolvera nada ya que cuando tomamos el valor de la busqueda desde el hash, la palabra star wars se ve asi: "star%20wars"

Soluciones:

Cambiar el codigo y en vez de tomar star wars de la url, pueden hacerlo tomando el valor del input.value, es lo mismo, solo deben pasarle a una nueva funcion como parametro el valor del input.
(MUCHO MAS FACIL) Hacer un codigo similar que trabaje con estos errores, asi:


//funcion anonima que se llama inmediatamente para trabajar con la url
(function getUrlParams() {

        const [_, query] = location.hash.split("=")
        let arrayStr, newQuery;

        if(query.includes("%20")) {
            arrayStr = query.split("%20")
            newQuery = arrayStr.join(" ")
        }
        console.log(newQuery)
        
        showMoviesSearched(newQuery)

        //headerCategoryTitle.innerHTML = name

    })();

Luis Miguel Rojas Franco

student•

El buscador solo puede funcionar sin espacios? o se podría realizar algo como que si en el buscador coloco por ejemplo: “The Batman” pueda mostrarme los resultados sin mostrar la página sin resultados? intente usando decodeURI() para quitar los espacios pero no se pudo siempre muestra en el navegador en los espacios el %20 :(

Juan Castro

teacher•

Yep, la URL traduce carácteres "especiales" (como los espacios) de esta forma. Habría que "traducirlos" manualmente. :thinking:

Federico Maidana

student•

Resulta que realice un buscador, funciona bárbaro en la versión de escritorio. Pero cuando intento utilizarlo en la versión móvil, directamente no funciona. Acá les dejo el repositorio, para que puedan ver el código. repositorio

Juan Castro

teacher•

¿Qué parte no funciona, Fede? Lo único que encontré fue que no funciona el viewport para tener el zoom. Pero la funcionalidad del buscador sí corre.

Federico Maidana

student•

Había un pequeño error (que me consumió toda la tarde LOL). Resulta que si entrabas al sitio desde el celular y utilizas el buscador, no funcionaba. Y esto se debe a que el teclado de los celulares siempre ponen a la primera letra en mayúsculas, de esta forma JAMAS iba a funcionar el buscador en el celular. Así que simplemente puse el valor del input en minúscula Y YA TODO funciono correctamente.

Así que ya está resuelto. Gracias Juan por la ayuda.

Ricardo Alfonso Chavez Vilcapoma

student•

Mi solución usando métodos al alcance la mano :D

arrowBtn.addEventListener("click",()=>{
    location.hash = window.history.back(); //para guardar las URL que visita el usuario se usa window.history y par regresar al anterior el método back()
});

Hernan D`Andreis

student•

Como opcion a lo que propone el profe se puede agregar una variable que escuche el evento de click en el boton de search y capture el value de input en una variable que después pasamos como parametro a la función

searchFormBtn.addEventListener('click', () => {

    let value = searchFormInput.value

    getSearchMovis(value)

    location.hash = `search=${value}`
})

Donovan RM

student•

Para el tema de buscar con espacios usé el siguiente codigo en el searchPage():

const [searc, query] = location.hash.split('=');
    const busqueda = decodeURIComponent(query);
    console.log(busqueda);
    headerCategoryTitle.innerHTML= `Resultados: ${busqueda}`
    getMoviesBySearch(busqueda);

Henry Alexander Velásquez Rosas

student•

Con expresiones regulares sería algo así:

. Dentro de la función searchPage:

const [_, query] = location.hash.split("=");
  // %20%20%20fury%20%20
const [name] = query.match(/[A-Za-z]+/g);

showSearch(query);

Igualmente en el addEventListener:

searchFormBtn.addEventListener("click", () => {
  const [name] = searchFormInput.value.match(/[A-Za-z]+/g);

  location.hash = `#search=${name}`;
});