Clase 13 de 17 • Curso de API REST con Javascript: Ejemplos con APIs reales
Contenido del curso
Edmir Galván Vázquez
CHRISTIAN OLIVER SOLANO NUÑEZ
Christian Velázquez
Ricardo Andres Ojeda Silva
Diego Alejandro Presiga
Leal Brigitte
Antonio Rafael González Ferrer
Amauri Guillén
Orangel Gonzalez
Christian Velázquez
JOSE RANGEL
Alan Cabrera
Matias Diaz
Fernando Orozco Velasquez
Kengya Moncada
Humberto Delgado
Misael Gomez
Manuel Cabos
Henry Alexander Velásquez Rosas
Alirio Isea
Eliezer Hernandez
Juan Castro
Cristian Zapata
Kevin Daniel Hincapie Lumbaque
Ariel Ezequiel Biazzo Genua
Luis Miguel Rojas Franco
Juan Castro
Federico Maidana
Juan Castro
Federico Maidana
Ricardo Alfonso Chavez Vilcapoma
Hernan Dandreis
Donovan RM
Henry Alexander Velásquez Rosas
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(); });
solución muy funcional
Gracias! Buen tip!!
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()}`; });
Que buen aporte!! Sin duda los detalles valen mucho!
Detalles importantes. Graciaaas
Buscando en la doc de Mozilla modifiqué el evento del arrowBtn:
arrowBtn.onclick = () => window.history.back()
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)
Esta es la forma que encontré 😬
arrowBtn.addEventListener('click', () => { history.go(-1) });
También, interesante solución. Gracias.
Esta solución me ayudó. El window.history.back() hace un refresh de la página.
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.
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.
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);
Amo ♥ éstas clases , la verdad he sentido mas confianza, me ha ayudado a reflexionar sobre mis proyectos anteriores. GRACIAS!!!
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("")}`
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/
🚧 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 👀
Me sirvió, gracias.
Me funciono esta solución, gracias!! también llevaba rato probando y nada funcionaba jaja
¿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.
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
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');
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 = " "; } }
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 })();
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 :(
Yep, la URL traduce carácteres "especiales" (como los espacios) de esta forma. Habría que "traducirlos" manualmente. :thinking:
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
¿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.
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.
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() });
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}` })
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);
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}`; });
