Aula 3: Gestão de Transações | Full Stack Week

Fala Turma sejam muito bem-vindos à aula três da F que a gente tá começando o terceiro dia e eu quero saber se você tá curtindo até agora o que que você tá achando agora do evento e do projeto tá você vai comentar agora no chat no chat não nos comentários aqui embaixo se você tá achando o projeto tranquilo você vai comentar aí um número um tá se você tá com um pouco de dificuldade mas tá conseguindo fazer comenta o n número Dois e comenta o número três se você tá achando difícil e se você não

conseguiu fazer nada pra gente ter uma noção de como que vocês estão aí na F quick se você tá com dificuldade ou não tá conseguindo fazer nada Calma que a gente vai ter encontros ao vivo onde eu e a minha equipe vai ajudar vocês Nós também temos a nossa comunidade No discord que você pode entrar o link vai estar aqui na descrição para você entrar e tirar suas dúvidas lá também fechou vai ter Também o link do notion link do figma tudo que você precisa aí tá e turma na aula de ontem a gente fez

setup do projeto tudo mais a gente fez muita coisa massa mas hoje a gente vai fazer a gestão de transações vai ser uma aula muito massa eu tô muito feliz porque a gente vai avançar muito no nosso projeto hoje mas antes turma da gente ir pro conteúdo eu vi muita gente ontem reclamando muita gente ontem reclamando que o mercado tá ruim que não tem vaga Que tá muito difícil principalmente para iniciante que não tem vaga mais que programação acabou que o mercado de programação acabou turma deixa eu falar uma coisa para vocês isso tudo não

é verdade o mercado de programação ele sim tem muitas oportunidades compara por exemplo com outros mercados o mercado da programação é um dos melhores mercados que tem para você trabalhar não só para você que é iniciante mas especialmente Para você que tá ganhando uma experiência porque você consegue por exemplo trabalhar pro exterior empreender tem muitas possibilidades e hoje tem muitas pessoas que só reclamam muitas pessoas vitimistas muitas pessoas que só reclamam não fazem nada culpam outros a culpa é do mercado a culpa é do presidente a culpa é do dos políticos a culpa é de

todo mundo menos a dele e eu sei que se você tá vindo essa aula aqui é provável que você não pense assim Porque esse tipo de pessoa nem continua ele já desiste na primeira aula ele já desiste mas eu quero que você entenda o seguinte na F weck eu tô comprometido a fazer você evoluir como deve e se você eventualmente quiser fazer parte do F Club eu vou estar ainda mais comprometido porque eu não teri apenas uma semana para ser o seu professor seu mentor teri muito mais tempo mas eu quero que você entenda que

você tem que fazer acontecer Não vai ser fácil você Vai ter que estudar sentar na cadeira fazer o que precisa ser feito mas se você finalizar F quick fazer esse projeto aprender tudo que eu passar para você aqui colocar esse projeto no seu LinkedIn eu tenho certeza que você vai evoluir E muito como deve tem pessoas que postaram projetos de fch quick anteriores no Linkedin e os posts viralizar que geraram empregos para essas pessoas Então eu quero que você comente Agora aqui no chat pra gente criar esse movimento comenta aí # eu faço acontecer você

não vai ficar reclamando de mercado você não vai ficar reclamando de político você não vai ficar reclamando de fulano de cicano você faz acontecer você faz acontecer você não arruma desculpa mais uma vez você faz acontecer e você vai ficar até o final da F quick comigo fechou então dito isso Bora lá pro conteúdo que tem muita coisa lembrando todas as informações links tá Tudo aqui na descrição não deixa de conferir e bora lá pra aula de hoje vamos lá então turma continuar a criação aqui do nosso projeto na última aula a gente fez todo

o fluxo de autenticação então agora o usuário consegue fazer login ele consegue criar conta também fazer login tanto com o Google quanto com a conta criada com e-mail e senha também ele consegue fazer isso Beleza a gente fez também a tela de login como a gente acabou de ver fizemos o setup do Projeto então a gente configurou aqui o prisma configuramos aqui o nosso banco de dados configuramos também o prer e link vimos aqui conceitos básicos do Next então a gente tá galera avançando bem no projeto tô muito feliz muito orgulhoso de você por você

estar participando da F quick vamos para cima não desiste porque é só o começo e este projeto vai ficar S sacional beleza turma eu quero começar essa aula aqui fazendo alguns ajustes no projeto tá e Você vai ver que é muito comum também a gente ir refatorando o nosso projeto conforme a gente faz ele Isso é uma prática que eu quero passar para você também essa visão de ver o seu código como uma obra de arte mesmo que você escreve uma vez Mas você volta depois você refaz uma coisa melhor e assim por diante você

vai tratando ele como se fosse de fato ali uma coisa que vai evoluindo ao longo do tempo beleza e a primeira coisa que eu quero fazer com Vocês é o seguinte a gente tá usando aqui se eu vier aqui no app layout a gente tá usando essas Fontes aqui certo mas a nossa aplicação ela tem que usar outra fonte que é essa mish aqui beleza e essa mulish ela é uma fonte que ela existe aqui no Google fonts e o nextjs ele tem uma integração bem massa com o Google Fontes a gente consegue usar fontes

do Google na nossa aplicação next de uma forma muito fácil então a gente importa ela aqui dessa biblioteca E usa ela aqui embaixo é bem tranquilo então vou fazer isso aqui ó eu vou deletar isso aqui eu vou importar aqui ó next bar Font Google eu vou importar aqui a fonte mish beleza show de bola e aí eu vou criar uma variável mish vai ser mish dessa forma o subsets vai ser uma lista vou passar aqui latim estendido OK aí eu vou pegar essa mish e eu vou passar aqui na Class ó do meu Body

Então vai ser mishn Fechou então agora eu já tenho a Minha nova fonte aqui na minha aplicação se eu vir aqui na minha tela de login que tem mais texto eu consigo ver que a fonte Ela já mudou se eu inspecionar eu vou ter aqui a fonte mish perfeito então fizemos aqui o primeiro ajuste Vamos então fazer o nosso commit eu posso inclusive deletar essa pasta Fontes aqui que eu não tô mais usando esses arquivos Então vou deletar perfeito vou fazer o commit Então vou colocar tudo aqui em Stage isso aqui galera foi foi uma

Feature né a gente adicionou algo novo então vou colocar feits updates Font to mish perfeito Beleza agora turma outra coisa que é mais um adendo uma observação a gente usou o neon zbi para configurar o nosso banco certo mas se você quiser você pode usar outros serviços Como Eu mencionei na última aula ou até mesmo o docker Então eu vou deixar anexado no repositório do projeto um arquivo docker compose para você usar se você quiser rodar esse banco de dados Local para você ter uma velocidade maior Beleza então eu vou usar esse banco aqui por

exemplo só mudar um nome aqui que eu já usei esse nome em outro contêiner e eu também tenho aqui os volumes tá você não precisa saber o que é isso se você não quer usar docker tudo bem você pode seguir tranquilamente Mas você for usar e coloque Essa passa aqui ó ponto post qu isira no seu Git ignor Ok porque isso aqui é o volume do docker e você não quer que isso aqui suba para o seu Repositório Isso aqui vai permitir que os dados persistam do banco mesmo que você reinicie a sua máquina por

exemplo exemplo E aí você pode jodar um docker compose up para você rodar esse esse container E aí você atualiza o seu ponto Envy para você se conectar com esse banco então aqui vai ser usuário postgis aqui vai ser password e aqui eu vou colocar local host aqui na URL ó local host 54 3 2 beleza e aí eu posso colocar Isso aqui o nome do banco fechou E agora Como que eu f isso aqui é um ponto que eu queria mostrar para vocês também tá por isso que a gente aplicou uma migration do banco

do e agora eu quero mudar de banco para mostrar para vocês como que a gente faz para aplicar essas migrations ou seja essa aqui Resumindo como que a gente faz para criar as tabelas que a gente já criou em outro banco neste banco atual em um banco novo eu V rodar um npx prisma Migrates e eu vou rodar aqui ó um Dev e esse cara ele vai pegar as minhas migrations e vai aplicar nesse meu banco de dados Beleza se você quer aplicar as suas migrations em um banco de produção você roda um prisma migrates

Deploy Ok tem algumas diferenças eu não vou muito a fundo nisso aqui agora beleza mas só para você saber perfeito então agora a gente tá quase pronto para seguir aqui a criação da nossa aplicação eu vou fazer um commit também vou criar aqui um Commit com Core ads docker compose file foi mais um Core não foi uma feature nem nada mais um arquivo de configuração perfeito agora turma faltou também aqui no nosso esquema P Prisma então vamos aqui em Prisma esema P Prisma aqui no transaction eu preciso colocar o user ID também que é o

ID do usuário ao qual essa transação pertence e eu não vou ter uma tabela de usuário porque como a gente viu na última aula o usuário ele é armazenado dentro do clerk ok então a Gente não armazena os dados do usuário na nossa infraestrutura no nosso banco é o clerk que armazena isso aqui a gente só vai armazenar o ID do usuário Beleza então eu vou como eu alterei o meu skima eu quero aplicar essa mudança no meu banco eu vou ter que fazer uma migration tá então quando você muda o seu esquema do Prisma

e você quer aplicar essa mudança ao seu banco você faz uma migration então aqui eu vou rodar um npx prisma e eu vou dar um Format para ele Formatar esse arquivo formatou e agora vou rodar um Prism migrat Dev e o nome vai ser ads user ID to transaction então a gente adicionou o user ID para a tabela de transaction perfeito turma fizemos aqui o que a gente precisava fazer agora eu vou fazer o commit a mensagem vai ser Core add user ID property to transaction table então a gente adicionou essa propriedade à nossa tabela

de transação perfeito galera agora turma vamos começar a idealizar o Que a gente vai fazer nessa aula aqui como você viu no título a gente vai fazer essa tela de gestão das transações então primeiro eu preciso de alguma forma pegar as transações que estão no meu banco de dados e exibi-las aqui em tela certo e aí eu vou exibir nessa tabela aqui eu vou ter as colunas aqui e tudo mais vou ter também esse botão de adicionar transação que vai abrir esse menuzinho na verdade vai abrir esse aqui esse menuzinho E aí eu vou conseguir

Adicionar minha transação perfeito vou conseguir também editar uma transação e deletar uma transação mas a visão geral é essa vamos agora focar em pegar essas transações do meu banco de dados perfeito e turma agora a gente vai ver o poder de uma coisa que a gente já viu um pouco na última aula que são os server components os server components são componentes que são renderizados no lado do servidor Ok então o código que você escreve dentro de um server component é Executado no servidor exemplo essa página aqui essa homepage é ela é um server component

