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

[Música] fala pessoal jancer aqui no vídeo de hoje nós vamos continuar aqui né desenvolvendo mais uma funcionalidade na nossa aplicação agora a gente vai trabalhar na funcionalidade de editar um produto né a gente vai pegar um valor ali um valor da tabela que está sendo exibido e vai editar ele com o formulário de produto tá então a gente vai estar fazendo essa funcionalidade aí e também tem alguns ajustes que eu fiz aqui que eu passei na aula né eu já deixei pronto pra gente não perder tanto tempo assim eh fazendo coisa que relativamente já é

simples se você acompanhou as aulas desde o início Beleza então para essa aula aqui o que que eu o que que eu fiz na aula passada na verdade né Eu pedi pra gente encontrar um nome melhor para o estado que controla se vai exibir ou não o formulário de produto e também criar funções específicas para cada modal quando a gente Pressionar para na parte externa dele né Eh funções que vão tratar o fechamento a ocultar né a exibição ali daquele modal então é um modal para fechar uma função que vai tratar o fechamento do modal

que tá mostrando o formulário para adicionar produto o que mostra a confirmação né o delete confirmation que é aquele aquele modal que aparece perguntando se a gente quer mesmo Apagar e o delete feedback né que é quando mostra que B já apagamos e clica aqui para continuar e o modal simplesmente fecha né então os três aqui estão com as funções aqui dentro eh o o modal que adiciona né o modal de produto ele é mais simples né o o state dele é um true ou falso ou a gente mostra ou não né diferente do deleção

que a deleção é um fluxo né então ao invés da gente criar vários estados para controlar esse fluxo Nós criamos um estado só né com aquele objeto lá que que a gente manipula as variáveis para est exibindo ou não dep eh a componente específica né o modal específico então criei essa funções Eu também renomeei uma função que foi a função essa aqui né handle delete Click que eu tinha eu tinha digitado handle delete press e aqui a propriedade on delete press aqui esse press é do react Native né e a gente confunde às vezes mas

no caso que o evento de clicar né no caso do react é web né a gente clica no mobile a gente pressiona né o evento press Mas enfim detalhes né então para essa aula O que que a gente vai querer fazer vamos vamos aqui no Browser é eu tenho aqui a aplicação e quando a gente clicar aqui no lápis né Essa coluna relou aqui Isso tá errado cara eu não lembro quando que a gente adicionou ela aqui eu lembro que foi algum teste mas ela não não deve tá aqui né Vamos tirar mas quando a

gente clicar né no lápis aqui para editar ele vai abrir o formulário de produto só que o detalhe aqui é que eu já tenho que pegar os dados desse cara tipo do item que eu clicar né para editar e já definindo o meu formulário como valor default Então a gente vai ter que ter a gente vai ter que fazer esse tratamento de dados de valores default no formulário de produto né no formulário ali que a gente preenche eh referente a produto Então vamos começar aqui eh primeiro removendo essa coluna Hello essa isso esse header né

Hello que nós vamos encontrar ela aqui no nosso product table né é essa aqui th né table heading hello vamos tirar vamos voltar ali ela sumiu Beleza então o que que vai acontecer a ideia é a mesma de sempre quando a gente clicar né o a nossa tabela de produto ela vai ter uma propriedade que é aquela ideia de evento né que a gente vai chamar por exemplo de on Edit Click quando eu clicar para editar eu vou disparar uma função callback né esse mesmo padrão então vamos criar aqui já a função tipo const handle

Edit Click tá uma função comum e essa função vai ser passada aqui no product table como on Edit Click e aqui vai ter a função handle né handle Edit Click e qual que vai ser a lógica aqui né Vamos pensar aqui um pouco na lógica dessa função e aí depois a gente Repassa ela lá dentro de product table o que que vai acontecer quando eu clicar no botão de editar minha aplicação ela vai ter que saber qual foi esse produto e eu vou ter que armazenar os dados desse produto em algum lugar para que eu

