Au 14 - Front-end - React - Processando os dados do formulário - Mestres BEGIN

[Música] fala pessoal jancer aqui no vídeo a gente vai est continuando aqui com o nosso formulário né só que nessa aula a gente vai est trabalhando na funcionalidade em si do formulário no preenchimento dele e no envio desse dado né pro pro nosso backend tá então na aula passada a gente só estilizou nessa aula eu tô planejando aqui pra gente entender como que o formulário funciona e fazer esse o nosso formulário funcionar fazer também a funcionalidade do modal de quando eu pressionar ali em novo produto ele criar ele abrir para mim né o o modal

né E aí a gente adiciona o produto Depois fecha o modal e atualiza a lista de dados Então a gente vai estar fazendo isso e talvez no final dessa aula a gente mexa mais um pouco na estilização aqui nos detalhes aqui desse formulário Beleza então vindo aqui pro pra aplicação né e o o que a gente fez na aula passada a gente parou aqui né a estilização ficou dessa forma a gente não vai mudar muito isso aqui agora tá a gente vai deixar isso aqui dessa forma e futuramente futuramente não né Eh talvez nessa aula

ou na próxima a gente mexa mais um pouco aqui mas vindo aqui no código né na verdade aqui na própria na própria web né se eu atualizo a página Eu já apareço com modal aberto né e não é para funcionar assim né na verdade a gente vai aparecer aqui nessa tela inicial né nessa listar aqui de produtos e quando eu clicar aqui em novo produto eu quero abrir o meu modal tá então se a gente vem aqui no código tá aqui eu tô na na componente de produto né na página de produto onde nós temos

aqui um modal e esse modal esse show modal aqui nessa variável ela tá iniciando sempre como true né então por isso que quando eu atualizo a página o modal aparece em tela só que o valor dessa variável né Desse state vai ser controlado por aquele botão que tá no meu subheader né que é esse botão aqui novo produto e aqui a gente começa a ter já começa a aumentar um pouco a complexidade que é nessa questão de de fluxo de dado né que às vezes uma componente filha da minha aplicação precisa de um dado ou

manipula um dado e outra componente filha outra componente de outra linhagem ali eh precisa daquele dado também então a gente começa ter problema de tráfego de informação por enquanto a gente vai manter do do que a gente vem fazendo da forma que a gente vem fazendo desde então tá desde anteriormente aí que a gente vem com essa ideia pensando em eventos né criando callbacks mas no futuro a gente vai ver aí eh formma de solucionar isso tá Então nesse caso aqui no meu product subheader eu teria um evento tá a gente voltando naquela ideia de

pensar em evento né eu vou ter um evento que vai ser ou por exemplo quando eu pressiono o botão de novo produto né e a gente pode chamar isso de on on New product press ou on product press ou on Button press enfim o nome é bem varia né Você pode p o nome que você achar que faz mais sentido eu vou chamar isso aqui de on Ed product press nesse caso aqui não é press né nós estamos na web tá E aqui eu teria função né handle handle product cli certo então vou criar essa

função aqui que eu vou enviar como parâmetro né handle con handle product click aqui por enquanto vai ser a função que D só um conso log e vai logar callback Pirate só pra gente ter alguma coisa e eu vou adicionar essa propriedade aqui na no meu product subheader né então o meu product subheader vai receber uma função o nome dessa função que a gente deu aqui dessa callback né on product Click é opcional é opcional sim vamos deixar opcional né é uma função que retorna void né n aqui no typescript vai ser uma função que

vai ser executada por enquanto a gente não precisa de passar parâmetro para ela e ela também não retorna nada né que nesse caso essa função o que que ela vai fazer é basicamente alterar manipular esse meu state aqui que indica se é para mostrar ou não esse modal tá Então nesse momento ela tá dando só um callback né eu vou receber ela aqui on product Click e essa função ela vai ser ada onde no evento de clique do botão né então quando aqui no botão dá o One click e o nosso botão ele não suporta

isso ainda né Tá beleza vou vamos editar o botão né o botão aqui o on Click dele ele só tá logando Button pressed né Essa função não vem ele não aceita essa função ainda via parâmetro então basicamente o que a gente fez aqui em em produto e produto subheader a gente vai fazer aqui no botão também o botão vai receber uma função né o e aqui o nome dessa função o nome desse evento né que a gente tá pensando em eventos vai ser on Click né quando eu clicar eu vou passar uma função então a

