Aula 03 | Trilha Intermediário | NLW Pocket

[Música] fala Dev seja muito bem-vindo muito bem-vinda ao nlw Pocket de JavaScript eu sou Diego Fernandes e sou City na Rocket City também programador há 13 anos eu vou te acompanhar na trilha intermediária aqui com react e node juntos a gente vai construir em apenas três aulas um app para controles de metas pessoais para você acelerar pro seu próximo nível em programação nesse Evento totalmente gratuito você vai aprender como usar o poder do JavaScript para se destacar no mercado de trabalho Esse é um conteúdo inédito Então aproveita muito essa oportunidade porque as aulas vão ficar

disponíveis somente essa semana para você assistir Claro no horário que você preferir mas para chegar até o final dessa missão eu preciso que você Se comprometa a assistir todas essas aulas e colocar a mão na massa junto comigo para sair Daqui com um projeto pro seu portfólio e Um certificado pro seu currículo beleza Lembrando que sempre que tiver qualquer dificuldade ou qualquer dúvida você pode acessar a comunidade do discord da sua trilha e mandar a dúvida por lá o link dessa comunidade todas as informações do evento estão reunidos no guia do evento que você recebeu

por e-mail também é importante que você entre no grupo do WhatsApp exclusivo para participantes do nlw para não perder nada e participar Dos sorteios e brindes e garantir o seu certificado e muito mais então agora bora pro código bora comar bora pra nossa terceira e última aula aqui do nlw Pocket JavaScript e hoje bem focada ainda dentro do react a gente vai falar sobre funcionalidades mais avançadas do react focadas principalmente na parte de Fat de dados que é a conexão do nosso frontend com o nosso backend né onde a gente vai consumir aqui as rotas

do backend de criação de meta completar Meta pegar as metas pendentes pegar o resumo da semana aqui dentro do nosso front end né mas antes da gente partir né pra construção dessas funcionalidades dessa integração do front com back tem dois conceitos que eu preciso explicar aqui no react antes da gente prosseguir principalmente se for o seu primeiro contato com react o primeiro deles é o conceito de estado tá vamos lá entrando aqui na nossa aplicação né Se eu jogar aqui por exemplo no meu App jogar aqui Em qualquer lugar por exemplo um pode ser aqui

no começo ó jogar dentro do dialog aqui é um aa salvar ele vai aparecer aqui em cima tá E aí aqui embaixo que é esse summer é o que tá mostrando aqui que é o nosso resumo tá então por enquanto eu vou deixar o meu summary comentado aqui pra gente ver somente esse essa string que eu coloquei aqui em cima e aí eu vou trocar essa string aqui por um botão chamado incrementar nesse buton vou jogar nele Um Type Button E aí o que eu quero fazer é abaixo aqui do botão eu vou ter um

H1 aqui vou até colocar um tamanho nele maior então botar um Tex 4xl e eu vou escrever zero aqui dentro e aí o que que eu quero toda vez que eu clicar incrementar eu quero aumentar esse valor aqui de zero para um para dois por aí vai tá E aí se a gente for pensar isso aqui ah na maneira do JavaScript mais convencional dig digamos assim eu poderia pensar que eu teria uma variável Count certo e aí eu criaria aqui uma função Pode ser aqui fora por exemplo increment né E aí eu faria aqui um

count mais mais né ou count mais igual 1 por exemplo a gente poderia fazer dessa forma mas como ele é uma constante né tem que trocar aqui para um let que vem de Let it Change né deixe mudar ou seja uma variável que tenha o seu valor à Não constante né E aí quando o usuário clicar nesse botão então passo on Click E aí eu passo uma função ah como aqui eu tô passando uma função que é uma variável do JavaScript né eu passo com Chaves sempre dessa forma aqui ó salvo aqui agora e aí

o que que eu vou fazer vou dar um conso log aqui embaixo ó na função em count pra gente ver o valor dele aumentando Ah e aqui no lugar do zero Ó eu também vou usar Chaves aqui e vou mostrar count aqui dentro então salva vejo que é count é zero se eu inicializar ele aqui como cinco ó salvo Volto ele tá como cinco tá vendo se eu vi aqui no console da aplicação veja que quando eu C incrementar ó ele mostra seis aqui embaixo Porém Aqui continua cinco tá isso Por quê no react diferente

do que a gente tinha lá antigamente no angular JS eu não sei se você teve a oportunidade de programar em angular JS né o angular JS ele tinha Ah foi uma das primeiras ferramentas que a gente teve que trouxe essa reatividade per front end onde a gente conseguia digamos ao Alterar uma variável no no JavaScript refletia eh o valor dessa variável em tela ah instantaneamente né Ah isso a gente chamava lá no angler de two way data bind né que se a gente for pensar na tradução seria Ah uma atrelar os dados e em em

via de Mão Dupla que que isso quer dizer lá na época do angular tá isso quer dizer que no angular se eu criava uma variável por exemplo count e eu mostrava essa variável como o valor de um input toda vez que eu alterasse o Valor dessa variável no JavaScript o o valor do input era alterado automaticamente ele mostrava em tempo real e por que que ele é two way Por que via de mão dupla Porque se o usuário fosse lá no input e digitasse um novo valor dentro do input o valor da variável no JavaScript

também alterava e é por isso que é T porque não interessa se eu alterasse o valor dela pelo JavaScript ou pelo HTML o valor sempre era sincronizado só que com o longo né o Passar dos anos a gente percebeu que isso não era muito performático porque praticamente qualquer variável que a gente criasse ela ficava sendo observada e e muitas vezes a gente alterar valor de uma variável a gente nem queria que a nossa interface atualizasse né mostrasse alguma coisa nova e a nossa interface recarregavel toda vez E isso gerou muito problema lá nos anos de

2012 2013 tá E foi por isso até que o angular JS passou por muitas alterações Claro o angular Que tem hoje nem é mais assim eu tô falando lá do angular JS na versão 1.3 1.2 quando eu comecei a programar ah com angl JS e por isso no react a gente não tem esse funcionamento veja que eu altero a variável E nada acontece na minha interface o react ele introduziu desde a sua primeira versão um conceito a parte por isso eu vou deixar já comentado aqui em cima que é o conceito de estado o estado

nada mais é do que uma variável como essa aqui porém que Toda vez que o seu valor for alterado o valor atualizado dela é refletido em tela Então como é que a gente faz para criar um estado aqui eu chamo de use state e aqui eu passo um valor inicial lembra que eu tava iniciando meu valor com cinco então eu passo por exemplo cinco aqui dentro tá E aí esse US state ele não me retorna simplesmente o valor da variável ele me retorna um Array tanto que se eu passar o mouse aqui por cima dele

eu vejo que ele retorna aqui ó Um Array onde a primeira posição do Array é o valor da variável em si onde eu vou acessar a variável né Por exemplo o count e a segunda posição do Array é uma função para eu fazer a atualização dessa variável Ou seja quando eu uso um estado no react Eu Nunca Vou atualizar essa variável simplesmente chamando ela aqui dando mais igual a 1 por exemplo eu tenho que usar uma função que quando chamada vai alterar o valor dessa variável Então olha só o US state ele Devolve um Array

onde a primeira posição do ar E aí por isso eu posso fazer uma desestruturação aqui né então Ó a primeira posição do arrei o índice zero é o meu count em si e a segunda posição do Array é uma função para eu atualizar o valor do count geralmente a gente acaba chamando ela de set e o nome da variável né count por exemplo E aí agora eu posso criar minha função function increment Tá mas agora veja que se eu Criar a function increment aqui fora do componente ela não vai ter acesso a essas informações aqui

concorda comigo por isso quando a gente tem um estado as funções que manipulam o estado elas elas ficam dentro do componente também e agora lembra eu não vou atualizar essa variável dessa forma diretamente se eu quero atualizar o valor da variável count eu vou chamar set count tá E aí eu passo um novo valor para ela isso é outra coisa muito importante do react no React a gente quando tem uma variável né que é armazenada no estado eu nunca vou eh fazer uma mutação no valor dessa variável O que que é uma mutação né Eu

nunca vou só aumentar ou diminuir eh eu vou sempre substituir o valor da variável tá então eu sempre vou criar um valor novo para essa variável E por que isso né isso vem muito do conceito de mutabilidade da programação funcional eh principalmente por causa do algoritmo que o react usa por baixo dos panos para Detectar mudanças na variável e conseguir renderizar de uma maneira mais performática né mostrar em tela e detectar alterações nas variáveis de uma maneira mais performática eu não vou entrar em detalhes aqui mas na na própria documentação do react tem um Ah

