Au 14 - Front-end - React - Processando os dados do formulário - Mestres BEGIN

1// ProductsPage.tsx
2const [showModal, setShowModal] = useState(false);
3const handleOpenModal = () => setShowModal(true);
4{showModal && (
5    <div>
6        <div className="modal-content">
7        <button onClick={() => setShowModal(false)}>X</button>
8        <AddProductForm onSuccess={() => { setShowModal(false); refreshProducts(); }} />
9    </div>
10    </div>
11)}

1const handleSubmit = async (e: React.FormEvent) => {
2    e.preventDefault();
3    // 1. Coleta os dados do formulário
4    const formData = new FormData(e.currentTarget as HTMLFormElement);
5    // 2. Converte para objeto JavaScript
6    const productData = Object.fromEntries(formData.entries());
7    // 3. Ajuste de tipos (todos os valores vem como string)
8    const payload = { ...productData, price: Number(productData.price), quantity: Number(productData.quantity) };
9    console.log("Dados enviados:", payload);
10};

1try {
2    // 1. Envio para API
3    const response = await api.post("/products", payload);
4    // 2. Notificação de sucesso
5    toast.success("Produto cadastrado!");
6    // 3. Execução do callback onSuccess();
7    onSuccess();
8    // 4. Reset do formulário (e.target as HTMLFormElement).reset();
9} catch (error) {
10    console.error("Falha no cadastro:", error);
11    toast.error("Erro ao cadastrar produto");
12}