Buscador de películas

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();
});

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()}`;
});

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)
});

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.

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);

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/

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("")}`

PUUMMM!!!

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);

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

    })();

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 = " ";
  }
}

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');

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

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()
});

Yo utilicé el método “history.back()”.
aquí pueden revisar la documentación:

arrowBtn.addEventListener('click', () => {                                  
  history.back();                                                             // Este método hace que el navegador vuelva atrásuna página en la sesión
});