tem um artigo lá que eles falam bastante sobre isso tá da uma procurad dininha aí na documentação react mutabilidade algoritmo de reconciliação que você vai achar então se eu quero dar um novo Valor para count eu vou pegar o valor anterior e vou somar com um certo então agora eu salvo volto aqui veja que agora quando eu clico em incrementar a variável atualiza em tempo real então isso aqui é um dos conceitos mais importantes do react né que é basicamente a ideia de eu poder eh atualizar eh variáveis e ver esse valor refletido em tela

em tempo real e aí tem um outro conceito aqui que é muito important importante né que a gente Precisa aprender que é como que a gente faz chamadas http fat de dados dentro do react Olha só o meu backend aqui ó tá rodando tá lembrando aqui ó eu venho aqui no Postman ó get Week summ ó Don send tá funcionando certo eu vou copiar o RL aqui e aí a gente vai fazer eu quero basicamente e mostrar aqui pensa que eu quero pegar o resumo aqui né da do meu backend e mostrar aqui ele em

tela né mais paraa frente a gente vai precisar desses dados para conseguir Determinar Qual componente a gente vai mostrar porque eu vou utilizar o próprio summary aqui para saber se eu eh mostro né Que o usuário ã tem metas cadastradas ou não tá mas logo já te mostro como é que vai ficar isso então ã geralmente né quem tá iniciando no react pensa o seguinte bom se eu quero fazer um fetch de dados poderia fazer algo dessa forma aqui né ah eh F fazer o fet aqui dentro então faço um fet ali na naquela rota

né E aí ponto Then aí eu pego aqui ó por exemplo ah aqui eu vou ter meu response né faço um return responsejson né porque o retorno aqui dele é em Jon então a gente faz uma formatação digamos assim posso fazer um novo P aqui dentro onde eu vou ter os dados daí já né convertidos E aí eu vou dar só um conso log no aqui dentro tá Vou salvar vamos lá no nosso conso aqui vou dar F5 E nada acontece vamos dar uma olhada aqui no Network que que aconteceu clicar aqui em Fetch Ah

xhr e bom não tá mostrando nada aqui dentro porque eu não salvei o arquivo Ah vou dar F5 e veja né eu tenho a minha requisição aqui dentro tá vendo que ela tá mostrando aqui duas vezes primeiramente não se preocupa com isso tá isso é só um comportamento do react se a gente for vir aqui no Main ó tá vendo que aqui no Main tem esse strict mode isso aqui em desenvolvimento quebra a cabeça de muita gente que tá iniciando No react tá porque esse desgraçado desse Streak mode aqui ele infelizmente faz tudo na nossa

aplicação né No primeiro carregamento acontecer duas vezes e isso aqui é necessário sim tá Infelizmente sim e não vou entrar em detalhes o porquê mas AC cunho de só pra gente aprender o básico do react eu vou só comentar essas duas linhas aqui tá pra gente não se perder vou voltar aqui Ah ele deu erro então não vou comentar vou tirar mesmo depois a gente bota de volta Tá vendo que aqui no Network Então agora ele fez uma única requisição tá se eu clicar nela aqui ó veja que é exatamente o o conteúdo lá da

resposta que eu tô esperando certo e aí aqui no meu console veja tá aqui os dados do summary né E aí o que que acontece imagina que eu queira mostrar esses dados em tela sempre que eu preciso né alimentar uma informação que vai ser exibida em tela eu vou usar um estado Então posso criar um estado aqui em cima vou chamar ele de ó de Summary set summary vou criar aqui um use state vou iniciar ele aqui como nulo tá porque eu não sei não tem o valor inicial né enquanto não carregou não não carregou

sei lá nulo undefined ou qualquer coisa assim certo e aí no final aqui eu venho dou um set ao invés de dar um console log vou dar um set summary data e vou mostrar o summary em tela Então vamos pegar aqui abaixo do H1 aqui ó botar um uma tag pré que é um pré-formatado né e dentro Eu vou jogar Aqui ó uma variável né Jason P string F passo aqui o meu summary nu e do que que é esse nu e do né É só para ele fazer uma identação não ficar um Jason jogado

em tela ele vai deixar um Jason bonitinho em tela quer ver ó salvo Olha lá em tela que que já tá aparecendo o nosso resumo legal né só Qual que é o problema de fazer o fet de dados dessa forma olha só o que que vai olha o que que tá acontecendo aqui na nossa aplicação ela tá em loop eterno meu Deus Do céu eu acho que eu até ferrei com o seu computador Talvez né Deixa eu comentar essa linha aqui para parar de executar E aí eu vou aqui ó no ponto then vamos tirar

esse set summary aqui por enquanto porque antes de eu ferrar com o seu computador e aí Me desculpa se o seu computador travou agora por falta de memória ou processamento eu peço minhas mais profundas desculpas não era para isso acontecer mas pelo menos você percebeu eh o que que aconteceu aqui eh Da forma que a gente fez o fet de dados se a gente faz o fet de dados né ou a gente coloca qualquer código aqui dentro direto na raiz do componente o que vai acontecer é que este código ele vai vai executar toda vez

que o componente renderizar e que que é o componente renderizar é toda vez que a gente tiver qualquer alteração no estado do componente Então olha só aqui dentro ó toda vez que eu clicar no botão incrementar olha só a requisição tá Sendo feita de novo só que não faz sentido certo e toda vez que eu tô clicando no botão incrementar tá tá dando um novo log aqui ó de a no terminal isso porque tudo que eu coloco na raiz aqui do meu componente e é executado de novo a cada alteração de estado aqui dentro como

é que a gente faz para resolver isso né no react a gente tem um Hook chamado use effect quando eu falo Hook né Hook são basicamente Essas funções que o react Expõe pra gente que começam com use elas são funções internas do react tá E aí aqui no use effect ele basicamente recebe dois parâmetros o primeiro parâmetro é qual função que eu quero executar por exemplo o fet de dados o segundo parâmetro é quando eu quero executar E aí esse quando eu quero executar Ele sempre vai ser um Array que a gente chama de Array

de dependências E aí o que acontece é toda vez que eu coloco uma variável aqui dentro o react Entende que sempre que esta variável mudar ele vai executar o use effect de novo senão ele nunca mais vai executar Então olha só eu vou deixar dessa forma aqui o código com a rei vazio isso vai fazer com que o código do use effect Execute apenas uma vez então se eu dar F5 aqui na tela vier aqui em net Network veja ele carregou o summary se eu clicar em incrementar não carregou de novo ó posso clicar quantas

vezes eu quiser certo a partir do momento que eu venho Pego count do react aqui o count né que a gente tá aumentando quando clica em incrementar e boto aqui no ra de dependências Salvo Não se preocupa com errinho que tá dando aqui tá Isso é porque ele tá falando Poxa tu colocou o count aqui mas não faz muito sentido né Tu nem tá usando count nesse fat por que que tu quer executar de novo esse fat quando o count mudar né não tem muita lógica então ele tá meio que te avisando que pode ser

que tenha um erro não se Preocupa olha só vou dar F5 ó executou uma vez quando eu clicar incrementar executou de novo clico incrementar executou de novo então o ar de dependências toda vez que essa variável muda ele executa de novo certo então como isso aqui é um fat de dados eu quero executar uma única vez e aí eu vou novamente descomentar essa linha aqui para colocar o summary ali dentro vou dar um salvar aqui e Pronto né agora a gente tem o summary aqui dentro e aí o Que que a gente pode fazer aqui

dentro né a gente pode vou tirar aqui essas listagens botões incrementar vou tirar o count aqui ó que a gente não tá mais usando increment tirar tudo isso aqui tá E aí lembra que a gente tinha esses dois componentes aqui né o empty goals e o summary agora que que eu vou fazer olha só eu posso fazer um if aqui dentro faço seguinte se no meu summary E aí lembra que o summary é isso aqui né é eu quero pegar Só esse objeto aqui né então hoje o Summer ele tem na verdade Ah um arrei

ele tá vindo um arrei hum não queria que viesse um arrei então vou fazer o seguinte vou lá no meu backend aqui ó get a Week summary lá nas funções tá E aqui ó no result eu vou passar result zero né primeira posição do arrei Salvo volto lá no frontend dou um F5 e veja que agora o Summer vem um objeto direto não vem mais um arrei Tá e agora dentro do Summer a gente tem esse total que é o Total de met metas cadastradas tá eí que que eu vou fazer o seguinte ó se

dentro de summary eu tiver o tal maior que zero quer dizer que eu tenho pelo menos uma meta cadastrada eu vou então mostrar o componente summary se eu não tiver Total maior que zero quer dizer que eu não tenho nenhuma meta cadastrada então eu vou mostrar o componente empty goals E é assim que a gente faz um if dentro do react né eu quero mostrar algo ou algo certo fazer a Importação aqui do empty gos aqui ó mover a importação do react lá para cima e a aqui ó se salvar e voltar deu erro Por

