0

Hice una app de películas haciendo peticiones a una api externa. Al hacer click en "pagina siguiente" la función de abajo evalúa si esta mostrando la lista de películas que viene por defecto, si muestra una lista de películas por genero o si muestra una lista de películas por búsqueda y luego redirecciona mediante useNavigate(). El código funciona pero viene alguna función de react router para simplificar esa función?, o si hay alguna forma correcta de hacer lo mismo?

const history = useNavigate();
...
const handlePage = (pagina) => {
        window.scroll({
            top: 0,
        });
        if (pagina === "+") {
            if (typeof search === 'undefined' && typeof genero === 'undefined') {
                page !== null ?
                    history(`/?page=${parseInt(page) + 1}`) :
                    history(`/?page=${2}`);
            } else if (typeof search !== 'undefined') {
                page !== null ?
                    history(`/${search}/${movie}?page=${parseInt(page) + 1}`) :
                    history(`/${search}/${movie}?page=${2}`);
            } else {
                page !== null ?
                    history(`/${genero}?page=${parseInt(page) + 1}`) :
                    history(`/${genero}?page=${2}`)
            }
        } else {
            typeof genero === 'undefined' && typeof search === 'undefined' ?
                history(`/?page=${parseInt(page) - 1}`) :
                typeof search !== 'undefined' ?
                    history(`/${search}/${movie}?page=${parseInt(page) - 1}`) :
                    history(`/${genero}?page=${parseInt(page) - 1}`)
        }
    }

1 respuesta 1

0
const handlePage = (pagina) => {
  window.scroll({
    top: 0,
  });
  const pageIsPlus = pagina === "+";
  const undefinedSearchAndGenero =
    typeof search === "undefined" && typeof genero === "undefined";
  const undefinedSearch = typeof search !== "undefined";
  const pageDecrement = history(`/?page=${parseInt(page) - 1}`);
  const pageIncrement = history(`/?page=${parseInt(page) + 1}`);
  const pageTwoHardcoded = history(`/?page=${2}`);

  const handleUndefinedSearch = undefinedSearch
    ? history(`/${search}/${movie}?page=${parseInt(page) - 1}`)
    : history(`/${genero}?page=${parseInt(page) - 1}`);

  if (!pageIsPlus)
    return undefinedSearchAndGenero ? pageDecrement : handleUndefinedSearch;

  if (undefinedSearchAndGenero) {
    /**
     * DO CORRECT THINGS HERE
     **/
  }
};

Se me ocurre que podes realizar un refactor de la siguiente manera... solo para darte una idea de como podes llegar a simplicar esa función. Te comparto un artículo interesante que te puede servir sobre el patrón early return ya que es básicamente lo que yo quise aplicar en este ejemplo.

2
  • 1
    Entonces no esta tan mal mi código, pensé que había alguna función de react router que simplificaba todo pero me quedo tranquilo. Voy a echarle un ojo al link que me pasaste, muchas gracias!!! Commented el 12 may. 2022 a las 3:36
  • Exacto no hay nada malo en tu código, que yo sepa no hay existencia de una función para simplicar eso. No hay de que Rodrigo ! Si te sirvio la respuesta puedes marcarla como útil por si otra persona está con el mismo problema que tú, Commented el 12 may. 2022 a las 12:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.