minha componente Button né vai receber esse on Click e quando eu receber esse on Click eu só vou repassar ele pro evento em si né aqui a gente tá trabalhando com propriedade né isso aqui na interface do typescript que eu recebo aqui é a interface que descreve um objeto né então esse on Click seria a propriedade de um objeto o icon é a propriedade de objeto o tipo também e essa propriedade pode ser valores pode ser objetos pode ser arrs pode ser funções tá no caso aqui do por causa do tema que eu tô usando

né O que é função fica com a cor verde né e atributos também ficam verde então então eu declarei aqui o on Click vai ser um uma propriedade do objeto que vai ser uma função eu recebo esse onclick e só repasso aqui pro meu botão pro evento de verdade né esse atributo aqui da tag Button onclick é realmente o evento de clicar no botão esses outros aqui é só propriedade que a gente tá chamando do mesmo nome para ficar mais fácil de entender certo então o meu botão agora ele tem aqui o on Click certo

nesse on Click dele eu vou passar a minha função on product Click tá então esse prod eu não coloquei aqui que não recebi ele aqui né nos parâmetros da função Então vou receber ele aqui e só vou repassar no on Click do botão beleza aqui ele tá reclamando por que essa função ela pode ser undefined né no botão o Na verdade eu coloquei errado né eu coloquei que o retorno um objeto na verdade eu retorno void certo dessa forma aqui a gente pode salvar tanto product subheader quanto o botão tá E aqui agora em products

né Essa função aqui tá dando callback fired Então vamos vamos vir aqui no Browser E se eu clico em novo produto se a gente olha aqui no console o console tá sujo aqui com erros se a gente clica tá aqui né callback fired Então tá funcionando beleza clico mais vezes ele loga mais vezes então no nosso caso quando eu clicar aqui no handle Add product Click o que que eu vou fazer eu vou dar um set show modal eu vou mostrar Vou definir a variável que decide se eu vou mostrar ou não modal para true

certo então agora se eu clique novo produto ele abre o meu modal se eu clico aqui do modal ele fecha né então beleza perfeito vamos prosseguir aqui né que agora que eu já tô conseguindo abrir o modal eu vou preencher os dados só que antes da gente já ir preenchendo os dados e tentar enviar eu vou falar um pouco de formulários tá de como que funciona formulários aqui no HTML então para explicar eu vou usar esse espaço em branco aqui abaixo da lista pra gente criar um formulário nosso ali simples para mim explicar melhor o

conceito e aí a gente parte para esse formulário que a gente já tem pronto aqui né para esses campos que a gente tem disposto em tela e é um formulário porque a gente colocou se eu não me engano a aula retrasada tag form Mas é bom a gente pensar nesse caso aqui como Campos inputs espalhados aqui na tela Beleza então aqui no código tá nós temos aqui o a nossa product table né Aqui é onde eu decido se eu mostro ou não o modal então abaixo disso aqui eu vou criar aqui o meu form tá

então a gente tem a tag form e define o formulário e nós podemos ter por exemplo input tá esse input a gente pode passar um tipo para ele é do tipo text né eu vou é o input que vai vai ele vai receber a entrada de texto eu posso ter dois inputs tá Vou colocar aqui esses dois inputs e vou colocar um botão certo botão o tipo desse botão tem que ser submit tá submit isso aqui a gente já repassou passou por aí por isso né o tipo eu vou colocar uma mensagem aqui para dentro

dele também né escrito submit certo dessa forma que se eu sal volto lá no Browser nós temos aqui os dois Campos e um botão beleza tudo simples Até então o nosso formulário ele tem uma propriedade que é o on submit Ou seja quando eu disparar o evento de submit no formulário ele vai executar essa função uma função que eu passo aqui tá então eu vou criar aqui um handle submit tá uma função chamada handle submit e vou criar ela aqui antes de eu retornar tá então com handle submit é uma função vai dar conso log

