View formulário de usuário

TiagoGouvea commented 4 years ago

Branch: 23-view-formulario-usuario
Usar padrão Presentational and Container
Este arquivo será o modelo para todos os outros formulário, então é importante fazer bem feito, ter um código fácil de entender, bem comentando e explicado, para quando alguém copiar e colar estes arquivos levar tudo bem organizado já.

Objetivos

Permitir ao usuário editar e incluir usuários, tendo um feedback claro do que está acontecendo.

[x] É um card com os inputs e o botão salvar ao final
[ ] Utilizar knobs no storybook para alterar algumas props em tempo real
[x] Recebe o registro do usuário via prop data,
[x] Declarar prop onSubmit que será implementada mais na frente
[x] O formulário deve ser usado tanto para inclusão quanto para edição
[x] Ao clicar em salvar, se algum campo requerido não estiver preenchido exibir alerta e não permitir salvar
[x] Role ser um select com opções ("admin"> "Administrador", "voluntary"> "Voluntário")
[x] Status ser select ("active" > Ativo, "inactive" > Inativo) ou checkbox "Ativo"
[x] Gênero ser select ("male"> Masculino, "female" > Feminino)
[x] Birthday ser componente de input de data
[ ] Telefone ter máscara para padrão DD-XDDDD-DDDD
[x] Ao clicar em salvar, desativar botão, exibir um loading e chamar a prop onSubmit passando o objeto data
[x] Caso falhe em salvar, reativar botão e remover loading, exibir mensagem de erro ao usuário
[x] Enviar nesta issue um print do componente no storybook, para vermos como está ficando

[x] Será carregado em /users/{id}/ ou em /users/add/. A existência do "add" indica que é um novo registro ao invés de um já existente
[x] Quando tiver um id, exibir um loading, obter o registro com axios da api
[x] Caso falhe em obter, exibir mensagem para o usuário
[x] Ao obter, exibir componente <UserForm> passando o user via prop data
[x] Passar via prop onSubmit o callback para salvar o registro, se ele tiver sucesso irá retornar algo, se falhar irá retornar um Error, que deve ser apresentado ao usuário
[x] Quando houver sucesso em salvar, exibir toast "Salvo com sucesso" e redirecionar interface para /users/
[x] Enviar nesta issue um print do admin nesta rota, para vermos o componente em funcionamento

allanmaral commented 4 years ago

UserForm

Screenshot_2020-01-16 React App

TiagoGouvea commented 4 years ago

@allanmaral ficou chique demais da conta!

Pode abrir merge quando quiser.