consiga pegar esses dados e adicionar eles dentro da componente dentro do Product do add product form né da componente AD product form para que a gente já passe esses valores Def dentro dessa componente Então a gente vai ter que ter uma forma de armazenar o produto que foi clicado e até então a gente tá usando sempre States né então aqui no início aqui na na página de produto a gente teria aqui um state é eu vou eu vou criar ele aqui depois do delete tá e o nome desse state a gente pode chamar de Edit

item set Edit item porque aqui dentro vai ficar realmente os dados do produto que eu cliquei do elemento né no caso aqui a gente tá editando produto né aqui dentro eu vou armazenar um produto né um objeto referente a um produto que eu quero editar Então a gente vai ter esse use state aqui né esse use state ele vai armazenar o dado do tipo e product ou undefined E essas e esse US state vai começar como undefined tá então ele pode adicionar ou um produto ou undefined e ele inicia a gente inicia ele como undefined

então uma das condições que eu vou ter para mostrar o meu formulário esse product form é o show product form que é aquele state né que eu coloco lá se é para mostrar ou não que a gente controla quando a gente clica no botão de adicionar produto e aqui a gente pode adicionar um ou n ou Edit item ou seja se eu tiver Um item para editar ou se eu setar o meu state show product form eu vou exibir o formulário é de product form dentro do modal até aqui tranquilo né vamos vamos testar isso

aqui deixa eu comentar esse product table vamos salvar vamos aqui no Browser tá tudo normal aqui também que que eu vou fazer o meu state Edit item ele tá começando com defined Mas eu posso começar ele como objeto vazio e aqui ele vai reclamar porque o objeto vazio não é um e product né no e product nós temos todos esses campos mas aqui a gente pode fazer um cast eu vou falar que o objeto vazio as I product Ou seja eu tô falando pro typescript que esse objeto é um I product e ele vai parar

de dar erro né então a gente salva e se a gente volta aqui ó o formulário já abriu tá Vou atualizar a página ó o formulário já tá aberto tá então aquela lógica Nossa tá funcionando agora a gente só tem que tratar esse esses casos aqui né para quando tiver esse cara adicionado e a lógica em si de editar um produto tá então o meu eu vou deixar comentado aqui o One Edit Click tá pra gente focar aqui nessa questão dos valores Def do formulário então o Ed product form nós teremos uma propriedade aqui a

gente pode chamar isso aqui de default values tá isso aqui vai ser igual o nosso e Edit item né ou seja o nosso formulário ele pode receber valores default e esse objeto default Ele Pode Ele vai ser né um produto né porque o formular é de produto né então ou é o produto ou é und defin n quando a gente não quer passar nenhum valor default certo então a gente vai abrir aqui o nosso formulário de produto e vamos ajustar aqui a interface dele né falar aqui que ele pode receber default values uma propriedade né

essa propriedade é do tipo e product a nossa interface e essa propriedade também ela é opcional né porque quando eu quero eh criar um novo produto eu não preciso passar valor default né porque eu tô criando né então a gente só vai passar o valor default quando a gente for editar tá então esse default values ele é opcional então vou falar aqui né que o Ed product form vai receber aqui um default values né essa propriedade default Vales E agora o que que acontece os nossos Campos que estão em tela ou seja o input select

o input Text e o input text area eles não estão recebendo eles não t esse suporte agora a gente não fez isso né então se eu quiser passar aqui um default Vales não existe de value né que aqui é só um valor no meu select não existe tá E do mesmo do mesmo jeito o texto e do mesmo jeito o texa mas se eu abrir aqui o meu input select e nós vimos viermos aqui no caso do select não n vamos deixar o select para depois porque ele é um pouco diferente mas se eu venho