que que deu erro porque num primeiro momento enquanto a requisição ainda não terminou aqui ó a requisição de carregar o Summer Ela nem tá executando aqui porque tá dando erro direto né daí nem chega a executar Enquanto essa requisição não terminou de executar porque ela leva um tempo né o Summer ele é nulo Então olha só como é que eu tô Acessando uma propriedade Total ele até fala como é que tu tá acessando a propriedade total de nulo né esse log que tá vindo aqui é por causa de uma extensão que eu tenho instalado chamada

console Ninja que ele rouba os console logs lá de dentro do navegador e traz aqui pro vest code bem legal né então que que eu posso fazer aqui eu posso usar o famoso nullish classing operator do typescript que é basicamente um pontinho de interrogação aqui dentro Aqui na frente e ele fala ele tenta buscar o total de dentro de summary Mas se summary for nulo ele nem continua executar o resto então Salv aqui agora e olha só ele trouxe aqui empty gos só que bom deveria ser isso que ele tá mostrando hum não sei Vamos

dar um conso log aqui juntos nesse summary total para ver o que que tá vindo Opa tá vindo como undefined Hum vamos dar um console no summary Então vamos dar uma olhada Ah tá porque dentro desse summary tem outra Propriedade summary E aí sim tem o restante tá Então olha só aqui não vai ser summary vai ser summary ponto summary ponto Total não tem problema tá aqui a gente podde fazer também aqui ó data P summary direto e aí eu não precisaria fazer isso aqui né então eu vou pegar direto o objeto summary que tá

vindo aqui da nossa resposta e salvando ali no estado e aí Teoricamente agora ó se eu dou um F5 veja que ele vai para esta página aqui por quê Porque o total É maior que zero né só que novamente né tá dando um erro aqui isso por como nós estamos usando typescript a gente quando a gente faz uma requisição pro backend é legal a gente informar qual que é o o formato dos dados que estão vindo pra gente e novamente né O que que eu posso que que a gente pode fazer aqui ó a gente

volta lá no backend vou te ensinar um hackz inho legal aqui ó passo o mouse em cima de summary e olha só ele já traz pra gente o formato certinho só venho Aqui copio veja que o gos per Day tá vendo que ele tá vindo como unkn ele não sabe qual que é o formato isso por quando eu crio uma coluna utilizando o SQL aqui no no drizzle ele ele basicamente ele não não ele não consegue saber qual que é o formato que isso aqui vai retornar mas eu sei qual que é o formato né

basicamente o Ghost per Day ele é um objeto onde a chave é uma string e o valor é um Array contendo esse formato aqui então olha só o que Que eu posso fazer aqui ó posso criar um Type go Opa Type gos per Day E aí eu falo que ele é um objeto no no typescript a gente chama um objeto de Record onde a chave do objeto é uma string a gente passa ela nesse sinal de menor e maior e o valor é um Array então arrei a gente pode indicar ele de duas formas posso

passar assim ó mas eu não gosto tanto como ele é um Array de objetos eu passo aqui ó um Objeto com o Array no final então é um arrei de objetos e aí aqui no objeto eu falo Quais são as tem o ID que é uma string tem o title que é uma string e tem o completed at que é uma string também n ele vem como uma string aqui a gente pode ver E aí aí Ah aqui no Ghost per Day eu venho aqui no skl aqui embaixo Aqui ó pode ser tanto aqui quanto

aqui antes da do assento grave aqui da Cras ó e boto o sinal de menor e maior e passo o Ghost per Day e agora Passo o mouse em summary Olha só ele já tem certinho qual que a tipagem E aí eu vou copiar exatamente aqui só o objeto ó veja o objeto inteiro vou lá no front end e aqui no us state Ó eu vou falar passo o sinal de menor e maior e fala qual que é o formato aqui do Summer control V só que ele vai dar erro por quê ah vamos criar

uma tipagem aqui em cima então aqui ó Type Summer né para ficar mais organizadinho E aí eu posso passar summary aqui dentro só que aí ele Vai continuar dando erro por quê Porque eu falei que summary aqui ó ele segue este formato aqui tá Ah já tem o summary aqui em cima vou chamar ele de summary response porque já tinha um componente chamado Summer né ele vai dar erro por quê Porque eu tô falando que aqui ó o Summer precisa ter esse nulo esse formato cer então eu falar que ele pode ser do tipo Sum

response ou nulo no primeiro momento que é quando ele tá Carregando Então vamos lá ver agora por que tá dando baixo erro summary Total is possibly undef por causa do nulo Deixa eu entender aqui summ response então aqui eu poderia fazer o seguinte se summary e summary Total Mark zer E aí eu faço uma verificação aqui do lado Ou seja agora eu t fazendo uma verificação Change optional Ch mas eu tava fazendo assim antes ele continua dando erro porque mas o total não pode ser né Hum hum deixa eu pensar porque aqui eu tô falando

que ele pode ser nulo E aí o nulo eu tô garantindo com ponto de interrogação aí o total pode ser defin mas como que o total pode ser defined se eu passar o mouse em cima de summary Ele é um número sempre hum agora me pegou aqui hum deixa eu pensar Eh ok aqui eu vou fazer só uma checagem dupla então verificar se eu tiver o summary pon total e o Summer pon Total for mar zero aí eu mostro o summary né mais pra frente inclusive aqui eu poderia hum fazer até diferente né bom não

tá bom Por enquanto tá bom é só pra gente entender né então volto aqui ó dou F5 veja eu tô vendo aqui as metas né Ah Claro ainda não não real mas isso porque o total aqui é maior que zero né se ele fosse por exemplo se eu fizesse maior que 20 aqui ó veja que ele vai mostrar lá a telinha de quando não tenho metas ainda né porque aqui eu tenho 14 metas cadastradas não lembro quanto que era aqui ó total é 14 tá fechou não é metas cadastradas né total de soma ali de

metas que eu tenho que completar beleza né isso aqui então é a forma de a gente buscar dados né do Frontend do backend aqui dentro do nosso front porém e a gente não vai fazer dessa forma por qu porque quando a gente vai fazer f de dados né o react recomenda que a gente use uma biblioteca H focada em fet de dados hoje existem duas mais famosas ã para trabalhar com a com apis http né rest mesmo a primeira delas é o t stack react query T stack query esse carinha aqui ele não funciona só

com react funciona Com vários com outras bibliotecas também a outra é swr da verson ã As duas têm a mesma ideia Tá mas a gente vai vai est usando tant stack query aqui inclusive é a que eu uso nos meus projetos funciona muito bem começar instalando ela aqui e vou te mostrar como isso aqui tudo vai ficar mais simples usando essa biblioteca tá com ela instalada tem a opção aqui ó quick start e ela tem aqui uns guias né que que a gente vai fazer ó ela pede Primeiro nós vamos lá no componente que tá

por volta de toda a aplicação Então vou aqui no Pode ser aqui no Main mesmo tá e nós vamos começar criando um query client então a gente pode jogar aqui ó posso criar ele nesse arquivo mesmo ou criar um arquivo a parte aqui né quy Cent tudo mais você você que sabe e aí a gente vai jogar por volta da nossa aplicação esse carinha aqui ó client provider então aqui ó por volta do app D um enter aqui Ó jogar aqui Cent provider e boto ele fechando aqui embaixo e aí faça a importação né e

vejo que eu passo para ele uma propriedade client que é aquele Cent que a gente criou aqui em cima tá mover a importação lá para cima e pronto feito isso nós vamos agora aqui dentro eu vou reescrever esse código usando o react query para você ver como fica mais simples né pelo menos na minha opinião vou comentar tudo isso aqui e aí como é que a gente vai fazer vou escrever const Deixar o objeto vazio aqui por enquanto tá e vou escrever use query aqui no use query passar para ele um objeto e aí eu

tenho que passar para ele duas propriedades obrigatórias nesse objeto primeira delas er query function que é qual função eu vou executar para trazer os dados então passo aqui uma função posso até passar ela como uma função assíncrona e aí que que eu quero executar é esse fat aqui eu vou até Copiar o fat que tem aqui em cima daí eu volto a comentar aqui e vou jogar o fet aqui dentro única diferença é que eu vou reescrever esse fet por uma sintasse de de assim que é weight botar aqui um const response igual a weight

aí eu apago essas três linhas aí aqui no responsejson aqui né eu faço um const data iG aight respon Jon E aí Prontinho né a única diferena é que eu não preciso D set sumary aqui embaixo eu vou dar direto um returna aqui Embaixo tá dando erro ainda porque a gente faltou passar uma outra propriedade obrigatória aqui que é o Cury Key esse Cury Key Ele sempre vai ser um aray tá e para ele eu passo basicamente uma identificação única para esta requisição então o que que eu tô buscando aqui o resumo então eu passo

