Redirigir después de enviar datos en formulario dentro de Astro y TypeScript con componentes de React (Mi solución)
Published: 2024-05-14 03:17:01

Recientemente me encontré con un problema en la que tuve que usar un componente de React para controlar un formulario con **react-hook-form** y usarlo dentro de astro, mi problema era como re-dirigirlo luego de enviar los datos y llevarlo a la pagina de Gracias! pues la documentación de astro te propone usar "Astro.redirect" pero este no funciona con componente de react cuando necesitamos escuchar un evento y en mi caso dentro del componente de react yo necesitaba escuchar el evento `window.dispatchEvent` y pasando `formSubmitted` como detalle, así que me puse a investigar y buscar en la documentación o tirando de Claude o ChatGPT para dar con algo y sé que no sera la mejor solución pero seguro que a otros les resultará útil este enfoque y no pasar dos horas tirando del hilo para ser más productivos en sus trabajos asi que de manera breve y espero se entienda aquí les dejo mi solución: 

**1. Crear el formulario de componente React**
Primero, necesitamos tener un formulario en nuestra aplicación web en mi caso fue un componente de react para poder usar los beneficios que nos ofrece **react-hook-form**. Puede ser cualquier formulario que desees, en este caso practico pongo un caso donde el usuario debe dejar los datos como nombre, apellido y correo:

```
// components/Form.tsx

import { useRef, useState } from "react";
import { useForm } from "react-hook-form";

const Form: React.FC = () => {
  const { register, handleSubmit, reset } = useForm();
  const formRef = useRef<HTMLFormElement>(null);
  const [btnEnviando, setBtnEnviando] = useState("Dejar datos");

  const enviar = (data: any) => {
    setBtnEnviando("Enviando datos...");
    const formData = new FormData(formRef.current!);
    // Aquí iría tu lógica de envío del formulario, por ejemplo, con fetch, en este caso, supondremos que estamos enviando los datos a una hoja de Google Sheet.

const formDatab = new FormData(formRef.current!);
    fetch(
      "https://script.google.com/macros/s/la-id-de-tu-hoja-de-google-UTQwKC-B-py/exec",
      {
        method: "POST",
        body: formDatab
      }
    )
      
    .then((res) => {
      const contentType = res.headers.get("Content-Type");
      if (contentType && contentType.includes("application/json")) {
        return res.json();
      } else {
        return res.text();
      }
    })
    .then((data) => {
      console.log(data);
      reset(); 
      setBtnEnviando("Dejar datos");
        // Después de enviar el formulario con éxito, puedes disparar un evento personalizado.

    const formSubmitted = true; // Suponiendo que el envío fue exitoso
    window.dispatchEvent(new CustomEvent('formSubmitted', { detail: formSubmitted }));
  };
    })
    .catch((error) => {
      console.log(error);
      setBtnEnviando("Dejar datos")
    });

  

  return (
    <form ref={formRef} onSubmit={handleSubmit(enviar)}>
      {/* Campos del formulario */}
      <input type="submit" value={btnEnviando} />
    </form>
  );
};

export default Form;

```

**2. Escuchar el evento de envío del formulario**
En el script de tu página o componente (es este caso es el index.astro), escucha el evento personalizado **formSubmitted** que se dispara cuando el formulario se envía con éxito.

```
// index.astro o componente principal

<script>
window.addEventListener('formSubmitted', (event: Event) => {
  const customEvent = event as CustomEvent<boolean>;
  const formSubmitted = customEvent.detail;

  if (formSubmitted) {
// Al puro estilo y uso de vanilla JS
    window.location.href = '/thank-you-page'; // Redirige al usuario a la página de agradecimiento
  }
});
</script>

```
**Con estos pasos, hemos podido crear un sistema para redirigir al usuario a una página específica (Ej. la pagina de agradecimiento) después de enviar datos en un formulario de componente React en tu aplicación web Astro usando TypeScript.**


Claro, aquí tienes una conclusión que resalta la utilidad de la solución y anima a otros desarrolladores a contribuir con sus propias soluciones:

Conclusión:

En resumen, aunque enfrenté algunos desafíos al intentar redirigir a los usuarios después de enviar un formulario en Astro con un componente de React, encontré una solución efectiva al escuchar el evento personalizado formSubmitted y utilizando window.location.href para la redirección. Si bien esta solución puede no ser la más elegante o convencional, ha demostrado ser efectiva en mi caso y espero que también sea útil para otros desarrolladores que enfrenten problemas similares.

Es importante recordar que el mundo del desarrollo web está lleno de desafíos y soluciones creativas. No siempre existe una única manera "correcta" de hacer las cosas, y es precisamente esta diversidad de enfoques lo que hace que nuestra comunidad sea tan vibrante y enriquecedora. Por lo tanto, te animo a que, si encuentras una solución ingeniosa a un problema, la compartas con la comunidad. ¡Quién sabe, tu solución podría ser la ayuda que alguien más necesita!

Recuerda, ¡todos podemos contribuir con nuestras propias ideas y soluciones para hacer que el desarrollo web sea aún mejor!