Cursos / Informática para Internet / Plataformas de aplicações Web / Aula

arrow_back Aula 13 - PetTopStore - PDV - Parte 2

PDV - Adicionar Cliente (src/AddClient.js)

O componente AddClient adiciona um novo cliente usando a API e é exibido somente quando se escolhe essa opção no componente Sale.

Ele recebe por "props" o employee logado (necessário para se fazer requisições a api com o token JWT dele), recebe também a função clientCreated e cancelCreateClient que são ambas implementadas em Sale, mas são chamadas pelo componente AddClient, quando um cliente é criado com sucesso e quando o usuário cancela a criação do cliente.

Antes de ver o código vamos ver o visual do componente AddCliente quando se clica em "Cadastrar um novo cliente" em Sale: Descrição imagem Veja que é um componente simples, basicamente tem 3 inputs relacionados às variáveis de estado name, email e password. Quando se clica em "Salvar cliente" é feito o cadastro pelo acesso a API que retorna o ID do cliente cadastrado, e depois é executada a função props.clientCreated(json.clienteID), que foi passada pra ele pelo Sale. Essa função é chamada com o ID do cliente cadastrado como parâmetro para que o componente Sale (onde ele está implementado) consiga já automaticamente selecionar o novo cliente cadastrado no SELECT para se realizar uma nova venda.

O botão cancelar executa props.cancelCreateCliente() que somente some com o AddClient e volta para o Sale com o estado anterior mantido.


Versão 5.3 - Todos os Direitos reservados