summary por exemplo tanto faz é como se fosse um ID uma forma de eu identificar essa requisição unicamente e mais pra frente a gente vai entender o motivo Disso tá E aí ele devolve pra gente aqui data retorna várias coisas na verdade olha só ele retorna is loading que é o boleano que a gente tem acesso se aquela quy tá acontecendo né se o fat ainda tá acontecendo ele é true ou falso né ah tem muita informação tem refet que daí se eu chamo ele faz a a requisição de novo status para eu saber se

deu certo se não deu tem muita coisa aqui dentro error né caso tenha dado algum erro ele vai tá aqui dentro então aqui a gente Pode fazer por exemplo vamos começar pegando só o deira E aí aqui embaixo eu preciso falar qual que é o formato desse Dea né Lembrando que eu vou vou pegar aqui ó Dea pon E aí lembra que a gente tem esse Type aqui né eu posso fazer o seguinte aqui no usy ó lembra que eu tinha passado ele aqui dentro agora o usequery eu vou passar ele aqui ó Então veja

que aqui quando eu passo o mouse em cima do data tá vendo que ele não sabe qual que é o Formato data n se eu pego e passo aqui ó ó já tá aqui su response ou undefined antes a gente tinha usado ou nulo né mas nesse caso ele usa ou undefined não tem problema tá e pronto só vem aqui troca o summary por Lea e olha só que interessante apaguei tudo isso aqui e agora o nosso código ele ficou dessa forma aqui se eu salvar volto aqui na aplicação e ela continua funcionando ó fazendo

a requisição sem problemas nenhum certinho tá Diego Beleza então o react query ele é só para deixar o nosso código mais h mais limpo né um pouco menor Não Calma né se você nunca utilizou Calma que ainda vou te mostrar outras coisas que que eu eu gosto de fazer também tá gosto de vir aqui no search ó criar uma pastinha htp e colocar as minhas requisições aqui dentro Então essa aqui por exemplo get summary Export function get summary ah Opa com g minúsculo aqui né E aí eu Trago essa função aqui Ó aqui para dentro

só boto aqui um aass né Ah E aí vou fazer o seguinte para facilitar também vou trazer essa tipagem aqui para dentro Sum response E aí falo que essa função aqui ela devolve ah Promise isso porque toda a função assíncrona no typescript né no JavaScript retorna uma Promise E aí eu passo o Summer response aqui dentro que é o formato do dado retornado de dentro da minha função assíncrona salvo e olha Só agora vai ficar bem mais simples a gente vem aqui ó e passo o meu get summary aqui dentro e aí como agora no

na própria função get summary eu já tenho exatamente qual que é o retorno dela né porque olha só se eu não boto aqui ó ele não sabe qual que é o retorno fica n tá vendo mas como eu informei aqui né diretamente eu nem preciso mais passar aqui no us porque da agora ele vai entender automaticamente ó passo mouse no data olha só ele já sabe ali Então olha só nosso arquivo ficou bem menor né e continua funcionando Fechou então agora que a gente fez o setup do react query e a gente tem acesso ao

resumo e a gente tá conseguindo determinar eh para mostrar esse resumo ou não eu vou começar a te mostrar as maravilhas aqui do react query tá olha só vamos lá vou começar copiando esse use query aqui com o summary Tá e agora eu vou lá dentro do meu Componente summary e eu vou fazer a mesma coisa vou jogar ele inteiro aqui copiar oy copiar o get Sum vou lá na minha aplicação vou dar F5 tá vendo que ele tá executando isso aqui duas vezes claro né Por aqui no meu App eu tenho ele aqui uma

vez e lá no componente summary eu tenho outra vez certo só que uma das vantagens do react quy é que a gente consegue ter nele um cche interno Que que é um Cash interno eu consigo falar para ele aqui ó dou um enter e tem uma opção aqui que se chama Stale time que que é Stale time Stale vem do termo né se traduzir pro português é obsoleto ST time significa quanto tempo e aí se eu não me engano aqui é em milissegundos em quanto tempo eu quero considerar que esse dado aqui ainda não é

obsoleto que que eu quero dizer por exemplo se Uma pessoa aqui dá F5 na tela 50 vezes faz sentido essas 50 vezes eu carregar o dado de novo não dificilmente ele vai mudar certo então eu poderia criar digamos como se fosse um cche interno para tipo a cada um minuto ele busca esses dados senão não precisa buscar de novo é claro que no caso de um F5 né Ele sempre vai buscar de novo porque a menos que eu salve isso no local Storage aqui no banco de dados do navegador o navegador ele não guarda a

memória da Aplicação quando eu dou um F5 né mas nesse caso que a gente tem dois componentes né vai funcionar Então olha só como ele como ele é em milisegundos eu vou fazer 1000 né Isso aqui vai dar 1 segundo e vou botar vezes 60 isso aqui até posso botar aqui do lado ó 60 ah 60 Seconds né botar aqui do lado pra gente para ser fácil a gente entender e aí eu vou lá no meu summary lá no meu no meu componente vou fazer a mesma coisa aqui ó Stale time 60 Segundos salvo venho

aqui na minha aplicação abro o Network vou dar F5 e olha só o que aconteceu aqui agora ele executou a query uma única vez por que que ele executou a query uma única vez porque aqui no App ele executou essa primeira vez e aí ele falou olha Deixa essa o resultado dessa quer em cash por 60 segundos isso quer dizer que se na minha aplicação eu precisar desse dado em algum outro momento dentro de 60 segundos não busca de novo do backend Retorna esses mesmos dados assim a gente evita fazer mais uma requisição E aí

por isso lá no summary quando eu busquei esses dados ele já tinha já tava no cash ele não precisou bater no backend de novo Olha que interessante né Isso aqui é muito legal do react tá E aí que que eu posso fazer agora pegar esse data aqui e usar ele aqui dentro né em toda em todo todos os lugares que eu preciso usar né então se eu for abrindo aqui ó Vamos abrir em todos os lugares que está minimizado aqui a gente vai asados que estão vindo L do back Então vamos L primeo vendo esse

5 a 10 de Agosto aqui vamos escrever el com a correta da sem atual Então vamos pegar aqui não lro acho no FR a gente ainda não instalou dayjs n tinha não lembro mas V instalar el aqui e aegar first Day of Week e vou fazer o seguinte vou pegar o DJs Vou pegar o início da semana tá e vou fazer aqui uma formatação a formatação se a gente entrar aqui na documentação do DJs ela permite eu transformar uma data para um formato específico e aqui olha só que que eu quero eu quero o dia

Então veja só eu tenho o dia com dois caracteres sempre ou com apenas um caracter pode ser só com um caracter então se eu pegar aqui ó boto D aqui eu vou ter o dia só que eu quero mês também né só que eu quero só os primeiros três Di dígitos do mês pode ser aqui ó Janeiro aqui pode ser esse mmm tá então se eu vi aqui eu dar um espaço mmm E aí eu pegar esse first Day of Week aqui e botar no lugar dessa string Olha só vamos ver o que que ele

vai mostrar pra gente lá na interface olha só ele mostrou 11 a né que é de August né de agosto porque o DJs ele vem por padrão em inglês mas eu posso importar aqui ó de dentro ah PTB R de dentro de DJs bar loque bar PTBR se eu não me engano dessa forma aqui e aí eu venho e dou um DJs p loio e passo PTBR se eu salvar aqui agora e volto ó agosto tá vendo Ah só que o Agosto a ficou minúsculo é o padrão do brasileiro é assim então posso vir aqui

por CSS mesmo e passar para ele aqui um capitalize que ele vai aplicar um text Transform capitalize ó dele fica com a maiúsculo perfeito né só que nossa essas coisas nada a ver aqui só que eu não eh eu quero botar Ah é o mês por completo Na verdade né então é não vou botar assim mesmo como a data de início e a data de fim pode estar em meses diferentes né porque pode ter semana que começa no mês e termina no outro eu não vou fazer igual eu botei aqui porque pode ser que seja

por exemplo dia 30 a dia 6 só que daí não é de agosto né é Setembro né então vou fazer o seguinte vou pegar aqui o último dia last day of Week E aí pegar aqui também o dia e o mês e aí eu vou botar os dois aqui ó Ah Mas daqui tem que ser o end off né E aí eu botar um izinho entre eles ó com espaço aqui no meio e pronto ó ficar 11 de Agosto 17 de Agosto acho que assim ficou legal aqui na barra de progresso né a gente tem