grava isso tá todo componente que você cria dentro de uma aplicação next é um server componente por padrão Ok lembra que quando a gente estava criando a aplicação tinha uma pergunta se a gente queria usar o App router do Next quando você usa o app router você tem esse comportamento que é a forma mais moderna de você criar aplicações do Next quando você tá no app Router todos os componentes são server components Então essa home é um server component esse layout é um server component aqui a minha login page é um server component por isso

que a gente pode criar ele como assn como uma função assíncrona porque um server component pode ser assíncrono E como eu falei um server component tem o seu código executado no lado do servidor e ele manda o HTML pronto ali para o cliente na verdade eu tô simplificando muito o Processo mas é essencialmente isso no fch Club a gente tem uma aula inclusive várias aulas que a gente fala mais a fundo sobre server Mas o que você precisa saber por enquanto é isso aqui para você seguir comigo então turma nesse componente eu consigo chamar o

meu banco de dados dele porque ele é executado no servidor se eu quiser por exemplo acessar uma variável de ambiente sensível eu posso também porque isso aqui roda no servidor Ok então que que Eu vou fazer turma aqui na minha página de transações Eu vou acessar as transações do meu banco de dados é isso que vou fazer perfeito eu vou galera aumentar um pouquinho a o tamanho da fonte Acho que fica melhor para vocês né Beleza então eu preciso acessar as transações E para isso eu vou usar o quê o prisma também beleza mas turma

eu preciso Antes aqui de acessar efetivamente as minhas transações eu preciso aqui dentro de app pasta Lib Criar um arquivo chamado Prisma PTS e esse arquivo ele vai ajudar a gente a falar com o nosso banco de dados dentro dos nossos server components Ok e turma eu vou copiar e colar um código aqui um pouco feio nesse nesse arquivo Mas você não precisa entendê-lo 100% agora tá bom primeiro tá dando um erro de S link eu vou desativar esse essa regra para ele parar de dar esse erro então vou apertar control ponto disabled novar para

essa linha aqui então eu desabilitei essa Regra perfeito e eu preciso instalar essa biblioteca aqui ó Prisma client então vamos lá vou rodar o npm install Prisma client na versão 5.21.1 importante você instalar a mesma versão que eu Ok fechou turma então agora estamos prontos o que que esse arquivo faz essencialmente quando a gente chama esse New Prisma client a gente tá abrindo uma conexão com o nosso banco então a gente não pode ficar abrindo várias conexões Por exemplo quando a gente tá em modo de desenvolvimento porque a gente viu que quando a gente salva

a página quando a gente salva o arquivo na verdade a nossa aplicação é recarregada Então esse código garante que se eu não estiver em produção eu vou fazer uma lógica aqui para nunca instanciar mais de um prisma client ao mesmo tempo então eu vou conseguir trabalhar com Prisma em desenvolvimento corretamente tá esse Prisma client é o que a gente vai usar Para falar com o nosso banco perfeito Então vamos fechar isso aqui e agora aqui na minha transactions page que que eu vou fazer turma eu vou simplesmente criar uma constante transactions que vai ser await

DB e eu vou importar desse arquivo que eu acabei de criar ponto e agora eu vou digitar o nome da tabela que eu quero pegar os dados então eu vou digitar transaction PF Many e eu vou passar um objeto vazio Isso aqui vai fazer com que eu pegue todas as Transações que estão nessa tabela beleza todos os registros que estão na tabela transaction e agora eu vou marcar isso aqui Como assim Lembrando que eu posso fazer isso porque isso é um server component agora que que eu vou fazer turma eu vou criar uma div aqui

só pra gente ter uma visualização e eu vou fazer um map aqui em cada transaction e eu vou renderizar aqui isso aqui deixar o CoPilot completar para mim ah Transaction pname por exemplo aqui vai dar um errinho porque eu tenho que eu só vou renderizar o nome por enquanto tá galera depois a gente renderiza o resto só pra gente ver que vai funcionar então se eu salvar minha aplicação e vier aqui em Barra transactions eu tenho que barra transactions vamos lá eu não vou ter nada por porque eu não tenho nada no meu banco não

criei nada lá dentro então galera eu aqui no meu terminal rodar um comando chamado npx Prisma Studio Isso aqui vai abrir esse estúdio do Prisma pra gente e aqui a gente consegue ver asab do noss banco eu consigo acessar essa tabela e criar um registro aqui então vou criar uma transação teste aqui só pra gente ver na tela beleza Vou salvar perfeito e agora se eu recarregar minha página olha aqui recarreguei olha aqui isso aqui é a nossa transação que eu Acabei de criar então posso até criar outra aqui ó Então vamos lá teste do

salvei voltei para cá recarreguei tá aqui então olha como é fácil turma a gente recuperar dados do nosso banco aqui no nosso componente isso aqui é é sensacional mas galera tem um ponto Qual que é o ponto um server component ele não pode ter interatividade Como assim eu não posso galera por exemplo usar um estado aqui dentro eu não posso criar por exemplo um name set name use States não posso porque lembra que isso aqui é renderizado no servidor e o servidor não tem acesso ao JavaScript do cliente do usu eu não consigo adicionar por

exemplo cck não consigo colocar event handlers então se eu salvar isso aqui até D um erro aqui ó eu não posso usar oates em um server component e aqui até diz pra gente que isso só funciona em client components Ou seja eu preciso marcar Esse componente como client component E como que eu faço isso eu coloco um use Cent aqui em cima mas quando euco esse componente com c ele não po mais ser a consequentemente ele não pode mais chamar o meu banco Beleza então quando o seu componente exigir interatividade como US States qualquer Hook

do react use effect por exemplo use memo qualquer Hook do react se você quer por exemplo criar um buron aqui embaixo e você quer colocar um click por exemplo você Precisa marcar esse componente como client component Beleza a gente vai ver mais sobre isso no decorrer aí das aulas Ok mas eu quero que você entenda isso por enquanto beleza fechou turma então nós temos aqui as nossas transações Então já andamos meio caminho aqui tá Agora vamos lá eu vou galera criar essa tabela E essa tela também Ok vamos deixar galera para criar essa essa barra

de navegação mais pro final da aula Ok essa barra aqui de cima tá vamos criar Primeiro essa tela de transações belezinha vamos lá então turma para fazer isso que que eu vou fazer eu vou primeiro aqui em transactions eu vou deixar isso essa quer aqui que eu vou usar E lembrando que a gente obviamente vai pegar as transações do usuário logado a gente já vai fazer isso fica tranquilo tá não vamos pegar todas mas sim do usuário que tá alugado na aplicação mas por enquanto eu vou fazer o Seguinte eu preciso criar uma div que

vai ficar em volta disso tudo aqui vamos desconsiderar a barra de cima por enquanto essa div vai ter essa esse texto só que aqui galera eu vou ter também ó esse botão lá no final então eu vou ter que ter uma div aqui ó que cubra aqui que tem um just F between por exemplo just F contents Space between né embaixo a nossa tabela Ok então vamos lá eu vou fazer isso galera vou criar uma div que vai ficar em volta de tudo que é Essa aqui perfeito e aqui eu vou criar div que vai

ter Ah o título e botão perfeito e ela vai ser um name Flex with full largura 100% just F between vou colocar um item Center também beleza agora galera eu vou colocar um H2 aqui transações posso até colocar um H1 né é o título da página mesmo com mais destaque perfeito e lá no final vou colocar um buron que eu vou importar da minha pasta de componentes Olha como a gente já vai reutilizando Esses componentes e aqui eu vou colocar adicionar transação que é esse botão aqui aqui perfeito e se eu salvar voltar para cá

já tem mais ou menos ali o que a gente quer Beleza esse H1 ele vai ter um Font bold text 2xl eu vou ter também um pading aqui um pading de 24 Então essa div aqui ó vai ter um p6 que é um pading de 24 pixels legal e esse buron ele vai ter esse ícone aqui ó certo esse ícone Aqui que é um Arrow Down up então eu posso usar o lucid react para isso Ó vou importar Arrow Down up eu vou importar da up icon belezinha ele vai ter um classname de MR2 Na

verdade ele vai ficar lá no final né ele vai ficar no final aqui vou colocar um ml do beleza ficou muito longe Vou colocar ml1 aqui muito longe ainda vou tirar aqui beleza fechou e esse botão ele vai ser bem Redondo Também né então esse B ele também pode receber um CL tá galera vou passar um CL rounded full rounded Isso aqui vai colocar um border radius infinito aqui beleza E como eu falei você vai pegando essas classes do T com tempo OK fechou turma agora tomar uma aguinha aqui ho tô gravando aula para caramba

galera vamos para cima vamos para cima eu vou fazer a tabela e a gente vai usar o shn para isso também o SH tem esse Componente aqui ó chamado data table esse aqui beleza e a gente vai usar esse componente então para isso eu preciso adicionar o table eu preciso seguir um pequeno tutorial aqui então vamos comigo não desiste vamos lá eu vou adicionar isso aqui vou abrir outro terminal aqui ó vou adicionar isso aqui e o CN vai ser na versão 2.1.3 certo então add stable e depois eu vou instalar o react Stable também

vamos lá turma Beleza depois table galera instalem na versão vamos ver a versão que tá aqui ó 8.20.6 então npm install tack reactable 8.20.6 Ok quando vocês for instalar aí no projeto de vocês agora turma vamos lá eu preciso criar algumas coisinhas aqui ó percebe que ele vai colocando aqui para mim os arquivos que eu tenho que criar vamos comigo não desiste Ok vamos Comigo vamos lá primeiro eu preciso criar esse componente data table Ok então vamos lá eu vou criar aqui app components ui dat table tsx vou colar aqui Fechou eu vou arrumar esse

Import aqui eu vou importar de ponto barra table legal e feito fizemos a primeira parte agora eu preciso criar esse arquivo aqui ó com as colunas tá que que eu vou fazer galera aqui em app em transactions eu vou criar uma pasta dentro de Transactions chamada colums bar index.tsx TS na verdade e aqui galera o que que eu estou fazendo eu estou criando uma uma pasta privada dentro da pasta transactions por quê Porque essa pasta privada não vai ser uma página então eu gosto de seguir esse padrão toda pasta que não é uma página eu

crio como uma pasta privada pra gente ter essa visualização rápida Falei sobre isso na última aula tá E aqui eu vou colar o código do shad CN agora galera o que eu farei aqui eu definirei as colunas Tá então vamos primeiro definir aqui ó nesse Type então aqui com esse Type eu consigo definir o tipo aí das minhas colunas tá certo ah então a gente tem um curso de typescript também disponível para você na nossa plataforma de aquecimento se você não sabe typescript eu recomendo que você assista aquele curso Ok beleza turma eu Vou exportar