aqui no input text Ou seja no input de texto eu posso passar aqui para ele ó um default value e sei lá vou passar aqui test vamos lá a string test se eu salvo isso aqui eu vou apagar essa propriedade porque ela não existe né para não dar erro Vou salvar salvar aqui também eu tirei vamos clicar aqui em novo produto ó todos os inputs de texto já estão com escrito teste né Por padrão Então esse defa Val tá funcionando né a gente só tem que configurar isso aqui pra gente enviar isso via parâmetro Tá

então vamos voltar aqui nosso input text ao invés do default value ser uma string uma string fixa que eu passei eu vou receber esse default Val via propriedade tá então o input text vai receber uma propriedade default value que é um string só que é opcional né que é aquela nem sempre a gente quer um valor default e aqui também Def value né nas propriedades da componente e o default value do input né quando eu recebi a propriedade eu vou repassar aqui no atributo n Def value da tag input eu vou passar aqui essa variável

que eu recebi certo então a gente vai fazer isso aqui e a gente tem que fazer isso também no input text area que é parecido tá o input text area ele vai receber aqui essa propriedade n default value aqui vai ter um default value e o a tag text vai ter aqui Def value é a variável que eu recebi até aqui tranquilo certo então vamos prosseguir pro nosso input select tá E por que que ele é diferente porque quando a gente clica aqui a tag select dentro dela a gente tem que ter as tags option

né as opções que serão selecionadas e para definir a opção que vai ser vai tá como padrão marcada né selecionada a gente a gente não não passa né um default values aqui na tag select e isso é feito na tag option eu faço isso aqui ó Passa esse atributo selected na verdade isso aqui é a forma curta de escrever select iG true tá a gente pode fazer isso aqui ou só falar passar selected né mas dessa forma aqui eu vou definir uma opção para estar selecionada só que aqui a gente começa a ter um certo

a gente vai ter que fazer na verdade uma verificação então o input select ele vai continuar recebendo um default value opa que é uma string né é opcional aqui também um default value né a propriedade da componente só que somente uma dessas opções vai estar selecionada né Ou seja eu vou passar uma option com esse atributo aqui selected só uma vez né então dentro desse meu mapa eu tô mapeando as minhas opções né que se a gente volta aqui no formulário as opções minhas é o que aqui ó é uma rei de Strings né então

eu mapeio esse Array de Strings e retorno uma Array de opções né de tag options né isso aqui a gente já passou até um tempo eu soltou Relembrando Tá mas dentro desse meu map ao invés de eu retornar isso de sempre né eu vou ter que fazer uma verificação tá então eu vou apagar esses parênteses aqui do meu map e vou colocar aqui Chaves né que é o corpo da função vou criar um corpo aqui dessa minha função map tá então o meu map agora tem esse corpo e aqui no final por exemplo eu vou

ter que dar um return retornar a opção tá só que antes a gente vai fazer o nosso if Ou seja eu vou verificar se Def value o valor padrão que eu enviei eu vou verificar se ele é igual ao meu option a minha opção Beleza então vamos vamos voltar aqui com pouco de paciência tá o input select ele recebe uma arrei de opções tá acessórios periféricos e aqui vai ter por exemplo Def Val acessórios que vai vir do backend Então dentro de input select eu vou verificar se Def value é igual a opção que eu

tô mapeando no momento tá dentro do meu map Beleza então se isso aqui for igual eu vou retornar uma op tá a tag option normal com o texto Dentro com texto option né Igual tá aqui aqui ó desse jeito que tá aqui com select só com selected né só que aqui dentro do meu if e aqui eu vou ter um else ou seja se não for o Def value eu vou retornar uma opção normal na real essa linha toda né com retorno também funciona aqui tudo e aqui não tem selected salvar aqui isso dessa forma

Beleza então com isso aqui feito agora tanto o meu input select quanto o meu input text o meu input text área tem aqui a possibilidade de receber valores defold né valores que serão exibidos por padrão então com isso aqui o que que eu vou fazer agora na minha componente é product form né que é basicamente no formulário o formulário ele pode receber esse default values né que é um produto ou defined Então o que eu vou fazer é simplesmente em Def values aqui ó tô passando acessório na mão aqui mas aqui seria Def Vales category