tá console. log submit certo então se eu pressiono aqui o submit do botão ele vai ter aquele mesmo problema que a gente falou na aula que eu que eu coloquei a tag form né que é por padrão quando a gente dá um submit no formulário o HTML ele vai e tentar recarregar a página ele vai recarregar a página né então para evitar isso no no submit aqui do ele passa um evento via parâmetro dessa função tá então aqui o que que eu vou fazer eu vou pegar aqui definir esse evento pra gente ver o tipo

dele né que é o mesmo do outro lá é um react form event de um HTML form Element eu vou pegar esse tipo aqui por qu para mim tipar a minha função ali em cima né o meu rend submit aqui ele não quer mover para cima Deixa eu só recortar isso aqui e o morando submedia ele vai receber um evento do tipo react form event de um HTML form Element certo fiz isso aqui mesmo só pra gente ver ali e e pegar essa Malícia aí para pegar o tipo quando a gente não lembra né vou

passar aqui de novo a função handle submit no on submit do formulário e agora a minha função handle submit recebe esse evento se a gente olha dentro desse evento a gente tem aqui Um e dá um ponto né nós temos aqui prevent default que é para prevenir aquele comportamento default lá de recarregar a página então com isso aqui se eu volto aqui na minha na minha página né e clico aqui no modal no submit a gente tem lá o log submit então a gente já tá então a função né já tá sendo executada e aqui

ao invés de eu dar o submit eu vou fazer o seguinte e aqui já começa a entrar o os conceitos dos tratamentos de dados aqui usando o HTML porque por padrão o que que o pessoal tende a fazer quando se trata de formulário e no react né é criar inputs controlados né qual que é essa ideia de controler de inputs né controler de component tá que é o qu e é um uma componente que eu tenho controle sobre o valor que vai ser nela e para m ter esse controle eu preciso de um US state

tá então dessa forma eu teria por exemplo um US state para cada um daqueles Campos do do nosso formulário de adicionar produto e aí tendo esses tendo esses States né quando eu der o submit Quando eu for enviar esse dado pro backend eu só vou montar o objeto de dados baseado nos meus States né eu vou Peg gando o valor para de cada Campo o state né de cada campo e monto esse objeto essa é uma abordagem que a gente pode fazer só que isso quando cresce se a gente tem um formulário de por exemplo

15 Campos a gente vai ter 15 US States a gente vai cada US state tem duas variáveis né então a gente vai ter 30 variáveis ali para trabalhar o que vira bagunça né não é legal então uma outra forma de fazer isso eu poderia demonstrar para vocês as componentes controladas Tá mas eu já vou mostrar uma forma um pouco diferente de tá fazendo isso porque quando a gente tem esse evento do do HTML né do form event deixa eu dar um conso logo aqui nesse evento dar um conso logo nele eu vou vir aqui vou

clicar em submit né e agora ele logou aqui né no no Chrome esse evento tá o evento de clique e dentro desse evento de clique a gente pode eh explorar algumas tags né algumas propriedades aqui que uma delas é esse target certo que que é meio que o o elemento alvo desse meu evento de clique tá então esse target se a gente olha ele é um form com olha só a gente tem dois inputs aqui e um botão tá então é meio que dentro desse evento eu trouxe o meu a parte ali os elementos HTML

que estão referentes a aquele formulário e tendo esse elemento em mãos a gente consegue pegar o valor dele tá então se no primeiro campo aqui eu digito 1 2 3 4 e dou submit aqui ele vai logar aqui o objeto eu vou vir aqui em target no no input no no índice zero né E se eu clico aqui em Vales ó lá ó 1 2 3 4 né o texto que eu digitei então a gente consegue fazer isso a gente consegue trabalhar dessa forma com os formulários né O que vai ficar aí é bem mais

simples eh essa gerência aí do de como montar esse objeto né Depois que eu dei o submit como que eu faço para montar esse objeto e enviar pro backend Então dessa forma aqui fica bem mais fica bem mais simples tá fazendo assim do que com vários US state Então a gente vai fazer assim também nesse nosso caso né nesse nosso exemplo aqui e para trabalhar com isso nós temos o um um api aqui do JavaScript que é o form data tá esse form data eh ele recebe como parâmetro aqui o evento de o evento que

