Resumo do Transcript

Então vamos lá e começar a trabalhar com a nossa interface. Agora que já temos o negócio do Redux já definido, o Action Creator, o caso da ação e o Reducer lá. Então vamos para o Post New, tá bom? O Post New, vamos aqui voltar para o app para aplicativo, o formulário de novo. Então vamos ver aqui, vamos começar com o título, o título aqui é requerido, tá bom? Então para a gente poder saber quando você digitar alguma coisa se houve um erro ou não, nós vamos usar a função on title change, né? Você note que eu tenho um console log lá, toda vez que eu digito alguma coisa, aparece aqui. Então nós vamos adicionar código a essa função para validar esse campo. Então vamos lá. No on title change do componente post new, antes de mudar o título eu vou validar. Primeira validação aqui é que esse campo é requerido. Então se o título for vazio, né? String vazia está inválido. Nesse caso o que é que a gente vai fazer? Nós temos que indicar, setar aquela propriedade no estudo chamado Tarot Error. A gente criou o action creator chamado change post error que leva dois argumentos aqui, primeiro argumento vai ser o nome do campo que tem o erro e segundo argumento é a descrição. Certo? Título é... Não pode ficar vazio, sei lá, mensagem assim. Título é... Título não pode... Uma coisa assim. Então esse cara vai adicionar um erro para o título. Certo? Vamos salvar aqui. Vou dar um console log para você ver. Título está inválido, só para aparecer lá. Ah, nós usamos o action creator mas nós não injetamos como props a esse componente post new. Então você se lembra como fazer isso? Então pause o vídeo aí e injete esse action creator nesse componente. E aí deu certo? Então vamos lá embaixo. Vamos lá para o map dispatch to props. Vamos adicionar o change post error. Injetá-lo como prop ao componente post new. Como estamos usando o change post error, temos que importá-lo lá em cima nos imports aqui. Action eu vou adicionar change post error. Certo? Agora não vai ter erro. Utilizar o aplicativo e ver se digita alguma coisa. Está válido. Agora está inválido porque não tem nada. Parece eu aqui. Digitar, digitar e assim por diante. Certo? Então vamos agora fazer com que essa caixa de texto fique vermelha se for o título foreign válido. Nesse caso nós estamos lidando com o estilo desse text input. Nós podemos adicionar o estilo para a cor do fundo para ser vermelho. Certo? Se tiver um erro. Vamos fazer isso. Vamos lá. Vamos dar uma olhada no código da função de render. Render aqui. Está usando post form. Certo? E dentro do post form. Vamos lá para o post form. O post form é só um componente normal assim. Não é conectado ao redux. Então a gente vai ter que arranjar uma maneira de fazer esse cara ter acesso àquele erro do estado. Mas antes disso vamos lá ver onde está aquele text input para o título. Esse cara aqui. Então você nota se eu adicionar o estilo aqui. Background color red vermelho. O cara vai ficar vermelho lá. Cender assim que a gente quer. Algo assim. Então para fazer isso o que eu vou fazer? Então eu vou tirar esse cara aqui. Estrair para fora aqui. Fazer um variável. Certo? Vai ser... Sei lá. Vou chamar input style. E vou remover esse background red. Certo? Você vai ver o que eu vou fazer já. Eu vou só extrair o estilo para fora com uma variável. Certo? O que vai acontecer? Se houver um erro nós vamos adicionar aquele background color red. Se tiver um erro nesse caso que? Tiro error. Se tiver um tiro error ainda não definimos isso mas a gente quer fazer algo assim. Vamos adicionar a propriedade ao input style. O background color e vamos setar para red. Algo assim, tá bom? Mais um dia que vai... De onde é que vai ver esse title error? Nós podemos passar como prop. Tá bom? É uma das maneiras. Mais um ponto prop no title error. Se tivesse cara definido vamos adicionar red. Certo? Então voltando a false new. Eu vou adicionar a propriedade aqui. Tiro error. Que vai ser da onde? Esse cara vem lá do Redux, né? Estado do aplicativo. Nós vamos injetá-lo como props. Esse componente também. Certo? Então para injetar o title error do estado do aplicativo ao componente false new nós vamos lá embaixo para o map state props. Certo? Vamos pegar do estado state.postform. Você sabe que é the reducer. Postform reducer. Tem aquelas propriedades aqui. Nós extraímos o título e o body, mas também queremos essas duas aqui. Então vamos escrever aqui, vamos extrair também o title error e o body error. Certo? E retorna os mesmos. Certo? Retorna eles, que vai ser agora disponibilizado no post new, que nós iremos usar aqui. Vamos passar como prop ao post form. Esse cara aqui que foi injetado no post new vai ser passado como title error para o post form e o post form recebe seus props e dá uma olhada se tiver algum erro no título. Vai mudar o background para vermelho. Vamos testar. Dilita alguma coisa, tudo ok. Vamos dar tudo. Certo? Agora ficou vermelho. Vamos digitar alguma coisa de novo. Opa, o que aconteceu? Ah, a gente solida com os erros, mas esquece de limpar o erro quando a gente passa todas as condições de erro lá no title change. Então a gente tem que adicionar alguma coisa para resetar esse erro. Então vamos lá. Estamos aqui no post new e no title change. Aqui é inválido, não sei o que, não sei o que. Eu vou dar um else aqui e nesse else. Se não foi inválido, eu vou só resetar o erro. Certo? Change post error para o title. Eu vou botar no aqui para resetar o erro. Limpar o erro. Certo? Na próxima vez que você digitar alguma coisa e não tiver nenhum erro, vai só remover qualquer erro que tinha depo antes ou se não tiver nenhum erro não vai fazer nada. Só deixa no de novo. Então vamos testar de novo. Digitar alguma coisa, ter um erro, digitar de novo. Então ficou ok novamente. Certo? Agora como é que é isso? Quero ver você fazer isso, a mesma coisa para o body conteúdo. Certo? Vamos até terminar. Vamos ver a sua solução no próximo vídeo.