aqui ó quantos eu completei E aí eu vou pegar isso aqui de data p completed e o total de metas que é data pon Total ó já ficou ali ó 31 só a barra de progresso tá errada né então aqui eu Preciso calcular né o eh o o progresso calcular o progresso Vamos criar aqui em cima uma variável para ficar mais fácil não ficar um cálculo ali embaixo né então botar aqui ó completed percentage e aí fazer o seguinte eu vou pegar Ah o meu data pon completed que é o valor e de quantos eu

completei vezes 100 dividido pelo total né isso aqui é um regrinha de três básica né Ah só que aqui eu preciso fazer um round e aqui Veja que ele tá dando erro por quê porque pode ser que é ele não sabe que esse dado aqui ele já tá carregado né quando o componente tá sendo exibido tá vendo que ele pode estar com undefined né porque aqui ele não sabe que vai existir o cche né então o dado Pode ser que no primeiro momento ele ainda não tá carregado então ele teria que fazer essa Crew de

novo então aqui só para um fazer um rockzinho né fazer o seguinte ó aqui em cima fazer um if se eu não tiver aea Eu dou um return nulo então é como se nada daqui de baixo fosse executar e agora ele já para de dar erro né pensando que o Dea pode não existir porque senão se ele não existisse ele pararia aqui não chegaria nas próximas linhas né e eu nem preciso mais desse ponto de interrogação aqui ó e aí eu vou fazer só um math pon round aqui para ele arredondar o número não ficar

um número muito grande e aí no lugar do 58% aqui ó no 58 né vou jogar o completed Percentage veja mostrou aqui é 21 e aqui no lugar desse 50 também vou trocar aqui por e jogo aqui tá lá 21 perfeito né esses aqui não vou mostrar agora porque isso aqui vem de uma outra requisição que é o Get We pending goals aqui né então vou para essa parte aqui da semana vamos lá então essa parte da semana aqui a gente vai fazer o seguinte primeiro eu vou deixar ela mais limpa possível vou deixar apenas

um dia aqui ó que é o domingo Esse outro dia de baixo aqui eu vou tirar só para não atrapalhar a gente e vou também tirar deixar apenas uma meta com incluída aqui salvo ó ficou assim o mais limpo possível né um dia e uma meta aí eu vou fazer o seguinte vou pegar essa div que tá Por volta aqui do dia inteiro e Vou cortar ela e aqui dentro agora a gente vai fazer uma repetição uma estrutura de repetição que que a gente vai fazer aqui ó o meu gos per Day aqui ó tá

vendo que ele é um Objeto e eu não tenho como iterar né fazer uma repetição dentro de objeto fazer um for um for it num não tem porque ele é um objeto ele não é um Array né então primeira coisa que eu tenho que fazer é converter esse objeto para um arrei como é que a gente pode fazer isso várias formas eu posso fazer Object Keys e passar o meu objeto que é o goost per Day que que isso aqui vai me retornar as chaves do objeto ou seja só as datas sem os valores tem

o Object P Vales que eu tenho só os valores e eu não tenho a chave daí que é essa data aqui e tem o entries onde eu tenho acesso aos dois como é que eu posso daí acessar os dois ó Então a gente vai fazer a repetição aqui vou usar um map no react sempre tem que ser o map e não o for it porque o for it eu não consigo retornar nada de dentro dele enquanto o map eu posso fazer um return né então aqui no map ó dentro dele eu vou fazer um return

e que que eu vou Retornar Aquela nossa div lá então eu quero repetir essa div aqui em tela para cada entry né Cada informação que eu tiver no meu objeto E aí esse entries aqui ó como é que eu acesso a chave e o valor aqui no no no no map ó eu vou passar um Array que é uma desestruturação né E aí eu vou ter a chave e o valor a chave é a minha data né então vou até renomear ela para date e o valor é o meu arrei de metas então V botar

aqui ó Ghost tá E aí se eu vi aqui Por exemplo no lugar onde tá domingo e colocar aqui ó date salvar não não se importa com os erros ainda tá olha só tá vendo aqui que ele mostrou as datas exatamente como a gente tem lá legal né só que no react tem uma coisa importante quando a gente faz um map o react pede pra gente que o primeiro elemento que venha dentro de um map tenha uma propriedade chamada Key que é uma propriedade interna do react indicando Qual que é o valor único de cada

item Daquela repetição daquela estrutura né daquela iteração Então nesse caso como a gente sabe que a data ela sempre vai ser única Nesse caso a gente passa o data e e veja que já assumiu já assumiram aqui os erros tá claro que a gente não quer deixar nesse formato aqui né a gente quer eh ah formatar isso aqui né então vamos lá vou criar aqui dentro ó um const weekday onde eu vou fazer um dayjs passando aqui a minha data e vou Pegar a formatação de ã dia da semana aqui ó DD d d d

d d e aí eu vou mostrar o Week Day aqui no lugar do date ó Então vamos lá ó beleza ó terça-feira vamos botar um capitalize aqui também né para ficar mais bonitinho ali ó aí ó Show de bola e agora aqui dentro do parênteses ó que é a data mesmo a gente vai pegar aqui ó ah vou chamar ela de par date ou formed date mesma coisa date Yes date pon Format E aí a gente quer o dia Ah e o mês né então vou pegar aqui o dia eu vou usar o d maiúsculo

que nem a gente já usou lá em cima e o mês é como é o mês pro extenso agora eu posso usar mm m m né então se eu salvar aqui agora ó ele vai Ah eu não usei né em nenhum lugar aqui ó botar aqui embaixo ele vai mostrar ali ó 13 agosto faltou o d ali no meio Se eu tentar escrever D né para botar dia de agosto Olha só ficou um zero nada a ver Por quê Porque lembra que o d ele Significa ele também formata ó se o d aqui ó ele

é o o o dia da semana começando de zero a se né zero para domingo e seis para sábado então quando eu quero colocar uma string aqui dentro e eu não quero que ela seja formatada eu boto um cochet aqui por volta dessa forma aqui ó salvo e aí pronto ó ele já não formatou Ah só que ele ficou capitalizado né eu não queria Então vou pegar esse aqui eu capitalize aqui ó vou botar somente por volta do Week Day aqui Ó criar um spanz inho Class name capitalize e jogar o weekday dentro dele aqui

aí Agora sim detalhes importam né e agora a gente vai pra listagem de metas Então vou aqui nesse li aqui ó vou cortar ele que é ele que eu quero que repita né para cada meta e vou fazer goals pon map Lembrando que goals aqui é o nosso arrei ó de metas que eu tenho aqui ó né goals pmap E aí para cada go eu vou retornar um li e aí Lembrando que como a gente fez o map primeiro elemento Precisa ter uma proi verdade que indicando Qual que é o valor único e aí aqui

na GO eu tenho o ID né o ID eu sei que é único aqui no acordar cedo é o título da meta e aqui eu preciso do horário a gente pegar o horário aqui vou pegar aqui ó const time igual a dayjs pegando go. Create completed at e faço uma formatação aqui e a gente quer hora que é H né pode ser isso 023 que é como a gente usa no Brasil né se eu usar hh minúsculo eu vou pegar no formato Americano que é o que ele mostra amm né então h e minuto é

MM então hh maiúsculo dois pontos MM minúsculo ã e a gente vai mostrar o time aqui ó só deixar o h de Fora ali ó Opa show Olha lá Ahã já temos aqui né ele ficou zero aqui porque esse esse essas duas metas aqui elas foram criadas pelo seed que a gente criou lá a gente não informou o horário aí acabou na verdade informou o horário Zero mesmo né E aí ficou dessa forma cara legal completamos toda a parte de listagem de dados aqui dentro na verdade ainda não completamos a listagem aqui das ah metas

pendentes né Então temos que fazer isso E aí depois para finalizar a gente vai aqui pros formulários né de cadastrar meta e também quando eu clicar aqui numa meta pendente eu marcar essa meta como pendente e atualizar aqui em tela Estamos quase finalizando bora Então agora a gente gente carregar essa lista aqui né de metas que são pendentes né então o que que eu vou fazer vou criar um componente aqui à parte para deixar isso aqui mais separado chamar aqui de pending goals ah é agora que eu vi que eu tava gravando sem Zoom o

tempo todo mas tudo bem ver essa parte aqui dentro aqui e importar aqui o outline Button Importar aqui o Plus ã e aqui eu vou botar o pending go perfeito criar uma requisição aqui htp copiar a outra né então get pending goals Ah aqui é URL é pending goals aqui eu vou trocar para pending goals response e aqui na tipagem a gente vai fazer aquele rzinho de lá no backend passar o mouse aqui no pending gos aqui ó e copiar isso aqui aí volto aqui ó e coloco aqui dentro Então veja que ele Vai retornar