está sendo executado é o evento de um formulário tá então o que que eu posso fazer aqui eu vou criar uma variável tá aqui eu vou chamar isso aqui de data pode ser data né pode data vai receber um New for data né porque esse New porque o form data é uma classe né que eu tô instanciando uma classe e essa classe eu posso passar como parâmetro para ela né passar no consultor o evento né o evento que eu quero que ela pegue esses dados desse formulário só que se eu fizer só passar Oi aqui

ele vai reclamar porque não não tá no formato que ele quer né que ele precisa Criar e o formato que ele precisa tá dentro de e corrente target tá que é meio que o os elementos alvos desse meu formulário tá fica dentro de current target e eu passo aqui pro meu form data Então a partir do momento que eu faço isso a gente já consegue ter a gente já tem n um form data Desses desse meu formulário que que é um uma estrutura específic aqui do JavaScript contendo os campos do meu formulário e com os

campos dos dados tá então normalmente eh O O backend ele é que isso varia bastante né o backend ele pode esperar já de cara receber um forme data então tendo esse data aqui a gente já a partir daqui eu poderia enviar para o backend esses dados tá só que no nosso caso aqui o backend noss ele não espera comforme data né então a gente vai meio que converter esse essa estrutura do form data para um objeto simples do JavaScript né um objeto ali com chave valor e para converter isso a gente usa um pouco aí

de algumas funções aqui do JavaScript para conseguir fazer isso e eu vou exemplificar isso aqui em em um exemplo aqui bem simples Tá eu vou ter aqui ó um objeto vou chamar aqui de obj esse objeto ele tem a propriedade full e o valor bar certo então esse par aqui de chave valor é uma entrada né aqui no no JavaScript a gente chama isso de entry tá então se eu tiver outra aqui né Outra propriedade Opa propriedade barra com o valor full né então aqui são duas entradas né duas entries aqui desse meu objeto então

uma das formas que a gente tem de transformar um form data em um objeto simples é usar e aqui eu já vou chamar vou criar a variável result vai receber Object né esse Object com o maiúsculo que é também um api do JavaScript n pra gente trabalhar com objetos se a gente dá um ponto aqui dentro de OB a gente tem aqui ó from entries Ou seja eu vou criar um objeto A partir dessas entradas né aquelas entradas que eu mostrei ali então se eu tenho um um arrei de entradas né porque quando a gente

roda aqui um método no JavaScript que é esse aqui ó Object Object entries daquele objeto lá né full com valor bar ele vai retornar isso aqui um arrei tá um arrei onde cada cada valor desse arrei é outro arrei Contendo a chave o valor né então aqui teria isso aqui ó full bar que ele retornaria tá então esse esse seria as entradas né e a partir dessas entradas eu posso recriar o objeto né eu posso fazer o processo reverso Só que nesse caso aqui esse processo reverso nesse Object P from entries não vai ser de

do nosso evento né ou de do resultado de um Object pon entries vai ser aqui do do nosso data tá esse data aqui então se eu passo esse data aqui esse meu result já vai ser o objeto criado Tá então vamos fazer isso aqui V dar um conso log agora no nosso result result certo tudo certo então vamos aqui no react né eu vou limpar aqui o terminal e vou D um clicar aqui em submit E se a gente olha aqui o nosso objeto tá vazio tá E por que que ele tá vazio e aqui

entra uma propriedade que eu falei até na aula retrasada né que a gente não abordou ela e agora a gente vai entender o porqu que é o nome né o name ou seja pro nosso form data funcionar cada elemento ele tem que ter um nome tá cada elemento do formulário tem que ter um nome então esses meus dois inputs aqui cada um deles tem que ter um nome para que quando eu gerar o form data eu saber qual que é a chave do objeto referente a aquele valor tá Então nesse primeiro input aqui eu vou

dar um name e isso aqui vai ser Price tá e o segundo aqui vai ser o name dele vai ser hum Brand né que seria marca tá então se eu faço isso aqui e clico de novo em submit os valores já estão aqui né Brand e Price tá então ele só precisou da gente falar o nome de cada campo né de cada input e o form data já conseguiu montar esse objeto para mim beleza então se a gente volta aqui no nosso código né e basicamente a gente vai a gente vai parar por aqui nessa