isso aqui na verdade galera que que eu posso fazer eu posso remover esse Type e aqui eu posso importar transaction do Prisma Client Então eu estou falando que a minha coluna vai ser de uma transação e essa interface aqui transaction esse tipo transaction já tem todos os campos cara da minha tabela olha que massa e agora vamos lá turma aqui no accessor Key eu vou apagar isso aqui aqui no Accessor Ke Tem que ser uma chave única tá e se eu apertar control espaço eu tenho as opções aqui então a primeira coisa vai ser o

name e o header vai ser o qu galera nome vai ser o que vai aparecer aqui no header aqui na coluna em destaque na primeira aqui certo depois eu vou ter o Type Então vamos lá accessor aqui vai ser Type header vai ser tipo depois eu vou ter categoria método data Então vamos lá aqui vai ser accessor Key categoria category na verdade header vai ser categoria depois eu vou ter o método de pagamento então aqui vai ser payment method método de pagamento legal beleza depois eu vou ter a data então header data fechou depois eu

vou ter o valor então access Key Amount header valor perfeito e lá no último eu vou ter aqui uma uma coluna só para esses botões de ação né para eu ver os detalhes para eu editar e para eu deletar então aqui eu vou criar outra outro objeto accessory Key vai ser Actions por exemplo eu posso colocar um que não esteja aqui nessas opções Ok e o header eu vou deixar como vazio perfeito agora eu vou exportar essa variável como transaction colums belezinha então criamos aqui o arquivo que define as Colunas da minha tabela agora aqui

na minha página de de transações de transactions eu vou abaixo dessa div aqui do título e do botão renderizar o meu data table perfeito e colums aqui vai ser o que galera transaction columns que eu acabei de criar e o data vai ser as minhas transactions fechou salvei vamos ver se deu ruim se deu bom olha que interessante turma já temos aqui né a nossa tabela Certo temos um erro aqui mas daqui a pouco a gente vê isso aqui beleza perfeito temos algumas coisinhas aqui ó essas Actions não deviam aparecer então vamos aqui em colums

esse header tem que ser vazio assim aí acho que para de aparecer Ok Ah então nome tipo categoria método de pagamento data e valor vamos também colocar um pading aqui então esse pading de seis eu vou colocar na essa div aqui De cima que toda a minha página vai ter esse P de seis Fechou eu vou ter um espaçamento também entre a tabela e entre o texto de 24 Então vamos lá vou falar que essa div aqui ó vai ter um Space I de 6 que é 24 Então esse Space vai colocar um espaçamento vertical

entre essa div entre esse elemento filho e entre esse aqui fechou beleza vamos colocar também é tá certo é isso mesmo e galera antes da gente seguir deixa eu Mostrar uma coisinha para vocês esse data table ele é um client component mas percebe que Mesmo ele sendo um client component ou seja um componente que tem interatividade um componente que não pode por exemplo chamar o nosso banco de dados ele é renderizado por um server component lembra que essa transactions page é um server component porque ela é a e porque eu chamo o meu banco aqui

então eu só consigo fazer esse tipo de coisa dentro De um server component Mas guarda isso tá você pode importar um client component dentro de um server component então o server component importa um client component isso pode acontecer tranquilo o que não pode é um client component importar um server component Então esse data table como ele é um client component ele não pode importar um server comp a gente vai ver isso com mais detalhes nas próximas aulas também mas é uma regra muito Do Next Ok então turma vamos seguir aqui vamos arrumar cara a gente

já resolve esse erro aqui daqui a pouquinho vamos arrumar essa tabela né primeiro eu preciso que esse tipo ele tenha essa badinha aqui né de ganho de gasto ou de investimento para isso eu vou usar um componente do shad também chamado Bad que é esse componente Zinho aqui bem bacana Tá então vamos lá eu vou rodar aqui um npx prisma na verdade shaden ads Bad sempre passando a versão Correta Ok beleza agora o que que eu vou fazer galera nesse transaction columns eu preciso dentro aqui do meu tipo renderizar esse Cell Ok esse Cell vai

receber a row e o que eu retornar aqui será exibido na minha célula então será exibido aqui por exemplo Ok então se eu retornar aqui por exemplo Ah e eu preciso retornar jsx aqui então eu vou mudar esse index.ts para Index.tsx se eu retornar um parágrafo aqui com teste por exemplo eu vou ter Ahã ele tá importando errado aqui vamos ver aqui colums deixa eu remover aqui importar novamente beleza ó Então tem um teste aqui tá vendo Então o que eu retornar nessa Cell é o que vai ser renderizado na minha célula e essa Row

é a minha transação ó então tenho acesso a todos os dados da minha transação então aqui galera que que eu posso fazer ó eu posso Abrir aqui uma função e eu posso verificar se Row P Type Row na verdade aqui eu vou ter que fazer um destr tá galera é Row e dentro de Row ten original isso aqui é a minha transaction eu vou renomear para transaction Então eu peguei o Row dentro do Row peguei o e renome ele PR transaction Então se transaction P Type for igual a transaction Type ponto deposits significa que isso

aqui é um depósito então posso retornar depósito por Exemplo eu posso fazer a mesma coisa pros outros né então se transaction Type É iG transaction Type pon expens e esse transaction Type Eu também importo do Prisma client Olha como Prisma tem essa integração bacana com o typescript se for um gasto eu retorno despesa se não eu retorno investimento que é a única opção possível se não for um desses dois aqui ó então Ten o depósito aqui bacana mas eu quero aquela bedzin né Eu quero isso aqui então vamos lá aqui ó eu vou Renderizar a

nossa bed lá do meu componente bed e aqui eu vou colocar depósito legal depósito ok não tá igual o que eu tenho aqui então Vamos mudar Ah então aqui eu vou ter um pequena diferença aqui então vamos lá o background vai ser vamos lá turma vou tentar fazer isso aqui ó então CL name vai ser BG muted foreground e text vai ser primary no não é isso acho que é BG vou colocar um BG m é isso mesmo BG m OK e eu não quero cara é na verdade turma Sinceramente não vejo muita necessidade da

gente usar essa Bad aqui porque ela tem esse efeito de Rover e eu não quero isso ela é mais usada pra gente tipo acho que clicar talvez Então galera que que eu posso fazer aqui eu posso simplesmente criar uma div o Class name dela vai ser um text primary e eu vou colocar Ou mano eu vou colocar na verdade vamos voltar a bed vamos lá já sei o que eu vou fazer voltar a bed aqui assim galera eu quero também passar essa realidade para vocês aqui na F quick quem acompanhou as últimas sabe como é

e eu vou colocar um Hover BG M então quando ele quando eu der um Hover ele não vai mudar o BG fechou é isso e agora eu preciso colocar um Circle né então V colocar um Circle I Importado lucid react Class vai ser na verdade acho que nem precisa do Class name Beleza eu vou colocar um CL F primary beleza e a size dele vai ser bem pequena vai ser 12 beleza é isso mesmo é isso mesmo ser menor ainda né Colocar 10 aqui legal e vou colocar também um Mr um qu pixels bacana turma

bacana colocar um pouco mais de Margem right smr Margin right legal então Depósito Então temos aqui o primeiro eu acho que essa fonte ela é bold Então deixa eu colocar aqui como Font bold beleza e agora vamos fazer a mesma coisa com os demais então deixa eu copiar e colar isso aqui return aqui vai ser despesa só que ao invés de text primary vou colocar um F danger acho que é danger Ah acho que é warning não deixa eu ver lá no globals PCs é destructive lembrei destructive que é um vermelho Beleza então o que

eu posso fazer eu posso abrir novamente o meu Prisma Studio e criar algumas transações com tipo de gasto vamos lá deixa eu abrir isso aqui aqui transaction eu vou criar mais uma transação teste TR só aqui o tipo vai ser gasto eu vou criar uma também teste 4 com tipo de investimento salvei vem para cá Recarreguei tá aqui tá Ah aqui galera eu vou ter que fazer o [Música] seguinte não é esse vermelho que eu quero eu quero Esse vermelho aqui ó Então vou copiar essa hex color e para colocar uma cor customizada e você

pode galera também adicionar essa cor aqui no t tá colocar uma color aqui por exemplo eu vou colocar sei lá danger que vai ser isso eu posso fazer isso também Fechou e agora aqui ó no bed eu tenho essa cor então eu vou fazer o seguinte vou apagar tudo isso vou deixar o Font o text vai ser um danger ó já tem até o aut Complete o BG vai ser também um danger só que vai ter uma opacidade deixa eu ver a opacidade aqui a opacidade é 10% então vou colocar um BG opacity 10 OK

beleza fechou e aqui vai ser Fio danger legal despesa perfeito turma agora investimento Então vou copiar isso aqui aqui vai ser investimento investimento Vai ser branco né então vou trocar esse danger para White que é uma cor do twind inclusive galera o tnd nos traz várias cores já ah por padrão que a gente pode usar ó Então a gente tem todas essas cores aqui que você pode usar Então você quer usar o Red 500 você coloca text Red 500 e Assim por diante então aqui seria Tex Red 500 e assim por diante Ok fechou turma

então fizemos essa parte aqui belezinha e a gente vai fazer algo parecido aqui nos métodos de pagamento também porque o enum ele tá com o nome inglês né que é o ideal e aí você formata esse nome Conforme você prar no seu frontend tá a gente vai ter que fazer algo parecido aqui na categoria também e na ã é isso né categoria E método a gente vai ter que fazer algo Assim só que vai ser só um texto né Beleza que que eu vou fazer aqui turma eu vou turma jogar isso aqui para um componente

separado para não ficar muita coisa nesse arquivo até porque esse arquivo é para renderizar as colunas como eu renderizo cada célula da coluna esse arquivo não se importa muito então o que que eu vou fazer galera como esse é um componente eu digo esse componente aqui ó vou criar um componente com essa bedzin é um Componente que eu só vou usar na página de transações na página transactions então aqui dentro de transactions eu vou criar uma pasta chamada components com underline porque não vai ser uma página barra Bad ponto vou colocar Type Bad tsx E

aí eu vou basicamente copiar isso aqui e colar aqui então colocar Transaction Type badge e eu vou colar aqui beleza e como prop galera eu vou receber a transação então vou ter uma interface transaction Type badge props e a transaction vai ser uma transaction que eu vou importar do Prisma client Então vai ser isso aqui beleza isso aqui eu vou importar também control ponto importei Vou importar o bad da minha pasta de componentes e isso aqui do lucid react Beleza agora aqui eu vou renderizar Apenas essa transaction Type badge passando a minha transaction legal turma