uma arrei de objetos contendo esse formato aqui né salvamos agora eu vou copiar ay aqui que a gente faz aqui em cima e a gente vai botar ela dentro do pending goals né única diferença é que agora eu não vou usar o get Summer vou usar o get pending goals que vem lá http e o ID aqui dela aqui né trocar para pending goals pegar aqui o use query posso deixar o Stale time Ou posso tirar nesse momento né até porque essa query ela não Vai ser reutilizada em outros componentes então meio que opcional aqui

tá Ah e aqui agora eu vou fazer o seguinte enquanto os dados não foram carregados eu não vou retornar nada deixar nulo né Ele não retorna HTML nenhum depois que que eu vou fazer se depois que carregou o data eu vou pegar aqui o meu data fazer um map E aí para cada meta eu vou retornar um outline Button desse aqui primeiro Componente dentro de o map precisa ter o Key e aqui eu vou passar o ID aqui no lugar do me editar passa o título salvo e agora veja não mostrou nada por quê faço

menor ideia vamos aqui dá um send hã dá um console log no data salvo [Música] hã ah olha aqui eu tô deixei esse summary aqui ó e aqui não pode ser summary né tem que ser pending go se eu não me engano né Dea deixa eu ver como é que eu como é que retorna aqui é pending Goals então aqui ó quase que deu ruim né salvar agora tirar Aira volta aqui beleza tá ali ó todas as metas só que tem algumas metas que a gente já completou nas metas que a gente já completou eu

vou desabilitar o botão como é que a gente sabe que a gente já completou quando o compation count é igual ao desired weekly Frequency né ou maior caso tenha dado algum bug né então fazer aqui o seguinte no botão disabled e aqui no disabled vou passar o seguinte Oa pon Ou melhor o compation count é é maior ou igual ao go. desired weekly Frequency se sim então ele tem que est desabilitado né então se isso aqui retornar true ele vai ficar desabilitado salva e olha lá o meditar lá ó já ficou com opacidade baixa se

você tiver mais alguma meta que tiver completa ela também não deve mais mostrar né show de bola agora sim a gente finalizou toda a listagem de dados aqui dentro né da nossa aplicação e Agora sim a gente vai pra parte mais interessante digamos assim né de completar as metas e também de criação de novas metas e a gente vai começar pela de completar metas que é mais simples tá Então olha só o que que a gente vai fazer né aqui dentro do pending goals vou criar uma função aqui vou chamar ela de handle complete go

isso aqui é um padrão meu toda função que eu crio aqui que ela vem através de Um clique do usuário alguma ação do usuário eu gosto iniciar o nome dela com handle mas isso aqui como eu falei é padrão meu tá vou receber aqui o go ID que vai ser uma string E aí agora vou aqui no http criar uma nova requisição chamada Create go completion mais ou menos como as outras né então exportar aqui uma função assíncrona Create GO completion tá ela precisa receber aqui o ID da Go e ela vai executar uma requisição

fat Vamos lá pegar o endereço aqui ó para ess para esse endereço aqui e eu preciso enviar no bar o go ID então vou enviar aqui ó método ã post e dentro do bar eu vou enviar Ah aqui eu tenho que enviar para ele ser um json tenho que enviar Jason string fy E aí passar o go ID tá ã e aqui também como eu tô enviando um Jason é legal eu passar um header informando qual que é o tipo do meu conteúdo então aqui eu passo headers content Type application bar Jason isso aqui é

a forma de eu informar lá pro meu backend que eu estou no corpo enviando um Jason né porque o meu backend ele pode receber e vários formatos digamos assim né então agora ó vou salvar isso aqui a gente volta aqui no nosso componente gos e aqui dentro então que que eu vou fazer eu vou executar essa função Então vou dar aqui transformar numa função assíncrona aqui dentro vou dar await Create go completion passando o meu go Id e agora quando eu clicar em um desses botões aqui ó né que tem que não que não tão

completos né que não tão como disable que o disable não deixa clicar eu vou passar aqui neles um on Click E aí eu quero chamar essa função handle complete GO e aqui cuidado tá ó eu vou escrever o código mas não salva o arquivo eu só vou te mostrar como você não deve fazer porque se tu salvar o arquivo agora com o que que eu vou mostrar ele vai sair completando todas As metas tá então assim ó só escreve cuidado não clica cont control S Olha só por quê que é um erro muito comum de

quem tá começando no react é o seguinte né bom eu preciso quando o usuário clicar nesse botão executar essa função Só que essa função ela recebe um parâmetro aí muita gente faz isso aqui ó cuidado não salva tá ó bota a função e bota o ID aqui dentro ó GO só que isso aqui cara tu não tu não tá passando uma função Pro One click tá executando a Função aqui dentro isso aqui concorda isso aqui seria passar uma função porque tu não tá passando enviando parâmetros tá passando a função como referência só que ela precisa

de um parâmetro por isso não vai funcionar dessa forma então quando a gente tem uma função com parâmetro a gente faz uma Arrow function aqui ó uma função anônima aqui na frente ó e aí pronto salvo agora veja que eu estou passando uma função Não tô passando não tô executando ela né eu tô Executando só se o usuário clicar vem agora vamos abrir um inspecionar elemento aqui como a nossa aplica ela é pequeninha é questão é horizontal vou deixar o inspecionar aqui do ladinho D F5 aqui a gente vem na aba Network veja fez os

dois carregamentos aqui e agora Olha Só quando eu clicar por exemplo aqui em nadar ó eu vou dar um clique olha só ele executou aqui ó completions tá vendo Hum não retornou nada mas o status code deu 200 então Teoricamente deu certo eu acho que deu certo como é que a gente sabe para ver se deu certo olha só vou dar F5 olha ali Você completou I apareceu ih meu Deus tá tudo fora de ordem segunda-feira depois quinta depois terça depois domingo Hum vamos resolver isso aí vamos lá aqui no nosso Get We Summer aqui

dentro do nosso backend né E vamos fazer o seguinte goals completed by Week Day aqui a gente tem um completed at date Ah que eu pego do Goals completed in Week então aqui no goals completed in Week a gente pode vir aqui ó e fazer um Order buy Ah eu quero um Order buy crescente ou decrescente eu quero que os dias deixa eu ver como é que eu fiz lá no layout é então o dia mais recente venha antes então é numa ordem crescente né então aqui Order by gos completions by ponto created at vamos

salvar aqui voltar aqui na F5 funcionou desgraceira nada funcionou nada porque pera aí deixa eu pensar só porque esse Order buy ele tá vindo aqui aqui embaixo eu tô agrupando eu tô Brando aqui será que eu posso fazer o Order buy aqui embaixo e aí eu faço um Order pelo gos completed in Week ponto completed ixi agora já caguei tudo é porque eu não posso usar esse campo se eu usar o complete date dá porque ele não tá sendo Usado no group né Deixa eu pensar aqui a gente ah fazer Switch às vezes do backend

pro fron a minha cabeça dá uma pirada Deixa eu só lembrar onde é que a gente vai botar o Order aqui para ele funcionar certinho show eu joguei o Order by aqui nesse goals completed by Week Day que é quem agrupa né os as metas completas por dia da semana e aí eu botei aqui O Order pelo completed at date que é a data né de da de cada dia da semana só que ele Ficou em em crescente né Então domingo primeiro quinta-feira aqui no final quera ao contrário e aí no drizzle a gente faz

isso jogando o seguinte a gente porta Desk que é decrescente de dentro do drizzle tá olha só então aqui ó ele já tinha eu já tinha feito o Import por isso que ele já tá aqui ó Desk né decrescente e joga aqui dentro o campo salvo volto aqui e pronto agora tá mostrando quinta-feira já aqui no no topo né então Quando a gente clicou agora se eu vier clicar de novo aqui em me exercitar ó clico tem que dar um F5 E aí ele aparece tá tá Diego então toda vez eu vou ter que dar

um F5 Agora não vou te mostrar mais uma das features aí do react query que faz essa ferramenta ser tão fantástica tá lembra que nas queries aqui que a gente fez lá no summary por exemplo aqui ó a gente deu um ID para elas que é esse aqui olha só o que que acontece se eu Venho aqui no get no pending goals aqui ó aí depois de eu fazer né de completar a meta eu venho aqui e executo o seguinte ó eh primeiro eu faço o seguinte const query client é igual a use query client

que vem de dentro do T stack react query E aí dentro desse query client aqui ó a gente tem uma função que se chama invalidate queries E aí eu passo para ele um objeto e passo para ele aqui ó query Key e passo o nosso ID lá ó sumary Que no caso ele sempre vai ser um um arrei né olha só que maravilha salva aqui agora a gente vem quando eu clicar aqui em aguardar cedo ó pum apareceu aqui automaticamente e também já refletiu aqui em cima por quê Toda vez que eu faço uma invalidação