questão do formulário né tem muito mais coisa que a gente pode abordar sobre formulário né muita coisa mesmo e Mas a gente não vai estar abordando aqui porque isso aqui vai ser o suficiente por enquanto tá então eu vou apagar esse formulário que eu criei só para exemplificar né vou criar essa função aqui rend submit na verdade a gente pode até copiar né já que a gente já tava fazendo aqui Eu e para economizar do nosso tempo né Eu Posso copiar essa conversão aqui essa criação do form dat e conversão dele em um objeto pra

gente reutilizar aqui no nosso no nosso AD product form né Ou seja quando eu adicionar um quando eu clicar né no submit ali para adicionar um produto ele vai chamar aqui o meu R form submit n essa função que que eu só só dando log né de forma submit mas aqui eu vou colar aquele código lá né o prent default que ficou duplicado mas a ideia é essa né é eu pegar essa minha estrutura de inputs e formar um objeto transformar em um objeto só que o problema agora é que e um deles né que

o outro eu detectei depois que terminou a aula O primeiro é que a propriedade name dos inputs que a gente tá usando não tá sendo repassada né então aqui agora a gente vai fazer isso por exemplo no nosso input select eu recebo né um parâmetro name e aqui no na tag select eu vou falar o dessa tag é o name que eu recebi via parâmetro certo e vou repetir isso aqui nos outros Campos né Ou seja no input text o nome do input né a tag input aqui vai ter um name O valor vai ser

a variável que eu recebo né altero e salvo vou fechando aqui para não virar bagunça e o terceiro que a gente tem aqui é o input text area né eu recebo o name e na tag text area eu vou ter aqui o name é a variável que eu recebo Beleza então com isso aqui vou fechar aqui esse Tex a gente já passou o nome né o o problema que a gente tem aqui agora é que o nosso backend ele espera um objeto eu vou até abrir aqui o insônia que é o que a gente tá

usando aqui para enviar esses dados pro backend e eu eu tenho que mandar um nome uma um objeto né com a propriedade name description na verdade isso aqui é a resposta né o que eu envio é esse name description amount né o p Price a gente tem que criar esse objeto com essas chaves aqui né Price category Brand e Store só que no nosso código o o name tá diferente para alguns Campos né Então a gente tem que corrigir isso aqui porque por exemplo lá tá esperando um objeto com o nome do produto né a

propriedade name que vai ser o nome do produto mas nesse caso aqui ó o name desse desse input referente ao nome do produto é product Então vai ter o objeto A chave vai ser product e o valor vai ser o nome do produto mas o backend não tá não vai procurar na chave product né ele vai pegar a chave name e não vai existir Então a gente vai ter problema lá para criar esse produto e a gente vai ter que trocar esses nomes aqui eu já deixei até anotado aqui né que o nome do produto

o name aqui do input não é product é name daí name tá só se repetindo aí né mas o nome do campo é name beleza e o que a gente tem aqui que seria a quantidade em stoque né o nome do campo que tá em inventory Só que nesse caso aqui é amount tá E esses nomes aqui tá se aliando com o que Leandro definiu lá no backend né no curso de backend que Ele preparou tá e o outro aqui é vendedor né o Seller aqui que seria o a loja de venda né que nesse

caso aqui é Store certo então alterando agora esses nomes a gente ir mexendo aqui né no nosso submit para usar o form data a gente tá pronto para pegar os dados preencher o nosso formulário e ter dados prontos para enviar pro backend tá então a categoria vai ser acessório a marca pode ser Asus a loja que vai vender vai ser o nome de loja cara a criatividade que vai doer viu info Center vai o nome de loja o nome do produto é uma é uma placa de vídeo o preço do produto é um r99 a

descrição do produto né uma placa de vídeo eh rtx 2060 certo e a quantidade em estoque Vamos colocar aqui 230 unidades certo aqui se eu clica em adicionar produto ele vai logar aqui para mim esse nosso objeto né com amount Brand category description enfim o objeto com os dados que eu acabei de preencher né O que é muito interessante porque foi bem simples gerar esse objeto usando form data né se a gente tivesse o US state imagina lá criar um objeto e atribuindo cada valor um por um daria uma certa dor de cabeça né não

que desse uma dor de cabeça mas ia ficar pelo menos confuso ou feio o código enfim eh a gente já tem o objeto agora comunicar com o backend né E se a gente lembra um pouco aí das aulas passadas lá no início e eu criei a parte aqui de serviços né que foi basicamente a configuração do exus pra gente ter um make um api um Api para mim usar essa Api para acessar diferentes end points lá do nosso backend tá então eu vou est usando essa essa variável que é api né que é uma Instância