show de bola eu vou deletar esse Import que eu não tô usando control ponto já consigo deletar tudo aqui Fechou coisa linda beleza turma então vamos lá ah agora eu vou fazer um comit a gente já fez algumas coisinhas aqui né relevantes então vou fazer um commit vamos lá então aqui eu vou adicionar tudo vou colocar feits ads transaction Type badge a gente Adicionou a bed do tipo da transação ele deu um erro aqui por qu Ah tem um in config ele tá dando erro nesse arquivo aqui tá esse arquivo galera eu não quero que

ele seja considerado pelo es lint tá esse é o problema então eu vou criar aqui galera um es link Ignore p na verdade é ponto e lint ignor Perdão é ponto e lint ignor vou colocar t. config.ts E aí ele vai ignorar esse arquivo eu não quero que o s lint eh considera esse arquivo até Porque é um arquivo de configuração aqui do Twi Beleza vou colocar ele aqui no comit esse arquivo vou fazer o comit novamente e ele deve passar perfeito agora galera vamos fazer o seguinte vamos colocar a categoria E o método aqui

também já formatado Então bora lá beleza turma então o que que eu preciso fazer com vocês que que a gente tem que fazer jto é o seginte aqui nas minhas colunas aqui na categoria Eu posso também usar essa função Cell porque o Nosso problema é que a categoria sendo renderizada com o nome do né com esse housing aqui eu preciso conver esse nome para português e para isso eu posso criar uma espécie de Map Como assim eu posso aqui em cima galera criar uma variável chamada transaction category map que vai ser objeto e aí para

cada enum para cada valor do en eu vou ter uma Label vou ter um valor em português então por exemplo Transaction category vai ser o galera Moria então se eu pegar essa variável e aqui na célula da categoria eu pegar a minha Row pegar a minha original que vai ser aqui a minha transaction eu posso fazer o seguinte Olha só eu posso pegar o transaction category map passando transaction pcor e agora se eu salvar tem aqui moradia só que eu tenho que fazer isso aqui para todos os valores certo então turma eu vou colar Esse

código aqui galera pra gente não perder muito tempo com isso tá eu criei essa variável aqui e eu coloquei essa sintaxe aqui de letra maiúscula porque ela é uma constante que não muda é mais pra gente ter esse map mesmo então eu eu chamei dessa forma e agora eu vou copiar isso aqui colar aqui embaixo e é isso então moradia aqui é habitação no caso né Eu posso até colocar moradia acho que é melhor então moradia beleza fechou turma vamos fazer A mesma coisa para os métodos de pagamento Tá certo então eu vou mais uma

vez copiar um código aqui pra gente não perder muito tempo com isso você pode pausar o vídeo depois e copiar também tá então eu ten aqui todos os valores do N1 então Bank transfer slip Cash credit card debit card e assim por diante e eu vou fazer a mesma coisa aqui embaixo ó então Cell vai ser isso aqui então vou pegar essa variável e vou passar o payment Method da transação para ela ó Então fechou coisa linda beleza fechou turma agora eu preciso formatar a minha data tá eu preciso que a data tenha esse formato

aqui olha só 28 de março de 2023 Então vamos lá galera que que eu vou fazer aqui ã aqui galera aqui na data eu vou também chamar meu Cell eu vou ter aqui a minha transaction e aqui galera eu posso simplesmente fazer isso aqui New dates P2 local string tá E aqui galera eu Posso usar esse código aqui para formatar para portugues do Brasil para colocar dois dígitos aqui no dia o month ou mês né ser longo e o ano ser numérico aí fica dessa forma aqui perfeito que é o que a gente quer fechou

show de bola turma hã e agora o valor né o valor tá como zero mesmo aqui no banco deixa eu mudar para por exemplo uns valores aqui meio aleatórios Ok esse aqui também vou mudar agora eu preciso formatar isso aqui né ó Então tá ali então para isso eu vou usar galera a própria api do JavaScript também então aqui no amount eu vou chamar o Cell e aqui acho que ele já até vai fazer para mim ó Number Format usando a page Inter nacionalização do JavaScript eu vou formatar em português do Brasil passar o currency

aqui de BRL e tudo mais esse amount turma ele tem esse Type dcim por porque o prisma lembra que a gente falou que esse amount vai ser um Décimal o prisma usa o decimal JS para gerenciar esses campos decimais então por isso que a gente tem esse tipo aqui no amount para solucionar isso eu vou chamar um Number aqui só isso E aí resolve na verdade isso aqui não vai dar certo não eu tenho que fazer isso aqui ó Number Ok Fechou então já tenho formatado coisa linda galera coisa linda agora a única coisa que

falta é isso Aqui os dois botões certo então vamos lá aqui no Actions eu vou ter o meu c e o meu C galera vai ser o qu vai ser uma div com esses dois botões certo então eu vou ter um buron aqui e a Variant dele vai ser galera Ghost sem nada e eu vou ter um Trash icon aqui ó Então na verdade eu acho que esse c esse header tem que ter alguma coisa aqui ó tem que ter ações por exemplo beleza e aqui eu tenho que retornar né Felipão Retornar assim OK belezinha

e o Size aqui pode ser Icon que é próprio para para ícone beleza e eu vou ter também a edição deixa eu pegar um ícone no lucid PD aqui tem os ícones que a gente consegue usar pegar um edits por exemplo ou details alguma coisa assim ã porque o ícone que eu tô usando aqui ó é esse aqui external link acho que esse ícone não é muito bom não Cara aqui parece que vai para outra página né eu vou pegar um Edit pegar um um pencil Talvez né então vamos lá eu vou criar outro bano

aqui vai ser um pencil icon beleza voltei para cá perfeito ter isso aqui ó ele só tem um uma cor diferente então vou clicar aqui e segurar commands na verdade segurar option no Mac ou Alt no Windows você seleciona os dois vou colocar um Class name de text mir for PR ficar um Cinza legal e eu vou colocar nessa div um CL de Space x Space né fogu que D ré e aqui só para colocar um espaçamento horizontal entre os ícones perfeito Então a gente vai adicionar funcionalidade a esses ícones daqui a pouquinho mas turma

tá saindo do papel hein tá ficando muito massa Vamos só fazer último ajuste aqui nesse botão de adicionar transação a gente tem que colocar Font BOL se eu não me engano é um Font B isso Aqui é isso mesmo beleza turma então vamos aqui fazer o nosso commit a gente fez bastante coisa aqui né Ah então vou colocar Fits Ensure transaction table labels are rendered properly então a gente tá garantindo que as labels da tabela de transações estão sendo renderizadas corretamente Deu erro aqui ó o ient deu erro ó olha como os nossos gith hooks

já estão causando efeito por quê Porque Aqui a gente tá importando algo e não utilizando Então vou remover Agora sim vamos fazer o commit fechou turminha então fizemos aqui a listagem Agora vamos pra parte mais divertida que é a adição a gente vai criar uma transação editar e deletar também então bora lá vamos lá então turma que que eu vou fazer aqui eu vou galera quando eu clicar nesse botão aqui de adicionar transação eu vou most mostar esse menuzinho aqui ó cadê cadê Cadê ah aqui beleza então eu vou colocar o título da transação o

valor o tipo dela se é depósito se é gasto se é investimento método de pagamento e a data Beleza então turma vamos para cima eu sei que pode estar difícil mas vamos para cima tudo aqui você tem que Enxergar como algo que vai fazer você dar o seu próximo passo como deve cara de verdade esse projeto aqui o tanto de coisa que você com certeza já aprendeu e A gente ainda vai aprender muita coisa então fica comigo não desiste vamos para cima OK então cara dá uma levantada da cadeira dá uma espare CDA pega um

cafezinho e volta aqui comigo focado vamos para cima Até eu fiz isso tomei um cafezinho agora porque é muito conteúdo Mas vamos lá seguinte turma que que eu vou fazer eu vou usar Ah um componente do shad CN chamado dialog Cadê o dialog aqui eu vou usar esse componente Aqui beleza então eu vou adicionar ele vamos lá npx shaden ads dialog perfeito vamos agora começar a brincar com isso aqui aqui na minha página das transactions quando eu clicar nesse botão eu preciso mostrar esse dialog certo e esse botão ele vai ser reaproveitado também aqui na

página inicial ó ok Então vamos pensar o componente tá sendo utilizado mais de uma vez Ok então Vamos de fato criar um componente para isso aqui para esse botão porque eu vou usar ele aqui e vou usar ele aqui também então me eu perdido aqui no figma aqui ó Beleza então turma para não ficar também muita coisa nessa página Vamos lá criar um botão um componente para esse botão e esse componente a gente vai usar ele tanto na nossa página de transações quanto na página inicial correto então nós usaremos ele em duas páginas então o

componente que eu uso em mais de uma Página eu gosto de criar ele aqui ó em app components tá então aqui em app components fora de y porque aqui em Y são os componentes do shad CN Beleza então aqui em app components eu vou criar creat transaction vou colocar é Create transaction Button PSX na verdade a gente tá usando A nomenclatura de adicionar né então vou colocar adds transaction Button esse tipo de coisa é importante você padronizar também também Então você vê um código que tem ads num lugar tem Create em outro tem search em

outro não fica muito bacana o negócio Beleza então vamos lá ads transaction Button então eu vou pegar esse botão e vou colocar aqui só isso por enquanto importar aqui da minha pasta de componentes e aqui eu vou chamar esse botão perfeito vou remover esses imports Ok nada mudou por enquanto certo beleza agora eu vou abrir esse dialog Turma seguinte se eu vier aqui na documentação Olha como a gente usa esse dialog eu tenho esse Trigger que é o que abre o dialog eu tenho o conteúdo dele então vamos fazer isso ó qual que vai ser

o Trigger o que que vai abrir o dialog vai ser esse botão Então vamos lá dialog Trigger Vou importar da pasta e i dialog e dentro desse Trigger eu vou colocar o buron e eu vou passar para esse Trigger um as child já explico porqu Beleza eu vou colocar tudo isso Dentro do dialog beleza dentro do dialog mais abaixo do Trigger vou colocar o dialog content sempre importando da pasta Ui dialog se você importar da pasta RX que ele PED de vez em quando para você fazer isso vai dar ruim tá aqui no contents eu

vou colocar o dialog header dialog title dentro do header ó percebe que eu posso importar tanto do do hadx quanto do Ui sempre Import do U adicionar transação vai ser o título Dialog description vai ser o qu galera Ah não sei chat APT me ajuda deixa eu ver o que o figma tem aqui acho que é insir as informações abaixo Tá ok beleza agora abaixo aqui do header que que eu vou ter galera eu vou ter um formulário vamos ver primeiro se tá abrindo isso né então aqui ó cliquei Olha que bacana hein já tá

