Resumo do Transcript

Oi, tudo bem? Vamos aprender a usar a função FAT para fazer pedidos PAT e DELETE agora para a gente poder editar o perfil e também deletar o perfil de eu, pessoal. Então o que a gente vai fazer? Vamos olhar aqui no wireframe. Eu modifiquei esse wireframe, botei o botão editar e dela está aqui. O que eu quero fazer na verdade? Eu quero deixar esses campos, mas eu quero botar esses botões aqui. Quero copiar aquilo, mano. Por exemplo, em vez de criar, vou botar eles aqui, tá bom? Isso que a gente vai fazer agora. Então eu quero inicialmente, quando eu rodar aplicativo, o seu nome e a idade já vão estar aqui automaticamente. Então a gente vai poder editar, digitar outra coisa, modificar o nome e clicar editar para atualizar no banco de dados. E o outro botão, a gente vai, quando clicar, deletar esse perfil desse cara e vamos ver como é que faz no FAT. Vamos voltar aqui e já tenho os campos aqui. Vamos tirar esse criar e eu quero pôr o botão editar e o botão de dólar. Vamos só comentar isso. Vamos fazer assim. Tá bom? Todo entre esses chaves e esses comentários aqui. Você comentário, comentado aqui. Vamos tirar esse botão e vamos para o outro. Vamos por aqui. Vamos botar um touch de highlight para o botão. Põe o outro aqui para fechar e dentro tem que ter o texto. Qual que é o texto aqui? Vamos botar editar. Vamos botar o style para acessar os botões e vamos botar on press para fazer alguma coisa. Quando apertar ou tocar esse botão. Tá bom? Vamos botar o estilo para o texto, style, styles, textos do botão. Tá bom? Só copiando o que já tem aqui. Já tá lá. Vamos botar um outro. Copie outro aqui. E esse botão, nos casos, vamos fazer esse VG editado, eletar. Agora vamos botar o on press aqui. Vou definir como não agora, só para ver como é que aparece lá. Se você não definir o propriedade on press vai dar erro. Tá aí. Mas eu quero botar no mesmo, a mesma linha. Então agora o flexbox, você se lembra do flexbox? O padrão vai por coluna, o flex direction aqui. Eu botei explícito aqui, mas o padrão coluna vai de linha por linha. Então o eixo principal, o main axis, é aqui, verticalmente. Então eu quero pôr para essa área aqui, um eixo principal horizontalmente. A gente pode botar uma vio aqui, dentro dessa vio vai ter esses dois botões. Tote-bo highlights. E eu botar o flex direction row, que vai ser na mesma linha. Então o eixo principal dessa vio vai ser assim, horizontal. Então vamos fazer isso. Vamos pegar esses caras e botar dentro de uma vio. Vio, fecha o vio aqui. Tá bom. E vamos botar um estilo aqui. Vamos botar styles. Vamos chamar de, sei lá, botões de baixo, sei lá. E vamos definir aqui, botões de baixo. Vamos botar uma flex direction row. Vê o que acontece. Tá aí, né? Vamos ver aqui, o ver está comando D. Vou botar, mostrar o inspector, show inspector. E vou clicar aqui. Esse cara aqui, eu quero saber o que é que ele está contendo. Parece que não dá para clicar na vio aqui. Porque acho que você botar assim. Esse aqui é o eixo principal. Então eu quero fazer... Align self-stretch. Vê se isso vai funcionar. Ok, vou botar aqui. Tá aí. Eu botei o align self-stretch para a vio. Essa vio aqui poder ocupar toda a linha. Espaço dessa linha aqui. Antes estava só ocupando no meio, assim, dessa parte aqui para essa parte aqui. Por isso que eu não podia clicar, mas agora posso clicar aqui. Então as contências do botão. Se eu quiser alinhar esses botões no meio, o que a gente vai fazer é assim. Primeiro a gente ver qual é a direção flex. A direção flex é row. Então vai da linha. Então o eixo principal, o main axis, né? Main axis. É aqui, horizontalmente. Então a gente quer alinhar horizontalmente no main axis, no centro. Para fazer isso a gente vai usar o quê? Vamos ver aqui. Se a gente ver isso aqui, né? No justify content, vamos botar aqui. Center. Vamos ver o que acontece. Bom, então o justify center vai alinhar os itens dentro do container flex. Vai alinhar no eixo principal, o eixo principal horizontal, né? Então vai alinhar no centro do eixo principal, que é aqui. Se eu botar esse flex start, vai ser no começo do eixo principal, que é horizontalmente, porque é row. E que se eu botar n, vai ser aqui, né? Tem também esse space around, que deixa assim, entendeu? Então vamos usar esse space around. Deixa aí. Se eu clicar aqui, tá vendo o que acontece com o space around? Então vamos tirar esse inspector, hide inspector. Então vamos voltar aqui e definir essas funções aqui. Vamos chamar isso de editor. Perfio, ou pessoa, sei lá. Vamos fazer isso primeiro. Deixa o outro para depois, tá? Então vamos voltar aqui. Defini o editor, o prefio. Editor, perfil. Tá lá definido, né? Tá bom, nada acontece, porque a gente não tem nada. Vamos só botar um console log para ver. Vou botar a função. Função editor perfil chamada. Vou abrir o meu navegador, Google Chrome e vou para o meu debugger aqui. Debugger está aqui. Vou abrir o console. Console. Quando eu clicar nesse cara, tá aí. Editor perfil not defined. Será? Por que não está definindo? Será que eu talizei? Not defined. Por que? Porque eu esqueci botar o des. Cadê? Ah... Aqui. Sempre esqueço. Não se esqueça da palavra chave des. Des. Vamos voltar aqui, clicar editar, está funcionando. Está aqui. Tá bom. Agora, antes de a gente ver esse editor, a gente tem que ter os dados, né? Mas agora não está... Quando a gente inicia o aplicativo, não tem nada escrito, não tem nada digitado. Então o que a gente quer fazer é quando a gente inicia o aplicativo, a gente quer pegar os dados do perfil automaticamente. Uma maneira de fazer isso é, todo componente tem uma função chamada component. De mount. Você pode também usar component. Will mount. Tá bom? Tanto faz. Então, deixa eu botar aqui. Component. Did mount. Aqui é um exemplo de outro life cycle method. O método life cycle. Você sabe que o render, né? Essa função é chamada toda vez que o estado do componente é mudado. E essa função component. did mount é chamada uma vez, no momento depois que monta o componente. Tá bom? Quando monta o componente, ele faz alguma coisa. E também o component. Will mount. Que é muito parecido, é certo? Que é chamada um pouco antes do componente. Mount. Pode usar o component.2, vou usar o component.d mount. Então o que a gente quer fazer? Na verdade eu quero pegar as informações, né? Mas a gente já fez isso aqui, não é? Se lembra dessa atualiza info, a gente definiu essa função. Que faz um chama fat. Para requerir as informações da pessoa número 1. Vamos chamar essa função aqui. Só para não ter que digitar de novo. Então quando o componente montar, vamos chamar essa função. Que vai requerir os dados e botar no estado, atualizar o estado. E eu esqueci da palavra chave desde novo. Hoje eu estou esquecendo, muitas coisas. Vamos ver, tá bom, né? Você notou que demorou um pouquinho? Porque a função component.d mount, chamada logo após que monta o componente. Eu já tá aí. Tá bom? Ah, o que é que eu tois? O que aí não tá no inspector? Se eu tirei? Tá aí, de um um. Ah, deu erro aqui no text input. Para a idade. Por que? Tá dizendo que é inválido. Porque no banco de dados, se você notar a idade, é um número. Number, né? Objeto número. Tipo número. Então o text input. Ele recebe um string. Tá bom? Uma maneira de aliviar isso. Só para agora. É só converter a string para o número. Então vamos voltar aqui. Eu vou supôr nessa idade aqui. Quando a gente atualizar informação. Tá bom? A gente está na idade aqui, não é? Mas essa idade é um número. Mas agora que a gente tá usando text input, só aceita string. Então o que que eu vou fazer?