né isso aqui se eu dou um enter o JavaScript a ide né já coloca essa interrogação para mim isso aqui é basicamente uma forma de eu me proteger no caso de de Def Val for undefined né Porque se a gente fizer isso aqui ó undefined ponto category vai dar erro né porque o undf undf não é um objeto né vai dar erro só que com com essa interrogação a gente se protege e referente a isso né a gente meio que assume que se Def Val for defined eu não vou acessar category porque não existe Tá

e isso e o retorno disso aqui vai ser undefined tá então a gente já falou que o default value no input select no input Text e no input text área ele é ou uma string ou undefined né a gente já assume que isso pode ser undefined então assumindo isso né a gente não vai ter problema caso seja tá então eu vou simplesmente repassar esse default Vales para todos os campos tá então esse campo aqui é Brand esse campo aqui é Store certo aqui é nome nome não name né é o price né o preço e

aqui no preço vai dar erro Por quê Por quê Porque o preço é um número tá então já que ele é número a gente só dá aqui um ponto string tá caso ele exista converta ele para string para mandar aqui como default Val certo que é o description e no no stock né no amount aqui vai ser amount amount é um número né isso então da mesma forma ali do preço de string Beleza então dessa forma aqui a gente já fez bastante coisa né A gente já falou que o as nossas componentes o input de

texto de o select e o text era podem receber valores default e e e eu já falei que a componente do formulário pode receber dados default e est repassando esses dados pra componente caso eles existam tá tem um porém aqui um detalhe aqui no input select que detalhe mesmo de comparação tá porque pode ser que a string por exemplo venha diferente do backend tá ou o Def value tá então pode ser que a gente receba por exemplo a string acessórios acessório com acento acessórios acessório Pode ser que o que eu quero dizer é que o

default value e esse valor que a gente recebe das opções pode ser diferente um pode estar com maiúsculo né com com começando com letra maiúscula outro não pode ter essa diferença tá e eu lembrei disso porque no banco de dá que a gente tá usando agora né que foi o que Leandro criou lá nas aulas de backend tá com essa diferença então então é vale uma pesquisa maior a questão de um tratamento melhor sobre essa comparação tá aqui eu não vou abordar muito isso não vou entrar muito a fundo nisso mas é eu tô aqui

só lembrando mesmo porque pode ser que né dependendo aí da base de dados a gente tenha essa inconsistência que essa comparação né não seja tão precisa tá mas enfim voltando aqui o o nosso formulário de adicionar produto já recebe esses dados default né então vamos aqui em produto tá produto já recebe né o aqui na tela de produto né a componente é de product home a gente já tá passando esse Def Vales que é o nosso state tá então agora basicamente tratar o clique né quando eu tipo assim Executar tudo né quando eu clicar em

editar o que que a gente vai fazer né que é aqui na nossa função handle Edit Click Então essa função Vamos abrir aqui para ST table né vou eu vou trazer ela para cá vou trazer a tipagem só voltar aqui ã na real isso vai mudar né então vamos aqui em product table eu vou falar aqui que a gente recebe on Edit Click Isso aqui é uma função que retorna void vou pegar ela aqui E aí eu vou executar ela aqui ó no nosso ícone do lápis né o editar eu só tô dando um conso

log né Edit icon press se a gente vem aqui no web vamos clicar aqui para ver vamos inspecionar aqui vou te limpar aqui esses erros a gente clica lá ó Edit icon pressed e o ID tá então tá funcionando beleza só que aqui ao invés de dar o conso log eu vou chamar a minha função on hum Edit Click né e executar ela tá certo só que essa função O que que a gente tem que fazer dentro dela dentro dela eu tenho que setar set Edit it eu tenho que setar o item que eu estou

