Redirigir después de enviar datos en formulario dentro de Astro y TypeScript con componentes de React (Mi solución)

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!