[Música] fala pessoal Janer aqui no vídeo de hoje nós vamos estar criando aqui a funcionalidade de adicionar um produto no nosso banco de dados né no nosso na nossa lista aqui de produtos e vai ser um fluxo bem completo tá a gente vai iniciar essa adição do produto a gente vai adicionar o botão né de adicionar produto e preencher ali o formulário aparecer o mostrar o formulário tela né Depois desse formulário em tela quando a gente der um ok ele vai adicionar no banco de dados e vai atualizar essa nossa lista local aqui tá certo
então já vindo aqui pro código e nós temos aqui né o o que foi feito na aula passada basicamente foi a lista né a nossa lista aqui de de produtos e um problema que esse nosso que o próprio o próprio design aqui da aplicação tem e vamos olhar aqui no XD é que ele só só tem o botão de adicionar um novo produto quando não tem nenhum produto né que é com a lista vazia Inclusive essa essa essa componente que a gente não criou ainda né mas o botão novo produto ele só aparece quando não
tem nenhum item quando aparece os itens na lista né a gente não tem um um indicador aqui um botão para adicionar Novos Produtos Então nós vamos tá adicionando ele aqui ó na parte direita desse desse título produtos um sinalzinho de mais mesmo bem bem simples bem minimalista e quando clicado ele vai ser o responsável por abrir o nosso formulário né pra gente preencher ali os os dados tá então vamos voltar aqui no vs code e aqui no vs code no aqui no código né no projeto nosso a nossa tela de produto né Ela é composta
pelo quê por um subheader que seria essa parte aqui onde estão os botões né todos os produtos produtos excluídos esse título aqui né produtos nesta página você virá os produtos cadastrados então isso tudo aqui é o subheader então é dentro dele né que a gente vai querer adicionar o o ícone de adição tá que é aqui em produt e do lado aqui desse título de produtos desse texto né Então deixa eu adicionar uma linha aqui e aqui eu vou adicionar o Plus icon que é um ícone que eu adicionei aqui no projeto Daquele mesmo estilo
que nós fazemos convertendo um svg pr componente tá e com esse ícone aqui se eu salvo ele vai aparecer ali o ícone demais só que ele tá abaixo do do texto né do texto aqui produtos Então a gente vai ter que adicionar os dois em uma View né E nessa View eu ter que aplicar o estilo para para eles ficarem na horizontal né então aqui o Flex Direction é linha né r e olha lá eles já ficaram um ao lado do outro né só que agora eu tenho que passar um justify content Space between né
para eles se esp passarem com espaço entre eles né E aí o ícone de mais vai ir pra direita e além disso a gente passa aqui Um item para alinhar eles no esses dois ícones né no eo Center né para eles ficarem na mesma linha horizontal comparado um ao outro tá então esse estilo aqui eu vou mover pro nosso arquivo de Styles né Aqui tem o title container eu tenho o título que nome que eu vou dar para esse Style title icon container é é um nome agradável né Tem dias que a criatividade não ajuda
muito title icon container É pode ser o estilo dessa vai ser Styles title icon container certo então com isso aqui esse Plus icon se a gente já digitar aqui o onepress ele já tem o o evento que lida com o pressionar né porque esse aqui vai ser um botão né E só que não tem aquele efeito de clique né É só se eu eu pressiono ali ele vai executar o onepress mas não vai ter aquele clique e para ter o clique a gente precisa de um nesse caso aqui né adicionar um touchable opacity né E
essa componente aqui ela vai é um componente tocável e quando a gente clicar nela vai ter aquele efeito de de Botão mesmo né de clique Então olha lá ó já dá esse efeito aí de Clique pra gente e aí no toch opacity né eu vou passar aqui onepress ou seja quando eu pressionar esse botão eu vou fazer alguma coisa né nesse caso aqui eu só vou dar um conso log Hello abrir aqui o terminal vamos pressionar lá ó e ele printa Hello no terminal então beleza Tá funcionando só que agora eu vou ter que tem
que ter uma forma de indicar de dentro do subheader eu vou indicar pra minha componente p qual que é a componente p a tela de produtos né eu vou indicar para ela que eu quero adicionar um novo produto que eu quero abrir o formulário né que eu quero mostrar o formulário dentro do modal e como que a gente faz isso na verdade a gente tem algumas formas de fazer isso só que Ness a abordagem principal abordagem é Nativa entre aspas aí do react é usando callback né então eu vou definir uma função aqui na tela
de produtos essa função ela vai tratar ela vai ser a função handler né ela vai tratar o caso onde eu estou adicionando um produto E aí eu envio essa função via parâmetro pra minha pro meu sub E aí o subheader vai executar essa função quando pressionar o botão de adicionar esse botão mais tá então basicamente eu defino a função no nível anterior e envio Essa função para dentro da componente para ela ser executada quando alguma coisa acontecer dentro da componente tá isso essa é a ideia das funções callbacks então aqui na tela de produto primeiramente
a gente vai precisar de um State né um state que vai controlar aí quando ou não Eu Estou adicionando um produto quando ou não eu vou mostrar o modal o formulário né de adição de produto Então vou criar aqui um state eu vou chamar de is eding tá is set is eding vai receber aqui o use state que vai começar como true tá vamos deixar ele como verdadeiro aí então por por padrão eu já vou eu já vou abrir o app adicionando um um produto tá só por enquanto aqui enquanto a gente tá programando depois
eu vou mudar o o default aqui para falso tá então aqui dentro eu vou definir uma função que vai tratar esse caso de adição na verdade não na verdade eu vou descar aqui o nosso modal o modal que tá mostrando o formulrio de produto né vou salvar aqui ele vai renderizar o modal aqui para mim tá o formulário em si tá mostrando aqui E esse formulário esse modal em si Vamos abrir ele aqui ele tem a propriedade visible tá que se eu mudar esse visible aqui para false olha lá o modal some certo então esse
custo modal ele recebe um Tid mas ele vai receber também outra propriedade que é o visible que é o qu que é um boleano Tá tô definindo aqui da minha interface então o Custom modal vai receber um Children e também um visible via parâmetro e esse visible eu vou repassar aqui pra componente modal tá E aí dessa forma na nos lugares que eu uso o modal ou seja aqui na tela de produto eu vou conseguir passar aqui a propriedade com boleano tá esse boleano vai ser o qu vai ser a minha variável ised né que
é o meu state Então sempre que eu mudar o state de True para false ele vai mostrar ou não o modal se eu iniciar aqui o o ising Né o use state em false o modal vai iniciar oculto Tá eu vou deixar como true pra gente criar Aqui as nossas funções Beleza então com issso aqui a gente já tem um state a gente já controla quando ou não mostrar o modal agora a gente tem que criar a função que vai mudar isso né que vai trocar é que vai tratar esse caso aí de adição de
um de um produto então lá no subheader deixa eu iniciar aqui o US state F lá no subheader ele tem esse ícone mais né o botão mais sempre que eu pressionar o botão mais o que que eu vou fazer vou definir o ising para true só isso né definindo adding para true o formulário vai ser exibido então a minha função aqui eu vou chamar ela de handle handle Ed item handle Ed item isso pode ser essa função a única coisa que ela vai fazer é definir o state né o set is adding para true só
né então aqui dentro vou dar um set is adding true tá Por enquanto vai ser só isso E aí essa função que faz essa essa alteração essa atualização de state eu vou enviar ela via parâmetro pro meu subheader então o subheader vai ter uma propriedade handle head press essa essa propriedade que vai receber a função handle add item tá eh tá vermelho aqui porque eu tenho que definir lá dentro do subheader ainda mas aqui ó handle AD press é uma função que retorna void né que é essa função que eu acabei de criar tá então
dentro aqui do nosso subheader na interface dele eu vou falar aqui né que ele recebe um um handle Ed press Isso aqui é uma função que retorna void tá e não tô definindo o lugar errado né não é nessa interface aqui não vou ter que criar na verdade as propriedades aqui do subheader porque ele não recebe nenhuma né então nem tinha a interface então interface aqui as props né vai ter o handle AD press E aí o subheader ele vai receber um objeto de propriedade né do tipo props esse tipo essa interface que eu acabei
de criar e aqui dentro vou ter o handle Express tá então recebendo esse handle Express aonde é que ele vai ser passado né ele vai ser passado no onpress do nosso touchable op certo então para organizar aqui ao invés de eu na verdade eu posso passar a função direto aqui né o handle press vai ser executado aqui no onepress do meu table opacity beleza salvei aqui vou salvar aqui em produtos também né e agora se eu clicar no mais olha lá o nosso modal é exibido tá então perfeito isso que a gente quer já tá
começando como false né vou deixar assim então já vai ficar assim né E aí com isso aqui o nosso formulário tá sendo exibido a gente já consegue preencher os valores aqui né E aí se a gente abrir aqui o formulário de produto ele vai ter aqui um botão o último botão aqui né que é o botão submit aqui o que já tá com a função rendle submit que nós fizemos lá na aula do formulário né Então sempre que eu preencher esse formulário os dados e clicar em adicionar ele vai chamar essa função rendle submit certo
e essa função ela é aquele tipo de função que vai fazer uma comunicação com o nosso backend tá ela tem que comunicar com backend para conseguir salvar esses dados lá no nosso no nosso banco de dados né então novamente o backend é o backend criado por Leandro né Leandro fez ele lá no minicurso eh node né então toda a questão da lógica desse backend como que ele funciona foi abordado lá né nessas aulas dele só que e e agora aqui no nesse nosso caso a gente só vai chamar um end Point né consumir um end
Point e essa ideia de consumo de endp nós já estamos fazendo nesse nesse nosso projeto também que é aqui nos produtos né Nós temos essa função get que a gente tá usando o exus né então api esse api Aqui é do ex né exus pget estamos buscando o endpoint bar product né mandando requisição get lá que vai retornar pra gente essa lista de produtos que é exibido na nossa lista então aqui no Ed product form vai ser parecido tá só que ao invés de um get nós vamos fazer um o tipo de solicitação post eu
estou fazendo um esse essa ideia do solicitação post É como se eu tivesse enviando algum dado que vai ser usado para alterar o meu banco o banco de dados ou para alterar alguma coisa no backend então aqui eu usaria eu vou usar né o o meu api ou seja Resumindo aqui né Nós temos um state comform data né e de acordo eu vou preenchendo os campos esse state vai sendo atualizado esse for data que nós chamamos né vai sendo atualizado então quando eu clicar em submit nesse meu State essa variável form data vai conter todos
os dados que foram preenchidos E então a gente vai usar essa variável para enviar ela pro backend e falar ó backend cria aí pra gente um produto com esses valores tá então eu vou usar o Api do exus né api p poost e o post ele recebe o primeiro parâmetro o end Point né que é barra product Ou seja eu vou postar um produto né eu vou enviar um produto e o segundo parâmetro dele são os dados que serão eh usados para criar esse esse produto que é a nossa variável form data tá então dessa
forma aqui eh o backend nosso já está esperando né um objeto no formato que vai ser enviado aqui no form data e aí com isso aqui a gente já vai conseguir eh criar um novo produto lá no backend tá então esse rend submit ele vai ter que ser uma função assíncrona tá E essa ideia de função assíncrona é é uma ideia onde nós temos funções que são demoradas né funções que levam um certo tempo para serem executadas e a gente não quer Eh ficar travado ali esperando aquilo terminar para fazer outras coisas então a gente
cria a função assíncrona e dentro dela eu posso aguardar pela resposta dessas coisas que são demoradas nesse caso aqui o que que é demorado é o a o a comunicação com o backend né então esse api ppst né essa criação de um produto vai me vai me dar uma resposta vai me retornar uma resposta né então eu vou criar aqui uma variável e response e vou atribuir nela né O Retorno dessa minha desse Meu método post e esse retorno Olha lá é uma Promise de um exus response e essa ideia do Prom que é aquela
ideia das coisas que é demoradas e essa essa Promise né essa promessa de dado ela ela é literalmente um promessa que vai no futuro vai ser retornado algum dado Então antes aqui né do ap. poost eu posso dar um await Ou seja eu vou aguardar essa Promise ser resolvida essa promessa ser finalizada e aqui na minha variável response eu não recebo mais uma promessa de um exus response a gente já recebe a resposta aqui do exus e aqui na próxima linha eu vou fazer um conso log dessa minha resposta tá então dessa forma aqui quando
eu clicar para dar o submit né ele vai enviar esses dados vai criar os dados no backend vai me retornar uma resposta e eu vou dar um conso log nessa resposta pra gente ver o formato dela aqui beleza então vou abrir aqui o terminal eh e Vou preencher aqui o formulário tá Então as categorias né as categorias nossas ainda tá bagunçada né os valores tá JavaScript Python Java que não tem muito a ver com produto Mas vamos deixar assim tá não tem problema não e a marca desse produto é que marca é Lenovo a marca
e a loja de venda é sempre tá sendo tá sendo o mesmo falo o mesmo campo né então ele tá preenchendo os dois Campos aqui de uma vez o nome do produto é notebook o preço desse produto eu não sei vamos colocar aqui uns 4.000 o preço anterior tá pedindo aqui paraa gente preencher Vou colocar aqui sei lá 3.500 a descrição é o notebook e quantos eu tenho no estoque eu tenho 32 tá então eu vou clicar aqui em adicionar produto e olha lá nós já temos uma resposta aqui um log aqui né no meu
terminal que tá um log muito louco muito maluco Mas se a gente for ver eu tô dando um conso log na resposta inteira do exus Então dentro de respons se eu dou um ponto aqui eu tenho a config que é a configuração da requisição que foi enviada os dados que foram recebidos eh os cabeçalhos também que foram recebidos esse request que é o opcional que que é dados também do request tá e o status e status text que é o o status da requisição Então o que nos interessa aqui é o data tá esse data
aqui é os dados que foram enviados de volta então se eu clicar em adicionar de novo vai adicionar dois produtos iguais né mas eu vou clicar e olha lá ó ele me retornou Deixa eu tirar aqui você ele retornou pra gente um objeto com um id e aqui ele já tem ó amount Brand category description e já tá com os valores que eu preenchi lá no meu formulário tá então o que significa que foi criado como tá retornando um ID né o identificador Então a gente tem certeza que esse dado foi adicionado lá no banco
de dados tá então com isso aqui funcionando a gente pode melhorar um pouco essa aquisição Tá o que que a gente pode fazer aqui eu posso usar um bloco chamado tricat que ele basicamente e eu vou mover aqui para dentro Esse response consol logo pro Bloco try o que que é isso eh eu vou tentar fazer uma coisa e se der erro nessa coisa eu vou executar uma função com esse erro via parâmetro com esse erro ele recebe esse erro que aconteceu né via parâmetro e é é bem comum a gente usar isso em coisas
assíncronas em funções assc não todas as funções assíncronas mas as funções que comunicam com backend por exemplo porque pode dar um erro de conexão pode dar um erro de de dentro lá do Servidor e a gente tem que ficar esperando ou vindo por esses erros para tratar de forma diferente e então no CAT aqui nesse caso nosso né como é o mais simples possível só vou dar um con log nesse meu erro quando der um error né pra gente ter uma visão melhor que pô deu um erro e tal um erro de tal tipo deem
tal e função e facilita a gente eh a tratar erros aqui nas requisições Tá mas voltando aqui esse rendle submit ele tá funcionando nós estamos criando os dados o os produtos no backend né E para provar isso aqui Eu Vou reiniciar o app tá eu reinicio isso reiniciar ele aqui e quando ele e quando ele reinicia olha lá ó nós temos dois notebooks