do exus para tá mandando um request né se a gente olha aqui no insônia de novo eu tenho que mandar um post né para localhost 3000 bar product né no endp product o essa requisição post com esse objeto de dados e ele vai criar esse objeto para mim tá então vamos voltar aqui no Add product form né quando eu der o submit no formulário eu vou montar um objeto E aqui nessa linha de baixo eu vou fazer o quê Vou fazer o Api pon post né Vou mandar uma requisição do tipo post para qual endp

products products tá E por que que eu tô passando só end Point né porque lá na api eu defini o base URL né a URL base tá então vou ir no endp product e vou mandar um objeto de dados né um date aqui ó que dado que é o nosso result beleza com isso aqui ele já vai mandar e vai criar o produto para mim só que isso aqui é assíncrono tá essa esse tipo essa esse post aqui ó ele retorna um Promise tá um Promise de alguma coisa então é uma chamada assíncrona Então essa

minha função handle submit ela vai ser uma função ayn tá E aqui no api pp eu vou dar um await eu vou aguardar para que essa criar de produto Seja Feita tá então dessa forma aqui a gente já consegue criar um produto eu vou até mostrar aqui para vocês que eu vou conseguir criar o produto como é que o nome dele placa de vídeo né então vou clicar em adicionar produto de novo ele deu um erro no exus né que o request falhou com status 404 Bad request o end Point meu ficou certo é barra

product tá eu passei aqui barra products com o s no final né esse end Point não existe por isso que deu o erro 404 né 404 http é not found ele não encontrou endp beleza agora sim agora vou mandar de novo cliquei em adicionar produto não logou nada né porque eu não tô dando nenhum conso log aqui mas eu vou fechar o meu modal vou clicar aqui fora e Vou atualizar a página certo tá dando os erros aqui no console do das keys né que a gente não abordou ainda mas se eu volto lá ó

aqui ó já tá aqui a placa de vídeo certo marca Asus tem um ID tal entregue pela Asus e no estoque 230 o preço r$ 99 então ele conseguiu criar esse dado pra gente né já tá lá no backend já trouxe pra aplicação só que agora a gente tem que fazer uma melhoria que é o quê quando eu criar quando eu clicar ali em submit eu vou fazer o quê eu vou fechar o meu modal e eu tenho que atualizar essa lista automaticamente né para não precisar dar um refresh na página e para fazer isso

a gente vai voltar não é voltar mas a gente vai pensar também nessa ideia de evento tá porque eu tô no meu add produ forme então se eu venho aqui em produto eu posso muito bem eh assumir que o meu a minha componente é product forma ela vai ter um evento chamado on product Create ou One ou One product AD algo assim né que se remete à criação do produto né quando eu criar o produto eu vou fazer o qu tá e a gente pode ter outra função também que é quando eu tentar criar um

produto e der erro eu vou fazer o qu tá então a gente pode assim e enviar funções né definir parâmetros funções callbacks que serão executadas nesses casos então no Add product form eu posso falar que eu tenho aqui uma propriedade chamada on product Creation vai quando eu criar um produto eu vou ter a função aqui ó rendle product Creation certo vou criar ela aqui em cima mesmo padrão const handle product Creation Por enquanto aqui é uma função que não faz nada e essa função tá sendo enviada aqui pro meu esse on product Creation né vai

ser enviado aqui pro product form então no formulário onde eu adiciono produto eu V criar a interface que descreve os parâmetros né então vou chamar isso aqui de props eu vou ter aqui o on product creation vou passar isso aqui como opcional também esse parâmetro né Essa função callback e ela é uma função que retorna void né tipo assim essas callbacks normalmente elas vão ter parâmetro sei lá a função espera receber um ID espera receber um nome alguma coisa mas dificilmente elas vão retornar algo Tá mas enfim Então o meu add product form vai receber

um objeto de propriedades do tipo props tá então aqui dentro eu vou ter o on product Creation certo então essa minha chamada para api que eu tô chamando pro backend a gente pode envolver ela com um tricat tá esse trat aqui no JavaScript é basicamente eu vou tentar fazer alguma coisa se essa coisa retornar um erro um Exception eu vou executar um bloco de código né se não se eu vou tentar fazer uma coisa e se essa coisa der certo eu vou executar algo tá dentro desse bloco try se der erro eu vou executar o