editando né que é o qu é um produto Então essa função né nessa callback que eu tô falando né quando eu clicar em editar eu vou ter que enviar para essa função o produto que eu tô clicando né para mim saber o que que eu tô editando então aqui em vamos deixa eu fechar isso aqui fechar esses caras aqui aqui aqui em product né quando eu clicar em editar eu vou enviar aqui o qu o produto que eu tô clicando né porque se a gente lembra isso aqui tá dentro de um map eu estou mapeando

os dados que vem do backend né então esse product aqui essa variável é um e product Ó lá tá tipado é um produto eu vou enviar quando eu clicar em editar então vou ter que mexer na tipagem né aqui eu vou receber um item esse item é um e product e eu vou dar um set Edit item enviando o meu item né setando o meu item no meu state né esse state aqui ó Edit item E aí Edit item vai passar a existir quando ele existir eu vou exibir o formulário de adicionar produto o formulário

de produto com default value definido também então em teoria isso tudo deveria funcionar Vamos abrir aqui product table só corrigir a tipagem né que no Edit Click eu posso receber um item que é um I product certo salvo aqui eh vamos salvar aqui também e aqui eu pensar se é só isso acho que é só isso sim vamos testar então aqui né no na aplicação eu vou clicar em editar esse Mouse né o mouse da Dell de r$ 800 tá então se a gente clica editar olha lá ó já funcionou então nós temos aqui um

mouse Dell ele a loja que vende ele é Magazine né ele o preço dele é 800 né e a descrição dele também tá aqui então a gente já consegue eu passar os dados Def pro formulário e eu não sei se esse acessório tá correto deixa eu puxar aqui o insônia e vamos buscar aqui todos os produtos porque com todos os produtos a gente pode ver aqui ó que o nosso Mouse ó lá ó o mouse ele a categoria dele é periféricos tá só que o p tá minúsculo Então aquela igualdade que a gente tá fazendo

não vai não vai bater aqui ó aqui onde eu decido né no meu formulário de produto no meu select né se ele tem ou não default value essa comparação aqui se o default value é igual option não vai bater para isso aqui funcionar eu teria que fazer o quê um true lower Case que é basicamente o método do JavaScript para converter tudo para minúsculas né E aqui o option também lower Case certo que é um nível de padronização né eu meio que ignoro maiúsculas e minúsculas né Eu só vou analisar tudo minúsculo dessa forma aqui

ó lá já mudou para periféricos tá então tá funcionando beleza e a ideia seria né eu vou falar que esse que esse então a gente pode falar aqui né que o mouse Ele custa 1000 só que se eu clicar aqui em adicionar produto eu não vou editar né eu vou adicionar um novo por quê se a gente volta aqui no código no código do formulário de adicionar quando eu dou o submit no formulário né eu pego os dados do form data e basicamente mando um post pro meu de PTE de produto ou seja vou criar

um produto só que aqui agora não é bem assim né a gente tem que tratar isso também então o que que a gente tem que fazer a gente tem que verificar se existem default valu né se eu estou passando valores default eu vou mandar esse dado para um endp o endp de editar se eu não estou passando o dado default eu vou mandar pro endpoint de criar tá então vai ter aqui também um if else onde o else vai ser a criação né ou seja se eu não mandei dados padrão default eu vou criar um

produto mas se eu mandei a gente vai fazer um processo bem parecido com isso aqui eu vou até copiar striat vou colar salvar aqui para ele formatar ou seja se a gente olha aqui no insônia a a rota de edição é essa aqui ó é um um um request do tipo né vou mandar um vou dar um update passando ID do produto aqui como parâmetro da minha rota tá então a gente tem que fazer essas alterações aqui ou seja eu vou dar um [Música] api.put tá aqui em product eu vou ter eu vou usar aqui