numa query passando o ID dela essa query por baixo dos panos é feita de novo então se eu vi aqui na aba Network ó quando eu clico por exemplo em ã não usar celular de noite ó veja que ele vai fazer uma curry Para marcar ela como completa e ele fez uma outra que é para trazer uma nova versão do já marcando aquela ali como completa né olha que legal isso aqui né e o que acontece também é que tem algumas metas aqui ó por exemplo deixa eu vir aqui dar um get weak pending goals

né olha só ah por exemplo me exercitar né olha só eu esperava realizar ela três vezes e eu fiz duas né O que acontece se eu clicar aqui ó marcou de novo me exercitar só Que tá vendo que agora ela não ficou com opacidade baixa se eu dar F5 ó aí ela tá com opacidade baixa então Além de eu invalidar o resumo eu vou invalidar essa curry paining goals aqui também ó para ela refazer o carregamento desses dados aqui toda vez que eu marcar uma query uma meta como completa Então olha só tem uma outra

aqui embaixo ó vamos dar um C de novo aqui ó ã tem essa outra aqui olha só nadar né que eu fiz uma e no máximo duas Então olha só quando eu Clicar nadar mais uma vez agora ó pum ele já ficou com opacidade baixa então a interface toda tá reagindo digamos assim em tempo real as modificações que eu faço e agora para finalizar com chave de ouro falta a gente cadastrar uma nova meta aqui que não vai ser muito difícil mas se você nunca trabalhou com formulários no react a gente vai aprender como que

a gente trabalha aqui com formulários utilizando validação e tudo mais de uma maneira bem legal bora Começar então com eh o nosso formulário aqui né Tem muitas formas da gente criar um formulário aqui dentro do react Mas se a gente for criar um formulário que tenha funcionalidades letas como validação né que eu queira às vezes adicionar e alguma validação em tempo real né Por exemplo aquelas de senha né senha forte senha fracca o usuário vai digitando ou seja se eu quero criar um formulário mais profissional Geralmente eu vou recorrer a alguma biblioteca tem Várias bibliotecas

que são famosas de formulário mas a mais famosa e que eu uso nos meus projetos hoje em dia é a react Hook form tá então eu vou instalar essa biblioteca porém eu já vou instalar ela com uma biblioteca auxiliar que é essa @form bar resolvers que é a biblioteca de integração do react Hook Farm com as bibliotecas de validação E aí eu já tenho Se não me engano o Zod instalado mas se eu não tiver já vou botar aqui o Zod junto para instalar Essas três bibliotecas react Hook Farm Hook Farm resolvers e Zod E

aí o que que a gente vai fazer para criar o nosso formulário aqui nós vamos importar Ahã vou deixar ele importar sozinho então a gente vai criar aqui o nosso form usando um Hook chamado use form que vende de dentro do react Hook form tá E aí nós vamos também aqui em cima pode ser dentro do componente ou fora nesse caso vou criar fora porque ele não vai depender de nada que tem dentro do Componente nós vamos criar um esquema assim como a gente fez lá no backend um esquema do Zod ele basicamente determina Qual

que é a estrutura de um objeto a estrutura de um dado né então aqui eu vou chamar ela de Create ah go form por exemplo E aí vou falar que quando eu fazer um submit no meu formulário eu quero que lá dentro Vou importar oos od aqui ó dentro do meu formulário eu tenha quais Campos o título esse título ele precisa ser uma string tá E ele precisa Ter no mínimo um caracter se ele não tiver um caracter eu vou botar uma mensagem de erro como por exemplo informe a atividade que deseja realizar tá e

eu vou ter também o desired weekly Frequency né que ele vai ser enviado por esse Radio group aqui ó que logo a gente vai fazer a funcionalidade esse desired weekly Frequency né ele precisa ser um número Só que lembra que eu falei que aqui ó o value ó dos itens Ele tá como string né então ele ele precisa ser um número mas ele vai chegar como string Eu não eu não consigo passar um Vel ah em número né para um checkbox para um Radio não tem como então eu vou fazer o seguinte eu vou usar

aqui o z. coerce p Number que que isso aqui vai fazer não interessa Se ele vier como string ele vai converter para um número então o quer ele faz isso tá E aí eu falo que ele vai ser no mínimo um no máximo sete né porque no mínimo um dia Na semana e no máximo sete dias na semana ã E aí nós vamos fazer o seguinte Ah eu vou criar aqui no useform eu vou passar para ele aqui uma propriedade chamada resolver E aí eu vou importar aqui ó Zod resolver que vem lá de Hook

form resolvers bar Zod tá e eu passo o meu Create go form aqui e aí ele devolve pra gente aqui algumas funções que são importantes primeira delas é o register esse register aqui ele serve Pra gente registrar quais Campos vão fazer parte do nosso formulário e como é que a gente usa ele é uma sintaxe um pouquinho diferente tá mas é basicamente assim a gente vem no input por exemplo e a gente vai escrever o seguinte ó objeto e a gente bota ponto ponto ponto register e o nome do campo por exemplo title tá Diego

vamos fazer isso aqui da mesma forma no radio group não por quê Porque o radio group diferente do input ele não é um elemento HTML ã assim é um Elemento de input do HTML normal né então a gente só pode usar essa sintasse assim ó quando o valor tá vindo de um input nativo do HTML esse Radio group ele é um são vários botões aqui né criado por aquela biblioteca radix u lá que eu tô usando Então até se a gente for inspecionar aqui ó a gente vai ver que eles não são Radio ó são

botões tá vendo eles até TM um input Radio aqui mas ele tá escondido né então quando é esse caso a gente vai ter que fazer uma Estratégia um pouquinho diferente tá Ah e essa estratégia assim Calma se você é iniciante ela é um pouco estranha assim mas no começo você não precisa entender 100% disso tá eu acho que é um pouco talvez ah demais assim né se você é totalmente iniciante mas h não se desmotiva com isso tá Ah então como é que funciona aqui ó do useform eu vou pegar um carinha chamado control que

que é control control é basicamente uma uma eh um objeto né que tem várias dentro do Control eu tenho várias funções que eu posso acessar tudo do meu formulário eu posso mudar o valor de um campo específico eu posso buscar quais Campos estão com erro então control é uma forma de eu controlar o formulário como um todo então tem todas as funções do formulário estão dentro desse control aqui tá E aí por que que eu vou precisar dele por volta do meu Radio group aqui ó eu vou jogar ó vou copiar vou pegar o meu

Radio group vou apagar os itens aqui Tá vendo ó não vou deixar os itens aqui né mas ó vou copiar o radio group aqui e por volta dele eu vou jogar um componente que vem dentro do react Hook Farm que se chama Controller ó ele vai dar a opção de importar aí para esse Controller eu preciso começar passando o control Então veja ó passo aqui o Control passo para ele o nome do campo então é o desired weekly Frequency e passo uma propriedade chamada render essa propriedade render aqui eu vou passar para ela uma função

e essa função vai retornar o meu componente E aí eu vou dar um CTR V naquele GR que eu tinha passado dentro dessa função que eu passo pro render aqui se eu e desestruturar aqui os parâmetros que ela recebe ó passando um objeto eu tenho acesso a algumas coisas ó Field tenho acesso a Field state e form state form state é para eu buscar dados do meu formulário por exemplo eu quero buscar o valor de um outro Campo vou ter acesso aqui dentro Field state é para eu buscar informações deste Campo específico do desired weekly

Frequency por exemplo o valor atual dele se ele tá com erro se ele não tá e o Field me dá acesso a eu modificar o valor deste Campo manualmente que é o que eu quero e aí aqui no radio group eu tenho uma função Chamada on value Change essa função ela é chamada toda vez que o usuário clicar aqui e trocar o valor de quantas vezes na semana ele quer e aí que que eu vou fazer quando o usuário clicar neste e quando o usuário trocar o valor deste Radio group eu vou passar a função

on Change que eu tenho aqui no meu field E aí também vou passar para ele o value para ele buscar de dentro de Field pon value né que é o valor atual Então olha só salvar aqui Agora [Música] ah se eu vier en cadastrar meta né ó eu posso clicar perfeito tá funcionando normal só que agora eu eh Quando eu fizer o submit aqui do formulário né Eu quero pegar esses dados para ver se tá funcionando tá então que que eu vou fazer ã eu vou aqui Não se preocupa muito tem uns errinhos que vão

dar aqui tudo bem não se preocupa tá não é o mais importante a gente entender tudo isso Agora tá Não se preocupa com os errinhos que nada vai fazer a nossa aplicação não estar funcionando Ah E aí agora que que eu vou fazer eu vou criar aqui uma função chamada handle Ahã Create go né E ela vai receber alguns dados aqui em cima que eu vou tipar eles como n Por enquanto só pra gente dar um console log Tá e agora aqui no meu formulário eu vou passar aqui on submit E aí quando eu tô

