Au 17 - Front-end - React - Criando funcionalidade de edição - Mestres BEGIN

Neste vídeo, implementamos a funcionalidade de edição de produtos em nossa aplicação React, permitindo que os usuários atualizem informações dos produtos existentes através do mesmo formulário usado para criação.

Preparação Inicial

Antes de começar, realizamos alguns ajustes importantes:

Renomeamos estados e funções para melhor clareza
Criamos funções específicas para fechar cada modal
Corrigimos nomenclaturas de eventos (onClick vs onPress)
Removemos colunas desnecessárias da tabela de produtos

Lógica de Edição

Implementamos um fluxo completo para edição de produtos:

Criamos um estado editItem para armazenar o produto sendo editado
Adicionamos a propriedade defaultValues ao formulário de produto
Adaptamos os componentes de input para receber valores padrão
Implementamos a função handleEditClick para iniciar a edição

Componentes Adaptados

Modificamos nossos componentes para suportar a edição:

InputText: Adicionada propriedade defaultValue
InputTextArea: Suporte para valor inicial
InputSelect: Lógica especial para seleção padrão (com tratamento case-insensitive)
AddProductForm: Aceita defaultValues e alterna entre "Adicionar" e "Editar"

Fluxo de Requisições

Implementamos a diferenciação entre criação e edição:

1if (defaultValues) {
2  // Requisição PUT para edição
3  await api.put(`/product/${defaultValues._id}`, formData);
4} else {
5  // Requisição POST para criação
6  await api.post("/product", formData);
7}

Tratamento de Estados

Gerenciamos corretamente os estados após operações:

1onProductCreation(); // Atualiza lista de produtos
2setShowProductForm(false); // Fecha o modal
3setEditItem(undefined); // Limpa o item em edição

Desafios Encontrados

Alguns problemas que enfrentamos e como resolvemos:

Comparação case-sensitive nas categorias (resolvido com toLowerCase())
Timeout no servidor durante requisições longas
Necessidade de limpar ambos os estados (showProductForm e editItem)

Próximos Passos

Para as próximas aulas planejamos:

Investigar e resolver os erros de timeout
Melhorar o feedback durante operações assíncronas
Implementar validações adicionais no formulário
Adicionar confirmação para edição (similar ao delete)

Considerações Finais

Esta implementação nos trouxe importantes aprendizados:

A importância de componentes genéricos e reutilizáveis
Como gerenciar múltiplos estados relacionados
A vantagem de usar o mesmo formulário para criação e edição
A necessidade de tratamento consistente de erros

A funcionalidade completa de CRUD (Create, Read, Update, Delete) agora está implementada, proporcionando uma base sólida para evoluções futuras da aplicação.