o template string tá ou seja vai ser barra product barra o ID do produto tá então que eu vou ter chave e e fazer meio que aqui a inserção né usar o template string para inserir esse string aqui dentro que vai est dentro de qu de result P under ID né o ID desse meu produto que eu estou editando vou passar isso aqui ele vai editar um produto e aqui a gente tá chamando esse product Creation que é é uma callback também né que vem aqui da tela de produto que ela basicamente atualiza a lista

né faz outra requisição pro backend e como é que é o nome on product creation tá que vai tá no handle product Creation esse cara aqui ó basicamente fecha o formulário e atualiza os dados né busca de novo do backend tá então se eu fizer isso agora ele vai fazer a atualização desse meu produto no no backend e tem mais um detalhe aqui que é o quê quando eu passar o valor default aqui não vai ser mais eh adicionar produto o texto do botão né o botão lá do formulário vai ser editar produto Então o

que eu vou verificar Ah se tem default vales eu vou retornar hum pera aí aqui seria no else né se tem default values a string vai ser editar produto tá sen não é adicionar produto Então vamos voltar aqui no Browser já tá aqui né editar produto e aí se eu clicar né o mouse agora é 1000 né clicar em editar ele não tá fazendo nada hum interessante por quê vamos inspecionar aqui deixa eu ver aqui no console deu um erro no exus né Por quê eh Network error vamos ver aqui o que que aconteceu voltar

aqui no código Barra product api.put V ver aqui no insomnia ap. no endp bar product com o ID do produto underline ID né no nosso resultado deixa eu dar um cons aqui no res pra gente ver aqui clicar em editar o nosso result esse result ele não tem id não tem ID interessante H vamos e esse res result né lembrando ele vem do formulário né só que realmente né Realmente é o detalhe aqui no nosso formulário a gente não tem campo de ID Então realmente não vai ter esse ID tá no default values né que

é o default Vales que armazena o objeto que estou editando que a gente setou o state lá quando a gente clicou no lapizinho né clicou no ícone de editar então aqui ao invés de ser res vai ser Def Vales P id e dessa forma aqui agora sim a gente vai conseguir né editar produto ele logou aqui deu outro erro não eu fui olhar aqui no e na primeira vez que ele deu erro o servidor tinha parado tá então é bem provável que agora agora funcione aparentemente não deu erro a gente só tem que fazer mais

coisas aqui né porque o o exus tem um timeout eu cliquei e fiquei esperando mesmo para ver se logar algum erro não logou nenhum erro então em teoria isso aqui funcionou a gente só tem que tratar esse caso aqui ó se a gente vem aqui no código eu vou tirei esse conso log de result e o que tá acontecendo ali é que eu finalizei eu chamei o on product Creation né que é a eu chamei o on product Creation né que é a callback que executa quando eu finalizo ali o a criação de um produto

só que aqui ele a gente dá um set show product form false Ou seja eu limpo eu eu tiro ali eu no caso isso aqui seria por caso de criação Só que no caso de edição eu tenho que fazer também o set item set Edit item undefined porque volta naquele caso que a gente abordou lá no início porque se uma dessas variáveis tá verdadeiro ele vai exibir o formulário tá e no nosso caso aqui nesse caso né no no no adição ou edição de produto a gente tem que assumir os dois casos e tratar os

dois né então quando eu finalizo a criação a gente seta o product form para falso e seta também o edit item para undefined E aí agora sim ele vai sumir o formulário e ó lá o mouse tá R 1.000 vamos editar de novo agora é 100 tá ó lá 1001 se eu atualizo a página 100 certo então a gente já consegue editar aí esse nosso produto Beleza então para essa aula a ideia é essa tá é fazer essa funcionalidade de edição na próxima aula a gente vai estar falando um pouco desse erro que tá dando

aí que eu já tô enrolando segurando não enrolando adiando para falar sobre ele porque é um assunto bem interessante e a gente vai e falar abordar isso aí na próxima aula Beleza então para essa aula é isso eu espero que eu tenha ajudado qualquer dúvida pode deixar um comentário logo abaixo e é isso aí muito obrigado e até a próxima Y