usando react Hook form ele me devolve aqui além do Register e do control ele me devolve aqui o handle submit E aí como é que eu vou fazer ó eu vou pegar esse handle submit que ele devolve Vou botar aqui dentro e passo como parâmetro na função o meu handle Create go veja ó ele ele já não tá mais dando erro Ok e agora tô dando console log data aqui dentro né então vamos lá Vou preencher aqui ó test Vamos abrir o conso aqui vou clicar aqui uma vez na semana como eu falei vai est

dando alguns errinhos Não se preocupa Com isso agora tá e vou clicar em salvar olha só que que ele apareceu aqui embaixo title Test e desired weekly Frequency 1 que foi o que eu selecionei se eu trocar aqui para três é um salvar já veio três então a gente já tá tendo acesso aos dados mas tá vendo aqui que tá como n então que que eu posso fazer aqui posso criar aqui em cima um Type Create go form e aqui eu tenho duas alternativas posso fazer na mão então aqui Ó dessa forma aqui ou se

tu e concordar comigo aqui em cima eu já tô falando né que o título é uma string e que o desired weekly Frequency é um número né então o Zod ele tem um helper Zinho que eu posso usar aqui ó que é o infer que ele consegue determinar o tipo de um esquema autom então eu passo para ele z. infer e aí passo Type off e passo o esima agora veja eu passo Mouse aqui em cima ó já tem certinho então não precisaria fazer isso do zero né Então Veja que agora salvo e continua funcionando

normalmente mas e se tiver dando um erro né então por exemplo deixa eu limpar o log aqui ó se eu não preencher aqui a atividade e dar um salvar Olha só não mostra nada no log né porque ele só vai chamar essa função se passar nos erros Tá mas então preciso mostrar os erros na tela sim como é que a gente faz isso Pego aqui form state desculpa e aí lá onde pode dar erro aqui ó ah aqui embaixo ele tá dando Erro na tipagem tá Por quê Porque agora como eu falei que o data

ele tem que seguir esse formato aqui no useform eu tenho que passar esse formato aqui também ó então passo aqui ó e passo Create go form a gente vai ver que já vai parar de dar erro tá Ah E aí lá embaixo tá dando erro aqui no vue Field P value ã Ah porque ele acha que ele pode acabar sendo número aqui né ah deixa eu pensar Então vou converter aqui ó porque ele tá Como número eu vou converter ele com uma string aqui tá show aqui tá tranquilo tá aqui no input né que é

o único que pode dar erro aqui no título eu vou fazer o seguinte eu vou fazer um if aqui dentro então se dentro de formstate errors eu tiver título eu vou mostrar isso aqui então no react quando eu quero fazer um if que ele não vai ter o else vai ter somente o then né Eu uso dois ex comerciais então ele só vai executar o que tem aqui nesse parênteses caso isso aqui Seja verdadeiro né seja um valor ah truthy né que a gente chama no no no JavaScript E aí aqui dentro eu vou botar

um parágrafo botar umas classes nele aqui por exemplo text Red 400 e text small e aqui dentro eu jogo o meu Farm state P errors pon title ah message que é a mensagem de erro né salvo e olha só não vou preencher agora Vou clicar em salvar e olha lá informe a atividade que deseja realizar por exemplo ah botar teste Por enquanto né que eu não tô fazendo nada aqui embaixo que que eu vou fazer para eu não ter que botar mensagem de erro eu vou botar um valor vir selecionado como padrão então aqui no

Controller eu posso passar para ele um default value e e passo aqui um número por exemplo três Então por padrão ele vai vir o três selecionado ó quando Eu clicar em cadastrar meta ó já vem selecionado tá como eu falei não se preocupa com Esses errinhos aqui agora Ahã E aí Eh agora falta eu adicionar os outros dias aqui né Então bora adicionar os outros dias aqui 4 5 6 e 7 Tá então vamos lá aqui ó 1 2 e TR aqui eu vou botar quatro 4 5 5 6 6 7 7 por que que

eu não fiz um for aqui Porque além de mudar o número muda os emojis né então a gente vem aqui ó a gente tinha feito até o três vou pegar aqui o do quatro aqui eu vou botar aqui no quatro aqui o do cinco do seis e do sete no sete aqui a gente vai trocar para todosos dias da semana salvo aqui agora olha lá já tá tudo lá e o três vai vir selecionado por padrão certo e agora falta a gente realmente Cadastrar né então lá no http vou criar aqui o Create go vai

ser semelhante aqui é o Create goal completion Tá única aqui é goals né E para criar a meta eu vou precisar receber o título dela e o desired weekly Frequency que é um número vou pegar esses dados aqui posso desestruturar eles aqui mesmo pegar aqui é o título e o desired weekly Frequency e vou enviar aqui no meu bar salvo agora a gente Volta aqui vou usar uma função assíncrona botar aqui um await Create ah opa não mudei o nome aqui então Create go ã então Create go importa de http e passa o título que

vem de data p title e o desired weekly Frequency que vem de data desired weekly Frequency da mesma forma que eu fiz lá no pending goals quando o usuário fizer isso aí eu vou fazer a invalidação aqui das duas queries E aí Eu vou pegar aqui o meu query client usando o use query Client beleza Olha só agora fechar aqui vamos lá cadastrar uma nova meta ã vou pensar aqui então a gente já tem nadar já tem muitas metas boas Vou botar aqui passear com meu cachorro ele vai ficar feliz cinco vezes na semana Olha

só momento que eu clicar em salvar apareceu lá atrás ó não resetou nada aqui a gente tem que ainda resolver isso aqui mas olha só lá atrás já Apareceu passear com o meu cachorro aqui legal né Ah e agora eu preciso resetar meu formulário então aqui ó eu posso pegar além do Farm state posso pegar o reset e aqui eu vou fazer um reset do formulário simplesmente chamando reset tá agora ele vai resetar o formulário Ah quando a gente salvar e é isso ó vamos lá cadastrar meta já não tenho mais ideia de meta então

por exemplo não tomar café sei lá queria um zero na semana botar Uma vez na semana Olha só quando eu clicar em salvar pum ele já resetou aqui o título ó e resetou também aqui pro valor que era três se eu fecho se eu saio do modal tá lá não tomar café clico aqui não tomar café como era uma vez só por semana ó pum já ficou cinza né porque ele já fez E já apareceu aqui o não tomar café aqui dentro né aqui ó a gente ainda tem as metas elas não estão ordenadas né

então aqui no goals completed in Week eu acho que eu tenho Que fazer um Order buy aqui dentro também goals completions bar created at deixa eu ver [Música] ah essa aqui pera aí não deixa eu pensar eh goost completed by Week Day ele pega de goost completed ah goost created ah já tô ficando confuso depois de tantos dias codando Hum completed at Hum bom deveria deveria ser aqui né Será que se eu botar aqui o desk deu certo né apareceu Ó não tomar café no começo e aí as demais deu certo é isso show de

bola finalizamos aí a nossa aplicação utilizando o react query utilizando aí o react Hook form usando Zod usando invalidação de curry e eu vou Te dizer que isso aqui é uma aplicação assim se você chegou aqui até o final cara é uma aplicação assim muito próxima das aplicações que eu tô desenvolvendo Ah eu digo em questão de funci de ferramentas que eu uso né Muito próxima das Ferramentas Ah e das aplicações que eu desenvolvo no meu dia a dia tá E é claro que é muita informação principalmente se são teus primeiros contatos aí com react

go node Mas calma você ainda tem muita coisa pela frente Para aprender aí essas ferramentas e eu vou est aqui para te ajudar né que bom te ver aqui no final da nossa missão parabéns por ter completado as três aulas mas o nlw Pocket não termina por aqui afinal Esse é apenas o começo da sua jornada agora é hora de se preparar para garantir o seu certificado e para ir pro próximo nível porque não existem limites onde você pode chegar e porque em programação o aprendizado é sempre contínuo O que você viu aqui nessa Trilha

foi uma amostra a pontinha do iceberg de tudo que você pode desenvolver e aprender com node e react quer saber os próximos passos a partir daqui então não perde o encontro de encerramento ao vivo do nlw Pocket lá você vai receber uma palavra chave para garantir o seu certificado e ter acesso uma oportunidade imperdível para continuar acelerando em programação então é muito importante que você participe com a gente fica de olho no Teu e-mail no grupo do WhatsApp a gente vai enviar todo o link de acesso por lá todas as informações tudos Certinho obrigado por

ter me acompanhado até aqui foi um prazer te acompanhar nessa missão abração e até a próxima