abrindo galera isso aqui é interessante isso aqui é bacana ó já tá Abrindo OK agora turma vamos lá deixa eu colocar também um dialog fter aqui que vai ser o conteúdo ali que fica embaixo né vai ter um buton também vou importar percebe como a gente vai compondo a nossa aplicação com vários componentes aqui do shad Science é bem bacana isso aqui é um padrão galera que a gente chama de composition pattern tá esse padrão de você ir compondo o seu componente com pequenos subcomponentes vamos dizer assim isso é bem bacana você Pode dar uma

olhada depois sem conteúdo no f Club sobre isso inclusive beleza turma então Ah aqui eu vou criar o primeiro Bon que vai ser cancelar que vai ser um Variant outline e eu vou criar o outro Bon que vai ser adicionar vai ser um Variant primary beleza tá lá cancelar adicionar fechou turma agora vamos colocar o nosso formulário formulário é uma parte muito importante de aplicações web né e o shaden também tem um formulário e aqui Turma eu vou um pouco rápido porque que é muita coisa mas a gente vai usar duas bibliotecas para criar esse

formulário A primeira é o react Hook form que a gente usa para criar formulários no react há muito tempo já E é a melhor biblioteca disparada para você lidar com formulários a segunda é os ods os ods a gente vai usar para validar esse formulário então para colocar regras de por exemplo tal campo é obrigatório ã tal campo é uma moeda por exemplo Tá Então vamos usar esses dois caras aqui e o shad CN já vai instalar eles pra gente automaticamente porque tem um componente form aqui que usa tanto o react form quanto os odod

Beleza então vamos lá eu vou instalar esse componente form então add form ele vai instalar para mim e agora eu posso ver a documentação aqui ó então Primeira coisa eu preciso criar esse esquema do Zod tá E esse componente ele precisa ser um client component porque Ele vai ter formulário vai ter botão input etc Então vai ser um client component ã e eu posso criar um formulário dentro de um server component usando server Actions mas eu não vou entrar nisso aqui porque a gente quer adicionar ã validações aqui mais complexas e tal então isso aqui

tem que ser um client component Resumindo beleza fechou galera ã eu vou criar aqui então Ó o form Skema esse Z eu vou importar do Zod deixa eu Importar aqui imports Z from Zod Ok e aqui aqui dentro eu vou colocar os campos que o meu formulário tem então o primeiro campo é o qu galera é o nome que vai ser o qu z. string ponto mínimo um Ou seja é obrigatório e eu vou passar como parâmetro aqui ó o message o nome é obrigatório então se eu não satisfazer essa regra aqui ó de mínimo

um caractere eu vou mostrar essa mensagem e eu vou Colocar um trim também para eu não considerar espao em branco ao contar esse mínimo aqui segundo turma que que eu preciso eu preciso do amounts esse amounts eu vou salvar como string e converter PR número quando eu enviar o formulário Beleza então vamos lá Z string mesmo esquema message o nome é obrigatório ok que mais eu vou ter o Type esse Type Galera eu posso usar um z Native transaction Type ou seja o meu tipo ele Tem que ser um desses valores aqui ó do meu

en então um desses acho que eu não vou conseguir ver aqui mas um desses valores Aqui tá um desses três Beleza então ess aqui é bem bacana vou ter também um required error então se eu não fornecer nada eu vou ter esse erro que mais galera eu vou ter a category vai ser a mesma coisa Z Native transaction Category requ eror perfeito que mais galera payment method Z na também transaction payment method vou ter também requir error massa eu acredito que seja isso acredito que seja isso cara então vou ter o nome amounts tem o

dates né então dates vai ser um zdes e aqui vai ser um required error a data é obrigatória legal perfeito Então esse é o nosso formulário tá com as regras aqui percebe que a gente usa o Zod para criar essas regras e ele vai validar pra gente agora galera eu preciso importar essas duas coisinhas aqui ó use form isod resolver então vamos lá importado aqui ó use form is resolver Ah e agora eu vou fazer isso aqui ó Eu Vou Chamar esse use form aqui beleza e o default values eu vou ter que colocar tudo

que eu coloquei aqui no meu esquema ó porque ele já integra com o esquema do Zod Então amounts vai ser um String vazia category eu posso colocar tudo isso aqui como default Ah aqui vai ser New dates por exemplo e é isso Fechou então lista vazia string vazia Ok beleza agora turma eu vou voltar na documentação e eu vou copiar isso aqui ó esse form aqui E esse form eu vou deixar dentro do meu dialog contents aqui na verdade eu vou deixar cara porque esses B eles eles TM que estar Dentro do meu form é

vou deixar aqui e aí o form ele vai terminar aqui embaixo ó Beleza então for começa aqui em cima eu vou importar do react na verdade isso aqui importa do Ui form segue comigo não desiste cara vamos lá vai dar bom form Field Vou importar do Ui form form item também tudo da past Y bar form form Label também form control também form description isso eu não preciso form message vai ser a mensagem de erro Vou Importar também de y form beleza e eu preciso do input então eu vou também adicionar o input aqui do

shad CN Ah deixa eu marcar que não aqui acabei não instalando tá ads inputs Beleza agora eu vou importar esse input do meu da minha pasta ui inputs name aqui vai ser se eu apertar cont espaço percebe que o nome ele tem que ser um desses aqui ó Então olha como tá Tudo bem tipado pelo typescript então name aqui eu vou colocar o name né o nome da transação form Lab vai ser nome placeholder vai ser nome da transação vou colocar digite o nome e aí eu passo tudo que vem nesse Field aqui beleza Tá

e agora eu vou criar uma função galera aqui em cima que vai se chamar on submit que vai ser chamada quando o meu formulário ser enviado por enquanto vou deixar ela vazia fechou salvei vamos lá vim para cá Adicionar olha aqui já tem bacana se eu clicar em adicionar olha aqui ó já tem um erro galera olha que interessante já tenho esse erro isso aqui é bem massa bem bacana turma então Olha como a validação já funciona se eu ditar o erro some olha que coisa sensacional galera olha como a validação já tá funcionando Mas

agora vamos adicionar os outros Campos né então o primeiro campo que eu tenho que adicionar é o campo do valor então para eu colocar um campo novo eu Copio esse form Field e colo aqui embaixo o name dele vai ser o qu galera vai ser amounts e aqui galera eu vou usar um input monetário certo então para criar um input monetário que já formata quando eu digito tipo input banco né eu vou usar o react Number formats esse cara aqui ó Então vamos lá aqui em app components eu vou criar um componente chamado money input

p tsx e eu vou copiar e colar esse código aqui tá Ah eu vou ter que Instalar esse react Number formats também então npm install react Number formats na versão 5.4.2 e turma não vou muito a fundo aqui isso aqui é mais uma questão de react tá esse for draf aqui mas basicamente eu tenho que fazer isso para passar o ref para esse input tá E aí eu basicamente uso numeric formats aqui para formatar o valor do input do shad CN Ok não vou muito AF fundo nisso aqui Ah então vamos importar esse mono inputs

aqui ó então a Invés de input eu uso mono inputs Digite o valor e agora se eu vier para cá deixa eu mudar esse form Label também ó já tá formatado coisa linda hein beleza galera agora precisamos de outras coisinhas aqui então eu preciso turma agora fazer os mais interessantes né que são esses menuzinho aqui para eu selecionar o tipo da transação o método de pagamento etc e para isso galera a gente vai também usar um componente do shad cien então shad cen tem tudo aí que A gente precisa a gente vai usar ã esse

cara aqui galera esse Qual que é o nome mesmo selects Cadê o selects aqui selects esse cara tá então vamos adicionar o selects vamos lá npm vamos adicionar aqui ó então shcn ads npx shcn ads select beleza turma show de bola agora que que eu vou fazer eu tenho até no shad C aqui um exemplo do select sendo usado no formulário tá Olha que bacana então o select sendo usado dentro do formulário aqui ó code Eu tenho aqui ó então eu vou basicamente cara ã copiar isso aqui não tá muito não tá muito grande mas

dá para ver eu acho né aqui ó esse formfield aqui do email ó Então vou copiar esse form Field e vou colar aqui embaixo do form Field do amounts ã então aqui beleza então vamos lá primeiro o nome dele vai ser primeiro se eu não me engano é tipo da transação então Type tipo esse select eu vou importar da minha pasta de y select Trigger também turma sempre importem da passa de y nunca da passa radix tá e eu tô lembrando repito T apertando control ponto para eu selecionar para eu abrir esse menu importar Ok

select item beleza form description não preciso vou remover isso aqui Fechou então se eu salvar via para cá ó já Tenho o tipo Beleza agora eu preciso colocar os tipos reais né então vai ser gasto investimento e tudo mais Então galera que que eu vou fazer aqui em cima eu posso criar uma variável que tem o seguinte vamos lá vou criar uma variável aqui chamada transaction Type options vou criar dessa forma porque é uma constante que não vai mudar nunca eu só quero usar ah como para meio de formatação mesmo eu Vou ter o vue

e eu vou ter a Label Beleza então expense vai ser despesa Inc vai ser na verdade aqui e deposit depósito e eu vou ter também o investments né que vai ser investimento E aí galera eu já tenho até essa Label aqui lá no meu arquivo de colums né isso aqui ó então que que eu posso fazer Galera eu posso centralizar essas constantes de Label e tudo mais de formatação dentro De um arquivo só que que vocês acham eu acho que faz super sentido então aqui em app eu vou criar uma pasta chamada constants bar transaction

ACS então isso aqui vai ser usado em vários lugares por várias páginas por isso que eu criei aqui na raiz da pasta app e eu criei com essa underline porque não é uma página tá agora eu vou pegar isso aqui que eu coloquei lá nas minhas colunas e eu vou colar aqui agora aqui Nas minhas colunas eu vou importar de lá então cont control ponto importei fechou beleza e agora eu vou também pegar isso aqui ó e colocar aqui e a Label galera para reaproveitar que que eu vou fazer ó eu vou usar isso aqui

ó transaction hum na verdade eu não tenho as labels de despesa depósito investimento né eu tenho só essas aqui mas tudo bem vamos deixar assim então ó Export Beleza agora que que eu faço galera aqui no select ah dentro aqui ó do select contents eu vou fazer o seguinte vou apagar esses itens e eu vou importar transaction Type options ponto map e para cada option eu vou renderizar um select item dessa forma então o valor dele vai ser o option P value que no caso vai ser o valor do en1 que é isso que eu

tenho que salvar tá e a Label vai ser a Label Então vai ser depósito despesa ou investimento salvei vi para cá vamos ver se vai dar bom tá aqui ó coisa linda fechou vamos agora fazer a mesma coisa para o método de pagamento Então vou criar aqui galera Export const payments method options vamos ver se o chat PT completa para mim completou coisa linda só que a lei é deixa eu galera eu vou copiar o código aqui que eu tenho galera pra gente não perder tempo com isso também até porque Ah isso aqui cara você