que tá dentro do cat recebendo aqui como parâmetro erro tá nesse nosso caso se der erro o que que eu vou fazer só só vou dar um conso log conso log error pra gente ver lá no console que deu algum erro caso dê certo né então caso eu crie o produto depois que eu criar eu vou verificar né já que a minha on product Creation né a função ela é opcional na verdade vamos fazer ela requerida tá vamos fazer ela obrigatória né todo mundo que usar essa componente é product form vai ter que passar essa

callback aqui on product Creation Tá beleza então depois que eu criar o meu produto o que que eu vou fazer eu vou Executar a minha callback o meu Own product creation tá simplesmente já que ele não espera parâmetro nenhum eu só executo né se ele Esperasse Sei lá o o data do form do form data eu passaria aqui tá mas nesse caso ele não recebe então eu vou executar essa função que tô mandando via próprio Quando eu conseguir criar um produto n depois que eu criar esse produto certo então a implementação dessa função né como

ela vai vir vi parâmetro ela é esse handle product Creation Beleza então quando eu criar o produto Qual a primeira coisa que eu vou fazer set show modal false Beleza vou fechar o meu modal E aí depois que eu fechar o modal eu tenho que atualizar a minha lista né A minha listagem de dados e se a gente olha aqui em cima nós temos aqui um US effect tá aqui dentro dele nós temos a função get que vai buscar os dados dos meus produtos né do meu backend e eu executo ela aqui somente uma vez

né Por causa do meu US effect né Essa lista que vazia vai executar somente uma vez e o que que eu posso fazer eu posso mover essa função get data para fora do meu use effect certo e dentro do use effect Eu só chamo get dat igual tá sendo feito aqui e aí agora com essa função fora do use effect eu posso chamar ela aqui dentro do meu handle product Creation então depois que eu fechar o modal eu vou chamar a função get data eh passando aqui os Executar a função né porque o get data

também não recebe nenhum parâmetro Beleza ela é uma função assíncrona então eu poderia dar um ait aqui mas como eu não vou fazer nada depois dela a gente pode deixar sem o A tá acho que não vai ter problema não Beleza então a gente mexeu bastante coisa sem testar né então vamos vir aqui agora eu vou clicar aqui em novo produto vou criar um novo produto um Engraçado que eu criei a placa de vídeo como acessório né e é um periférico Mas enfim um acessório vai ser um um acessório carregador né que marca é o

carregador é da Apple a loja que vai vender é a Apple Store o nome do produto é um carregador tá o preço desse carregador é uns R 120 a descrição carregador para iPhones e a quantidade vai ser 21 carregadores tá vou clicar em adicionar produto ele fechou o modal E já apareceu aqui o carregador tá ele já fez ess requisição para mim se a gente vem aqui na aba Network do browser a gente pode ver que ele executou aqui um foi esse aqui é aqui já tem muito request né mas julgando pelo último né ele

executou aqui no localhost 3000 bar product né o método get buscando essa minha lista de produtos beleza isso tudo aconteceu baseado nessa nesse nesse meu callback née meu handle product Creation que é uma função que fecha o modal e busca os dados tá é isso aqui o que que eu faço com essa função eu mando ela via parâmetro pra minha componente de adicionar produto porque lá dentro da componente de adicionar produto eu sei quando eu cliquei no submit e eu sei se deu certo ou errado tá então eu meio que tô pegando essa esse bloco

de função com que pouco importa para função AD product form O que que tem dentro dessa função o fato a única coisa que ela faz é executar essa função tá então por conta disso a gente tá conseguindo fazer todo esse controle aí beleza então para essa aula vai ser isso tá eu vou parar por aqui porque a aula já tá bem grande né Estendeu é ficou Estendeu um pouco aí né Eh eu vou parar por aqui eu queria mexer alguma coisa nos estilos ali mas a gente deixa isso para um próximo momento né E para

essa aula é isso eu espero que eu tenha ajudado qualquer dúvida pode deixar um comentário logo abaixo e é isso aí muito Muito obrigado e até a próxima [Música]