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:

1. Criamos um estado editItem para armazenar o produto sendo editado
2. Adicionamos a propriedade defaultValues ao formulário de produto
3. Adaptamos os componentes de input para receber valores padrão
4. 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.