pode simplesmente copiar não tem nada demais nesse código aqui no sentido de lógica e tudo mais é só o mapeamento mesmo tá Beleza e a Lab Galera eu posso para reaproveitar isso aqui ó eu posso fazer o seguinte ó eu posso fazer aqui ó e assim por diante né Para eu já pegar essa Label dessa variável certo Para eu não ter que ficar repetindo as labels então fazer a mesma coisa aqui só que aqui vai ser Cas é muito comum você ter esse tipo de mapping tá nas aplicações especialmente aplicações que suportam mais de um

idioma bem comum beleza aqui vai ser er aqui vai ser pix Fechou então vou importar essa variável eu vou cara basicamente copiar esse form Field aqui colar aqui embaixo vai ser a mesma coisa só que vai ser agora payments method certo Fechou agora que vai ser forma de pagamento colocar método de pagamento ah placeholder selecione o método de pagamento e agora vai ser transaction payments methods options Ok então se eu vier para cá adicionar a transação eu tenho aqui agora todos perfeito galera show de bola agora o único que falta na verdade faltam dois né

falt falta a categoria certo e falta também a data Beleza então vamos lá Galera fazer a mesma coisa aqui pras categorias Não tem segredo então turma quia essa variável aqui mesmo esquema que a gente acabou de fazer não vou muito a fundo nisso aqui também tá a gente pegou cada categoria E colocou a Lab correspondente fechou agora eu vou copiar e colar esse form Field também e aqui vai ser o nome vai ser category e aqui vai ser categoria E aqui vai ser selecione a categoria beleza e aqui vai ser category Options Fechou então vi

aqui olha que sensacional galera sensacional turma perfeito eu vou colocar a categoria antes do método de pagamento acho que faz mais sentido né pegar esse formfield aqui da categoria E colocar aqui ó em cima antes do método de pagamento fechou Então é isso galera coisa linda estamos aqui com o dialog pronto praticamente né faltando apenas a data né então vamos lá o shaden também tem galera um date pecker que é esse aqui fechou embora ele Seja um pouquinho mais chatinho de instalar mas vamos lá para usar ele eu vou precisar do popover que é outro

componente do shad CN e do commands dessa forma Beleza então eu vou ter o popover na verdade popover e Calendar então ele vai instalar para mim vamos esperar um pouquinho eu não vou substituir o que já tem apertar não não OK agora turma que que eu vou fazer vamos lá eu vou ah copiar um código que tem aqui na Documentação deles que é esse aqui Exatamente esse aqui datate picker demo vou copiar aqui em app components e vou criar o componente dates picker e aqui eu vou mudar algumas coisas primeiro eu vou transformar isso aqui

em um marrow function só pra gente seguir o padrão dos outros componentes aqui eu vou tirar esse component Y eu vou colocar simplesmente ó então selecionei o primeiro cont control D cont control D Selecione os próximos ponto barra para importar aqui da mesma pasta Esse libs é ponto ponto aqui é @ Feber galeraa foreza fipt a tem curs você então aqui vai ser trocar todos os dates por aqui e esse um select ele tem esse tipo aqui ó select single event handler então aqui ó eu vou pegar colocar esse tipo aqui Beleza importar ele do

react Day picker fechou turma e aqui eu vou colocar selecione uma data perfeito agora eu vou fazer o seguinte turma eles tem um exemplo aqui com o formulário Mas é bem simples eu nem vou copiar o deles não eu vou copiar esse último form Field que eu coloquei e aqui ao invés do selects eu vou tirar esse form control vou tirar o select tudo aqui vou colocar dates picker o v vai ser fieldvue e o onchange Vai ser Field onchange e aqui vai ser data e esse name vai ser dates perfeito turma então vamos lá

vamos ver se deu bom método de pagamento data aqui eu só tenho que arrumar um negócio aqui no date picker eu vou colocar esse wif aqui ó de full beleza turma coisa linda hein então Ok deixa eu mudar aqui também galera na nossa no nosso dialog esse Button de cancelar ele é do Type buton porque ele Tá dando submit também vai ser Type Button e esse esse Ban aqui ó vai ser Type submit que ele vai de fato enviar o formulário Então adicionei beleza ó já tá validando aqui certinho a data também só vamos formatar

certinho então vamos lá aqui no nosso date picker não desiste cara vamos lá turma estamos terminando aqui no Date peer a gente vai fazer o seguinte aqui ó eu vou colocar esse formats e ele tá usando o dates fns para fazer essa formatação o que não é Necessário né se você pens sabem a gente pode fazer a mesma coisa que nós fazemos aqui na coluna né usar isso aqui ó para formatar data né então aqui eu vou pegar isso aqui colocar aqui Fechou coisa linda eu preciso também mudar o calender para português ele tá em

inglês ó october e tudo mais para isso galera eu vou importar aqui do data fns barra locale não vai ter como fugir Do data fns Vou importar o PTBR e aqui pro calender eu vou passar o qu galera local PTBR Agora sim tá em português beleza Ah e eu vou colocar galera aqui o Max ah deixa eu só lembrar como que aqui ó two dates vai ser New dates Ou seja eu não consigo criar uma despesa no futuro tá o máximo é hoje Ok faz sentido né faz sentido é na verdade a gente pode Deixar

mais livre né tipo vamos deixar livre mesmo se o cara quiser criar uma despesa pro futuro já deixar aqui um gasto programado por exemplo ele pode beleza turma então show de bola a gente tá aqui já fazendo ã a validação dos Campos quando eu clicar em cancelar ou fechar o dialog eu quero que ele limpe os dados então para isso eu vou aqui no meu add transaction Button e esse dialog recebe esse on Open Change E aqui eu recebo o open e aqui eu posso falar se ele não estiver aberto eu vou chamar um form

P reset beleza para ele resetar o formulário então isso aqui vai funcionar então cancelar e esse cancelar aqui galera esse botão de cancelar ele precisa estar dentro de um dialog close aqui ó esse cancelar ele tá dentro de um dialog close deixa eu importar ele fechou dialog pera aí dialog Close tem às vezes que M esc não quer trabalhar galera é impressionante Ok beleza Fechou então cancelar ele fecha e turma tem um ponto aqui interessante ó vou mostrar para vocês se eu vier aqui nesse botão de cancelar percebe que eu tenho um buron dentro de

outro buron percebe ó aqui ó eu tenho um buron dentro de outro buron por que isso acontece porque Eu não tô usando aquele oud por isso que eu tenho que usar esse s shoud para eu falar que o botão vai ser o componente filho então aí ele não vai criar dois botões tá vendo aí fica um só então um detalhezinho aí importante ok beleza turma então fizemos aqui o nosso dialog ele já tá resetando aqui quando fecha já tá validando também show de bola coisa linda beleza agora aqui no on submits eu vou logar os

valores tá então vou receber um daa aqui vai ser esse Tipo aqui ó z. infer Type of for schema e eu posso jogar esse Type aqui já para cá então Type form esima vai ser isso aqui para não ficar repetindo isso E aí e eu passo esse form Skema para cá como generic do use form e passo aqui pro deira também beleza e agora eu consigo dar um log no deira só pra gente ver isso aqui aqui no console ó então adicionar eu tenho o deira aqui ó que interessante tudo aqui para mim a data

cegor e tudo mais beleza então turma Vamos fazer o comit aqui que a gente fez bastante coisa já né muita coisa mesmo talvez a gente poderia ter feito um comit até um pouco antes mas vamos lá vou colocar um fits ADS creat ads ah Create add transaction dialog a gente criou o dialog de adicionar a transação beleza ele deu um erro aqui qual o erro que deu ah ui bar calender também tá dando erro aqui GS Lins eu não tô usando isso aqui né Deixa eu tirar Isso Beleza fazer o comit boa deu erro de

novo ah e o inputs Vamos ver que que tá acontecendo interf an interface declaring no members posso fazer isso então vou dar para um Type commit vamos ver se vai dar bom beleza agora turma vamos efetivamente adicionar essa transação no nosso banco Então bora lá galera vamos lá então criar isso aqui dentro do nosso banco tá para isso turma eu preciso Pensa comigo chamar uma f Ok e essa função precisa ter acesso ao meu banco então é uma função que precisa ser executada no servidor também e a gente consegue fazer isso no next por meio

da server Actions server Action são funções que nós executamos no lado do servidor e a gente pode chamar elas de client components e como que a gente cria uma server Action vamosver Action transação a gente quer adicionar Uma transação ela vai ser usada tanto na página inicial certo ou seja aqui quando eu clicar aqui em adicionar transação quanto na página de transações que é o que a gente tá fazendo agora então aqui na pasta app eu vou criar uma pasta chamada Actions e dentro dessa pasta chamada Actions Opa criei no lugar errado aqui aqui ó

Actions e dentro dela eu vou criar o quê galera outra pasta chamada add transaction beleza e dentro da pasta Eu vou criar um index.ts aqui dentro eu vou colocar minha server Action para eu falar pro next que eu estou criando uma server Action eu tenho que na primeira linha do arquivo colocar um use server então toda função que eu colocar aqui dentro vai ser executada no servidor Então vai teresso a banco de dados por exemplo Então vou exportar uma constante chamada ads transaction que vai ser a e aqui galera eu posso chamar Meu banco de

dados tranquilamente então o que que eu vou receber aqui vou receber os parâmetros que vai ser os dados do meu formulário E olha que interessante Galera eu posso importar um cara chamado Prisma ponto insert na verdade é Create payload transaction Create payload Create inputs Isso então isso aqui já vai dar pra gente todos os campos que a gente precisa para criar uma transação né o input necessário para Criar uma transação E aí eu vou chamar w weits ZB que eu vou importar da minha pasta Lib barra Prisma pon transaction P creates data vai ser params

beleza Fechou então aqui nos parâmetros ó não sei porque não tá aparecendo aqui meu vesco hoje não quer trabalhar deixa eu recarregar minha minha janela aqui então nesses parâmetros teremos tudo que a gente precisa para criar nossa transação tá ó a gente vai ter isso aqui Fechou beleza uma coisa que falta galera a gente precisa do ID do usuário lembra desse detalhe então para pegar o ID do usuário o que que eu vou fazer aqui na minha server Action eu vou chamar aquele off aqui vai ser user ID igual a off e eu vou importar

isso aqui do clerk então se eu não tiver esse user ID que que eu vou fazer galera eu vou lançar o que eu não tô autorizado então sei lá unauthorized certo porque se eu não Tiver um user ID vai dar ruim tá E aí depois eu crio a minha transação passando tudo que tá no params e o user ID basicamente tá galera agora um ponto muito importante presta atenção aqui presta atenção aqui uma server Action é uma função beleza mas ela vai ser eventualmente uma uma rota http é uma abstração que o n faz pra

