Você tá no canal de vela perdak101 e meu nome é Bruno Killer e hoje a gente vai falar de contexto Shape e modais Connect js13. 4 porque a gente teve algumas perguntas essa semana na outra Live que a gente fez na outra semana e nessa Live que a gente fez essa semana eu deixei um desafio para vocês não quis resolver na Live mas eu resolvi abrir o computador aqui e mostrar para vocês como a gente trabalha com a modal e também com a parte de contact e no net a TS 13. 4 aqui no projeto basicamente eu fiz a criação de um projeto inexota s3.
4 E também inicializei o projeto com chat CN Uai porque a gente vai utilizar o dayalog dessa biblioteca tá se por acaso você tiver meio perdido eu vou deixar nos cards aqui a Live que a gente teve essa semana da onde sair um pouco da ideia desse vídeo Se você quiser assistir mas olha o que que a gente vai fazer aqui pessoal aqui nos componentes basicamente eu vou criar uma pasta chamada modal dentro dessa pasta modal a gente vai ter alguns arquivos aqui que a gente vai trabalhar a primeira coisa que eu quero fazer eu quero garantir que a gente tenha uma modal que esteja disponível em qualquer página do nosso projeto então pra gente poder fazer isso a gente tem que controlar essa modal de qualquer lugar e pra gente poder fazer isso a gente vai criar um contexto para a gente poder trabalhar então a gente vai fazer o seguinte vai criar um arquivo chamado modal. context. ts e aqui dentro ele vai ser bem simples pessoal não tem segredo a gente vai utilizar aí use clight para a gente poder trabalhar obviamente com o contexto a gente vai fazer o importe também que o cliente contact do Iate tá pessoal E também o que que a gente vai fazer a gente vai criar uma interface aqui para facilitar a vida né se vocês quiserem depois melhorar isso então vamos criar um modal com text aqui não vou dar o conta que a gente vai ter uma tributo de show que vai ser bureano tá pessoal além disso a gente vai ter um método sete show aqui que vai receber na verdade um valor do tipo bullying também e também ele vai ser uma função que vai retornar vodka então a gente já tem a tipificação aqui para a gente poder fazer o seguinte poder exportar como durante o modal conta que tinha aqui e aqui a gente vai criar o contexto tá criando o contexto aqui a gente vai criar um objeto que vai ter um Show por exemplo falce por que que eu tô colocando esse show falso aqui pessoal para o contexto Inicial e estar com a propriedade show falso para modal não abrir automaticamente e aqui eu coloco modal conta que só para a gente forçar a tipificação do objeto aqui a gente já tem resolvido tudo que a gente precisa aí o que que a gente vai fazer como eu quero que esteja disponível para toda aplicação eu preciso encapsular minha aplicação dentro de um provedor então eu vou criar um modal provar e der para nós aqui então vou vir aqui vou criar um arquivo chamado modal traço provar.
tsx para a gente poder criar esse provar a gente vai utilizar aí o ziclight também e além de a gente vai fazer um importe do que do modal context pessoal que a gente criou importante que você traga esse modo ou contact aqui para que você possa utilizar E aí a gente vai importar também o use state porque a gente precisa ter um estado inicial da nossa modal lá encapeçando a nossa aplicação aí a gente vai vir aqui criar um Phantom modal pro vai dar para a gente poder colocar ele lá dentro no nosso layout tá E aqui dentro a gente só vai fazer o seguinte a gente vai pegar o childre e a gente vai só fazer isso tio o iate ponto iate novo beleza e aqui é super simples pessoal não tem segredo nenhum a gente só vai fazer com que esse contexto ele seja encapsulado então eu vou colocar um aqui pessoal e nesse que a gente tem aqui eu vou pegar o nosso Model contact ponto provider e vou passar um valor para ele Inicial esse valor inicial vai ser o show e vai ser o sete show da onde que vem isso pessoal a gente vai fazer o seguinte como a gente tem que encapsular tudo isso eu vou criar um estado aqui então vou fazer um Coast aonde a gente tem show e sete show e nesse instante aqui a gente vai fazer use state e aqui ele vai ser obviamente buleando e a gente vai passar Qual que é o estado Inicial falso aqui para o nosso projeto inteiro uma vez que a gente tenha esse estado aqui a gente precisa fazer o seguinte a gente precisa criar a nossa modal Então vamos lá a gente vai vir aqui no modal e vai criar adivinha modal. tsx essa modal tsx a gente vai fazer o seguinte pessoal ela vai ser também use Clint né porque tem que ser vai ter interação com o usuário e a gente vai importar algumas coisas aqui tá eu vou colocar uma carinha bonitinha aqui na nossa modal Então vou utilizar aqui do Lucy de iate Então a gente vai trazer aqui a gente vai fazer um também um porte do Daia logo dia isso vai vir dar um de pessoal vai vindo um componente chamado dialo que a gente tem que instalar aqui no nosso aplicativo aonde a gente tem que colocar NPS chá de CN e Uai @leitest. ad Daya logo e aí ele vai adicionar o dayalock para gente tá essa que é a ideia e aí ele já vai vir dentro para gente dar ela errei chá de CN aqui né tem que direito né uma vez que ele tá instalado basicamente ele vai lá e a gente pode trazer ele para dentro do nosso do nosso arquivo aí a gente vai fazer um importe também pessoal no qual a gente vai utilizar e os effect e a gente vai também utilizar o use Contax porque a gente criou o contexto lá né existe tudo vendo no iate tá E aqui dentro também a gente vai fazer um Import do Model context tá porque a gente tem que utilizar o contexto Então a gente vai criar nossa modal fancha modal tá e dentro dessa modal ela não vai receber nada se você quiser depois estender isso é tranquilo e você vai retornar obviamente a nossa modal Vamos criar aqui a nossa modal pessoal vai ser o da a gente vai criar Na verdade o seguinte eu vou copiar isso aqui o que que eu tenho aqui pessoal eu tenho aqui que tem uma propriedade de Open que se vier true ela já abre a modal se vier falso ela bem fechada e eu tenho o on Open Change que é utilizado para a gente poder abrir ou fechar nossa modal Mas da onde que vem tudo isso como a gente tem lá no nosso contexto isso eu venho aqui conte E aí eu tenho o nosso show sete show que a gente vai pegar do contexto e use context que a gente vai pegar do Model conta que a gente criou lá dentro como a gente tem essas duas informações do modal contact a gente tem a possibilidade de utilizar ele aqui dentro e aí o que que acontece na verdade né ele não é uma rei né pessoal desculpa Na verdade ele é um objeto que eu vou desconstruir não e não há rei porque eu não estou utilizando isso state Na verdade ele é use E aí o que acontece basicamente a gente tem tudo funcionando como que a gente vai fazer agora pessoal a lá no nosso lá no nosso layout pessoal o que que vai acontecer a gente vem aqui no nosso app layout e a gente precisa fazer o seguinte a gente precisa uma coisa aqui uma delas a gente tem que pegar o nosso provider que a gente criou e adicionar aqui então a gente vem aqui moda modal pro Viber E aí dentro do modo pro Viber a gente vai manter o nosso tilda ele não importou automaticamente aqui para gente mas a gente pode fazer um corte aqui a gente vem aqui mudam provar pronto o que que ele não tá encontrando meu modo provar aqui pessoal porque eu não exportei voltou colocar o EcoSport do meu mundo provider né pessoal senão ele não vai importar mesmo então vamos lá vamos voltar lá layout eu acho que agora se eu fizer assim ele vai importar o meu modo aprovado e ele tá aqui a outra coisa que a gente precisa vamos pegar aqui Import modo ou provar e outra coisa que a gente precisa é o importe da modal que a gente criou que eu acho que eu também não exportei a nossa modal aqui dentro deixa eu dar uma olhada aqui muda eu fiz tudo isso mas eu esqueci de exportar o nosso ai ai acontece né acontece acontece se mudam e aqui tem a nossa Moodle E aí eu vou fazer o que além do tilder no nosso mundo ao provider a gente vai adicionar a nossa modal para ela ficar disponível em todo local aqui a gente vai fazer um npmdf ele vai fazer o refresh para gente e não acontece nada porque que não acontece nada porque se a gente for lá na nossa modal e a gente olhar tudo que a gente fez aqui tanto nosso provar e a gente começou como falsi né então o que que eu poderia fazer aqui para a gente poder de repente inicializar ela como aberta uma eu poderia colocar os effect aqui dentro tá é uma das opções mas daí ele vai ficar padrão Total aqui dentro e aí você pode fazer uns sete show e a gente pode colocar true e aqui dentro a gente só coloca vazio Se eu fizer isso olha só a nossa modal já tá aqui eu já posso clicar aqui se eu fizer refresh Ela tá aqui funciona o esc também olha só eu posso pegar isso aqui também uma outra maneira vou deixar isso aqui comentado outra coisa que eu poderia fazer também pessoal eu poderia fazer o seguinte pegar no app eu vou criar uma pasta chamada e dentro de about eu vou colocar um pente.
tsx tá essa é uma opção E aí com o about page já tsx O que que a gente vai fazer eu vou vir aqui né vou fazer o seguinte ah fce né e eu vou colocar about aqui dentro posso remover o iate por enquanto e dentro aqui do about O que que a gente pode fazer eu posso vir aqui fazer um const beleza sete show e aqui dentro eu posso fazer o Uzi context e aqui dentro eu vou colocar o nosso Model context vendo isso em vista pessoal o que que eu poderia fazer eu poderia fazer nessa dívida aqui fazer um ples name por exemplo Flex de repente flex com poderia colocar um Space Y de 10 né poderia colocar uma margem top de 10 e aqui eu poderia fazer o seguinte vim aqui dentro colocar por exemplo uma H1 teste vamos fazer assim Power modal uma vez que a gente tem isso aqui eu coloco também um Class name aqui e aí a gente coloca um text 2xl por exemplo e aqui dentro pessoal a gente vai fazer o seguinte vai criar um botão que eu não coloquei aqui ainda que a gente coloca NPS Shed CN ui@latest AD Butter ele vai instalar o botão aqui para gente a gente já Restart do nosso servidor aqui e aqui dentro a gente quer um contra o espaço cria um botão aqui dentro e aqui a gente tem essa parte aqui a gente pode colocar um clique pessoal aqui dentro e colocar uma função anônima basicamente para dizer sete show e colocar trum se eu salvar aqui pessoal Olha só eu venho no about e esqueci aqui te fazer uma coisa aqui que é fazer um E aí tem um botão de modal gigante que eu não sei porque que eu fiz esse botão de modal gigante porque na verdade a gente tem que colocar um justift faz Center e um itens E aí a gente tá bonitinho aqui se eu clicar aqui no botão ele abre a modal pra gente aperto esclero aqui opa opa opa passando aqui para lembrar você de deixar aquele like se inscrever no canal ativar o Sininho e Óbvio deixa os seus comentários aí valeu Bora para o vídeo galera revisando O que que a gente fez aqui super simples mudar com chá de sene Uai utilizando a nossa parte de conta que Shape a gente foi lá criou um contexto aonde a gente cria o contexto com tipo show Poliano para mostrar ou não e uma função aqui coloco para começar como falsa depois a gente cria um provaíder para a gente poder encapsular o modal contect ponto pro Viber porque ele não pode ser colocado diretamente no nosso layout porque ele é um react server components aqui a gente já cria um estado geral para essa modal passa como o valor para a gente poder acessar nos componentes que vão utilizar o use contact e aí na modal a gente cria ela que super simples utilizando use com text aqui que a gente criou e sempre que a gente quiser inicializar essa modal diretamente é super super simples Olha só se eu for nabout aqui olha só a nossa página about olha só ela vem com a modal fechada certo mas se eu vier aqui ó colocar um useffect de comentar esse sete show aqui e obviamente vir aqui e importar e os efet olha só a nossa moda quando a gente vem no about ela já vem abertinha para a gente não tenho mais o que falar se você é novo aqui não se esqueça de se inscrever ativar o Sininho e deixar o like e comentar o vídeo se você já está me acompanhando algum tempo já sabe que para me apoiar e sair compartilhando colocando receita de bolo qualquer coisa que nos comentários e se quiser fazer parte dessa família e garantir que vai ter vídeo vídeo vídeo assina o canal que não custa nem um suco de laranja nem um cafezinho por mês é tipo 26 centavos 25 26 centavos por dia para você ter um conteúdo como esse te vejo no próximo vídeo e não se esqueça de dar uma olhada na Live que a gente fez essa semana apavorando né que já tá esse 13. 4 netshop Prisma modais interceptação de rock groups e obviamente você não conhece a Master clash JS 13.