gente então isso aqui galera precisa ser validado eu preciso validar esses parâmetros aqui beleza eu preciso Validar eles com qu com Zod então aqui eu vou criar outro arquivo chamado esima PTS e aqui eu vou colocar o que eu espero que essa server Action receba então eu vou criar uma constante ads transaction Skema vai ser um z p Object e o que que eu espero que ela Receba um amount que nesse caso vai ser um Number Tá eu vou ter basicamente o mesmo esquema que eu tenho lá no meu Create transaction add transaction Button eu

vou ter aqui então deixa eu até copiar Isso aqui então vou ter o name eu vou ter o Type aqui o category e o payment method só que o amount já vai ser um Number tá E ele tem que ser positivo e aqui galera eu nem preciso das mensagens tá nem preciso eu posso tirar as mensagens aqui não tem necessidade porque as mensagens servem apenas no na tela né a nível de cliente pra gente mostrar para ele aqui a gente não precisa das mensagens a gente só tem que Validar mesmo beleza agora eu vou validar

esses paramet aqui então eu vou chamar um AD transaction esema ponto parse params então se essa validação falhar o Zod vai lançar uma exceção pra gente perfeito Fechou então guarde isso cara uma server Action tem que ter os seus parâmetros validados porque ela é uma rota htp qualquer e ela tem que ser protegida Também se ela exigir autenticação Ok beleza agora turma vamos lá eu vou chamar essa função lá do meu componente lembrando não esqueça desse US server aqui em cima Como que eu faço isso aqui no meu AD transaction Button quando eu chamar esse

on submits eu vou chamar essa função awaits ads transaction passando aqui galera o deira pronto vai dar erro porque o user ID está user ID ele não tá Declarado Então vamos voltar para cá e turma eu não gosto muito de usar esse tipo do Prisma tá porque eu fico muito engessado ao Prisma eu prefiro eu mesmo definir os meus parâmetros tá eu só mostrei para vocês saberem que tem se você quiser continuar usando você pode simplesmente fazer isso aqui ó ã o problema é que o user ID tá aqui eu não vou passar o user

ID para cá Porque pensa comigo não faz sentido o front end passar o user ID isso aqui galera é Front end né isso aqui é um client component então é como se fosse um front end comum tipo react comum então não faz sentido imagina se tá criando uma parada e você sempre vai criar aquilo para o usuário que tá logado certo Não Faz Sentido o frontend passar o user ID porque o backend já vai saber o usuário que tá logado então você poderia passar o token por exemplo como header authorization Mas enfim o ponto é

quem vai pegar o user ID é a server Action Por meio desse Hook off dessa função off melhor dizendo tá então você pode fazer isso aqui ó omit e aí você tira o user ID disso aqui e aí para de dar o erro Ok então você pode fazer ISO ou você pode criar a sua própria interface que aí você fica mais independente aí do Prisma tá beleza eu vou deixar o prisma mesmo não tem problema só dar esse umit aqui tá perfeito mas só para você saber que tem as duas possibilidades a gente vai Mais

a fundo nisso aqui nesse tipo de coisa Deão de design e arquitetura dentro do F Club também beleza ah ok turma Ah então vamos lá vou adicionar essa transação eu vou colocar um TR catch aqui também só para eu ver se aconteceu algum erro error fechou belezinha e eu também quero fechar o meu formulário depois que eu adicionar essa transação mas is a gente vê daqui a pouco vamos lá então galera eu vou abrir meu Prisma Studio para eu Monitorar meu banco então vamos lá npx Prisma Studio Ah deixa eu abrir aqui eu tenho essas

transações eu vou criar uma transação nova Então vamos lá teste server Action 2500 e eu tenho que converter esse valor esse Dea cara esse amounts eu tenho que converter para Number isso aqui tá errado não era para deixar eu Passar porque a minha server Action espera um Number Tá vendo Por isso eu prefiro criar minha própria interface Vamos criar nossa própria interface galera interface add transaction params que que eu preciso receber name amount Type Deixa eu tirar esse Prisma ponto aqui que não faz sentido transaction Type transaction category transaction payment method e é isso então

params é isso aqui Beleza OK agora deu erro então eu vou passar aldeira e esse amount turma tem um ponto tá vamos dar um log nesse deira deixa eu ver se aqu log ainda tá aqui não tá aqui deixa eu dar um log nesse deira só pra gente ver como que o amount ele tá vindo tá ele tá vindo ah com isso aqui certo ele tá vindo com com string então o que que eu vou fazer galera eu vou Colocar const amount vai ser se eu colocar um par float ele não vai dar certo ele

vai dar ruim porque tem o RS então adicionar ele não dá certo então eu preciso tirar o RS então eu vou colocar um replace RS com isso aqui agora acho que vai dar Bom 25 só que tem os três pontos aqui é 25.000 no caso né Então galera que que eu vou Fazer aqui vamos lá eu vou ter que fazer algumas mudanças aqui esse form agora ele vai ser esse amount vai ser um Number tá beleza ele vai começar como zero aqui OK Eu vou dar só um log aqui nessa deira no submit agora quando

eu chamo o meu money inputs aqui ah esse eu vou eu vou receber aqui value Change esse Val Change ele vai receber V pera aí deixa eu arrumar aqui aqui ele vai receber v e esse ves ele vai ter esse float V tá vendo que é o valor que eu quero salvar valor que eu quero mandar pro banco então aqui eu vou chamar um Field ponto on Change E aí eu vou já pegar desse Vales aqui ó o float value e eu vou mandar esse float value pro meu on Change beleza e aqui galera eu

apaguei aquele Field assim tá eu só vou passar o velho On value Change One Blur dessa forma então Field pon Blur Ah e Field pon disable aqui beleza só vou passar isso aqui porque ele tava sobrescrevendo on Change e tava dando ruim então agora sim eu tenho certinho aqui o meu deira o meu amount certinho perfeito Beleza agora eu vou chamar novamente o meu ads transaction vamos ver se vai dar bom então vamos lá test server Action valor 250 2500 colocar como depósito categoria educação adicionar ele deu unauthorized porque provavelmente eu não estou logado issso

é bom então vamos dar vamos lá pra página de login vamos fazer o login fechou agora vamos tentar de novo então barra transactions agora tô logado Então foi bom porque eu não tava logado ele deu aquele erro de authorizer que é bom ah Adicionar não deu erro nenhum não deu erro nenhum vamos lá pro Prism Studio e tá aqui test server Action coisa linda turma user ID certinho ó coisa linda galera show de bola show de bola se eu recarregar minha página tá aqui ó test server Action show de bola turma coisa linda vamos criar

outra aqui test server Action 2 vai ser isso aqui investimento adicionei cancelei deixa eu fechar e percebe turma que não atualizou aqui eu vou ter que recarregar para atualizar Por qu porque eu preciso nessa a transaction depois esse await aqui der certo eu preciso chamar um revalidate PA passando barra trans Isso aqui vai fazer com que o Next ele revalide essa página de transações então se eu agora criar novamente aqui ó cancelar deixa eu recarregar só para garantir aqui carreguei vamos lá teste server Action 3 adicionei aqui agora tá aqui beleza Show galera tá ficando

massa demais hein Tá ficando show turma Beleza então vamos fazer o comente galera Deixa primeiro eu lá no transaction Bon eu vou fechar o dialog quando eu finalizar aqui o Enio tá então para isso vou ter que fazer algumas mudanças aqui tá vou ter que fazer algumas mudanças vamos lá primeira mudança eu preciso aqui ó criar um States chamado chamar state aqui lembrando como isso aqui é um Cent Component eu consigo criar o state tranquilamente esse state vai chamar vou colocar dialog Open set dialog is open beleza e agora aqui no dialog vou passar Open

como esse States fechou e on Open Change eu vou chamar o galera oog is open como esse Open beleza Isso aqui vai ser false por porque agora eu consig chamar depois do submit eu consigo chamar isso aqui colocar false então agora teste adicionei ele deu algum erro cara tá Dando algum erro Vamos ver acho que é por causa do valor tem que ser tem que ser positivo ó esse amounts aqui ó ponto positive aí vou colocar message assim aqui no Number vai ter um required error também O valor é obrigatório é então colocar isso aqui

beleza foi coisa linda turma show demais tá ficando massa hein turma tá ficando massa Demais boa e depois aqui galera que eu terminar eu posso também dar um form pon resets quando eu enviar aqui quando eu criar a transação eu posso dar um p reset PR eu resar aqui o meu formulário show galera show demais esse amount cara eu vou colocar como padrão sei lá 50 aqui para não ficar com esse erro aqui do do valor positivo fechou turma então vamos agora fazer o commit então Fits Ensure transaction can be created então turma Agora vamos

implementar a edição de uma transação então quando eu clicar nesse botão o que eu quero fazer eu quero basicamente abrir esse mesmo menu mas com os campos já pulados obviamente né então o nome vai ser o nome da transação que eu tô editando o valor e assim por diante tá Então como que eu posso fazer isso turma vamos lá vamos pensar aqui o que que eu quero reaproveitar esse formulário é isso que eu quero reaproveitar o botão não o botão vai ser Diferente então eu vou abrir o mesmo formulário com dois botões diferentes Beleza eu

vou abrir com esse botão de adicionar transação e com o botão de editar então o que que eu vou fazer galera O que que a gente pode fazer juntos aqui ó a gente pode ã aqui ó no nosso AD transaction Button eu posso pegar esse formulário todo esse Forum aqui e jogar em um componente que que você acha pegar esse formulário e jogar em um Componente separado entende e aí a gente reaproveita esse cara ou melhor eu posso jogar esse dialog inte aqui em um componente que não vai ser mais apenas de adição vai ser

de Ups um up é uma inserção se você não tem aquele dado ainda no banco ou uma atualização se você já tem aquele dado então o que que eu vou fazer galera aqui em components eu vou criar um Transaction dialog belezinha fechou e aqui turma que que eu vou fazer ó upsert transaction dialog eu vou copiar todo esse dialog aqui tá tudo isso aqui pera aí deixa eu pegar isso Aqui tudo isso aqui beleza e vou colar aqui fechou eu posso até pegar esse imports ó e copiar tudo aqui os imports que eu tenho no

meu add transaction Bon eu copio e colo tudo aqui já fechou eu vou deletar os que eu não uso Ok belezinha eu preciso galera receber como prop a informação se ele está aberto Ok vou explicar por depois mas vamos lá Interface up prop vai receber Open set is open Beleza então vai ser is open ok aqui eu vou mudar para cá fechou agora o formulário eu também vou pegar e jogar para cá então o for esima vai ficar aqui o zio também vou importar vou importar todos esses Imports aqui importar os importes é bom né

Vou importar tudo isso aqui que eu preciso esse forma esima também E por que o formulário vai ser o mesmo galera Porque de fato vai ser o mesmo né Por que essas variáveis serão as mesmas porque o formulário é o mesmo Tá ok eu vou pegar esse form aqui também vou jogar para cá beleza use form e us resolver Z resolver eu vou importar Cadê os od resolver Beleza fechou agora onde eu tenho aqui eu tenho aqui no on submits o on submit turma também vai ser aqui dentro e daqui a pouco a gente vai

adaptar esse cara para não apenas adicionar mas para ele fazer essa esse Ups Ok e o set is open aqui vai ser false fechou agora turma eu vou importar essa transaction só pra gente ver se a gente não quebrou nada tá e Esse transaction Bon cara ele vai basicamente retornar mim o qu o me Ups transaction dialog mas galera aqui o que que eu tenho que fazer vamos lá primeiro eu vou tirar esse Trigger daqui do dialog perfeito eu V pegar esse b de transação vou jogar ele para cá então vamos aqui beleza e quando

eu clicar nesse botão que que eu vou fazer set dialog is open E aí eu vou passar aqui ó dialog is Open dialog is open set is open set dialog entendeu então esse botão vai controlar esse estado de abertura que eu vou passar como PR para cá vou remover os imports que não t usando legal aqui eu vou remover esse Import também que não t usando ok perfeito então agora se eu vier para cá não quebrou nada ó teste Sei lá tá aqui então não quebrou nada o que é bom mas agora vamos pra parte

de atualização vamos lá turma primeiro eu Vou fazer com que esse dialog seja aberto quando eu clicar aqui em editar Tá então vamos lá como que eu vou fazer isso lá na nas minhas colunas aqui ó em app Na verdade onde tá App transactions colums isso aqui aqui nas ações ó eu tenho esse pencil icon certo e eu vou jogar esse cara para um componente separado Porque ele vai ter que ter estado galera ele vai ter que ter esse estado aqui ó Para sinalizar se o dialog tá aberto ou não Esse estado aqui vai ser

a mesma coisa desse componente aqui basicamente tá galera então aqui em app na verdade como esse botão de editar ele só estará na tela de transações ele só vai tá aqui não vai ter nenhum outra página eu vou criar ele aqui galera Ó app transactions components e vou colocar aqui ó Edit transaction but Fechou eu vou literalmente copiar Esse transaction buton vai ser a mesma coisa tá turma praticamente com algumas diferenças Então vai serit transaction Bon aqui eu vou importar as coisas certas Então vai ser buron aqui e o Up search aqui fechou aqui beleza

só que agora que que eu vou fazer esse botão não vai ser assim ele vai ser esse aqui certo então vou pegar esse bão aqui vou colocar aqui importar exp penso icon e quando eu clicar Nele eu vou colocar o sets da logs Open through perfeito show e agora aqui na coluna eu vou Edit transaction perfeito galera então agora se eu clicar aqui abriu beleza abriu porém eu preciso agora passar para esse dialog percebe como a gente vai indo passo a passo tá eu preciso passar para esse dialog os valores padrão que são da transação

que eu estou clicando correto Então como que eu faço isso no Dialog eu vou receber esses Def velos como próprio então Ó vou receber aqui ó vou criar uma já tenho a interface aqui ó do das props eu vou colocar default Vales que vai ser opcional que vai ser o qu galera o form skima que é esse tipo aqui ó que é o tipo do meu formulário e eu coloquei esse paral para falar que todas são opcionais beleza na verdade cara é isso aqui não vai ser partial não se eu tô editando eu Tenho que

passar tudo que tá aqui dentro ó o name amount o Type etc fechou agora olha que massa quando eu clicar aqui no Edit transaction Button eu posso receber aqui nesse componente a transação que eu estou clicando concorda então eu posso ter aqui uma interface Edit transaction Button props e aqui receber a minha transação então transaction que vem lá do Prisma Beleza então Edit transaction Buton props transaction E aí quando eu renderizar esse componente eu passo transaction lembra que eu vou ter o meu Row vou ter o meu original que é a minha transação e eu

passo ela como prop para cá Olha como as coisas estão se ligando Beleza então já tem a transação que eu estou editando agora que que eu faço aqui pro default Valos galera eu passo a minha transaction basicamente ele vai dar um erro aqui vamos ver o que que tá faltando amounts porque o décimo é Number ó Então eu vou passar o transaction amount vai ser o qu galera Number transaction p amount fechou vamos ver se opicional essa aqui aqui eu vou ter que fazer obviamente aqui no OB transaction diog Tur eu tenho que aqui quando

eu pass vales eu V receber prop ele também eu vou passar ou que vem como prop ou esse aqui então se vier Como prio passo sen não eu passo o padrão aqui vamos ver agora editar vamos recarregar a página Só para garantir que massa turma vocês viram ó já tá trazendo os valores padrão Olha que sensacional os valores no caso da transação que eu estou editando olha que massa galera então a gente já tá meio caminho andado certo já tá meio caminho andado beleza show e o que mais galera que eu tenho que passar para

cá vamos ver vamos agora adaptar essa Action aqui ó de Ed transaction porque quando eu clicar em Salvar Vamos fazer um teste aqui galera Ó eu vou fazer o seguinte cara eu vou limpar o meu banco só pra gente ter um o estado mais limpo aqui vou adicionar uma transação teste salvei se eu editar ela e colar test do e adicionar que que vai acontecer vai criar outra porque ele tá chamando isso aqui de novo ó await creates então o que que eu posso usar aqui galera eu posso usar isso aqui ó upsert do Prisma

E aí eu vou ter que fazer o seguinte eu vou ter que receber o ID que vai ser opcional porque o ID eu só vou receber se for uma atualização concorda E aí eu vou primeiro se tiver uma transação onde o ID seja igual ao ID que eu tô recebendo eu vou fazer o qu galera o update que que eu vou atualizar Vou atualizar tudo certo então vou passar basicamente o params aqui senão eu vou criar para E aqui eu tenho que passar também o user ID como eu tava fazendo antes e aqui eu posso

passar também o user ID Então cara olha que interessante ó eu vou procurar uma transação com o ID que eu tô passando para cá se eu achar eu vou atualizar ela senão vou criar uma nova Então isso é um up search Ok eu vou mudar isso aqui agora para up search transaction eu posso mudar tudo de uma vez já se eu vier aqui no vs code buscar colocar isso aqui ó para ser considerar Maiúscula e minúscula marcar isso aqui eu vou colocar up search transaction agora vai ser up search não vai mais ser ads E

aí eu vou agora colocar maiúsculo aqui up search maiúsculo Hum acho que eu fiz besteira hein aqui eu também coloquei no buron obser transaction Bon não é isso cara é AD transaction buron aqui ó transaction B perdão Tur Beleza então agora tá search transaction bacana Fechou agora eu preciso passar para cá o ID lembra que esse form Skema não tem o ID tá galera não tem então eu posso receber como prop aqui galera o qu Open Def values e transaction ID Se eu receber isso aqui é aqui é uma atualização Beleza então aqui no daa

quando eu chamar esse transaction vou passar todo o daa o transaction id e o ID vai ser transaction ID que eu vou receber Aqui como prop perfeito beleza turma então agora aqui no meu na minha no meu Edit transaction Button eu tenho que passar também o transaction ID que vai ser transaction.id então vou passar como id o id da transação que eu estou editando Então agora eu vou editar deixa eu recarregar a página só para garantir vou editar esse teste para teste C Salvei atualizou Olha que sensacional galera Vou atualizar a data dele para dia

22 atualizou cara olha que coisa linda vou atualizar o valor atualizou beleza tá funcionando galera agora eu só preciso mudar esse texto aqui de adicionar para atualizar né então aqui noser transaction dialog eu posso até criar uma variável aqui ó is updates que vai ser um bullan transaction ID se isso aqui vier ah definido isso aqui é verdadeiro então aqui ó vou colocar se é Atualização vou colocar atualizar se não Criar e como a gente não tem nenhuma regra específica turma para criação e atualização tudo bem você fazer assim você fazer tudo em um componente

Só se você tivesse mais de sei lá uma regra específica para cada caso aí acho que já não faria sentido Ok mas no nosso caso serve perfeitamente e aqui também se for atualização vai ser atualizar senão vai ser Adicionar beleza ó então agora venho para cá atualizei posso até mudar o tipo dela ó investimento galera coisa linda hein coisa linda turma tá show demais hein show demais turma então tá dando um erro aqui vamos ver o que que é não tô usando esse Import então nós basicamente galera jogamos o formulário para um componente por quê

Porque a gente quer exibir o mesmo formulário clicando em dois botões diferentes então a gente jogou esse formulário para um componente Certo a gente usou esse componente para abrir o dialog quando clicar no botão de editar E aí a gente passa os valores padrão Passamos o transaction ID porque é uma atualização nesse caso e a gente atualizou a nossa Action também para fazer esse up search eu posso até mudar o nome aqui da pasta para up search transaction fechou turma coisa linda vamos então fazer o commit vamos lá então fits Ensure transaction can be upt

então a gente tá garantindo que uma Transação pode ser atualizada perfeito galera show de bola turma a gente vai finalizar a aula por aqui porque já ficou muito conteúdo massa para você espero que você esteja gostando deixe seu feedback aqui até agora da F quick nos comentários para eu saber a sua opinião tô muito feliz porque o nosso projeto tá ficando massa demais e amanhã não fica de fora 20 horas temos o Encontro Marcado ao vivo aqui no meu canal a gente vai tirar as dúvidas de Vocês então se você tem alguma pergunta dúvida dificuldade

participa da Live de amanhã e cara Amanhã a gente vai dar todos os detalhes sobre a melhor abertura de todas do F Club a gente vai divulgar a condição super especial que a gente preparou para essa black friday então não perde a Live de amanhã porque você vai saber tudo sobre a oportunidade que você vai ter perfeita para você entrar no melhor ambiente para você crescer como deve que é o f Club que é o Meu ecossistema para você que vai fazer você dar o seu próximo passo como deve fechou e a letra do certificado

hoje antes que você fale ah cadê a letra do certificado tá tá hoje é a letra f f de Felipe então Guarda aí a letra de hoje é F no final do evento você vai ter aí formado a senha necessária para emitir o seu certificado Fechou então te vejo amanhã às 20 horas ativa o lembrete eu te vejo amanhã não fica de fora e a gente tem encontro marcado amanhã e a Gente se vê também durante as próximas aulas aí da F quick l