Resumo do Transcript

Então vamos agora validar o campo do conteúdo da mesma maneira que nós fizemos um título, certo? Então, no momento que você digitar alguma coisa, vai chamar a função onBodyChange, certo? O que a gente vai fazer? Vamos ver a mesma coisa de antes, vai checar se o body ou vazio está inválido, né? Então vou dar desse ponto props, changePoseError, qual é o campo, body e descrição do erro? Vou só copiar. Eu vou dar um parajeitado em branco, vazio e se não tiver nenhum erro, nós vamos apenas recetar o erro. Caso a gente já tenha um erro e a gente corrige o erro, vai tirar aquela cor vermelha do fundo. Então vamos de novo, desse ponto props, changePoseError, vamos recetar o erro do body, opa, certo? Então vamos lá, está tudo ok. Então uma coisa, apaga tudo, nada aconteceu, porque nós esquecemos de mudar o estilo do campo de conteúdo, mas se eu der um console log aqui, conteúdo está inválido, vai aparecer, vou olhar aqui, tenho modificado, conteúdo está inválido, certo? Então vamos lá, vamos mudar esse acordo de fundo, background, cola para vermelho. Então vamos voltar ao postform e dar aquele estilo, está aqui, estou no postform na função render, certo? Você note o text input, o segundo text input se refere ao conteúdo, tem esse estilo com height e border, certo? Então vamos remover esse cara. Vamos adicionar aqui outro objeto que define o estilo e se tiver o bodyError, certo? Se lembra do bodyError foi propriedade que injetamos usando o map, dispatch to props lá embaixo, desculpa, que foi injetada a esse componente postform do postnew, certo? O postnew aqui na função render, ele manda essa prop chamada bodyError, certo? Que a gente se não pôs ainda, então vamos pô, o bodyError vai ser des, ponto props, ponto bodyError. Essa propriedade que é passada para o postform chamada bodyError é injetada no postnew, certo? Des, ponto props bodyError lá embaixo usando o map state to props, está bom? Está aqui já, voltando aqui para o postform. Se tiver eu, você adiciona propriedade para o input bodystyle, background color vai ser red, certo? E agora, volta aqui no text input e põe input bodystyle. Agora vamos aqui. Salvar, esqueci de salvar, salvar, certo? Vermelho. Então está tudo certo agora. Vamos revisar mais uma vez aqui. Lá no postform reducer, nós adicionamos duas propriedades chamadas titleError e bodyError, cujo valor é no se não tiver nenhum erro ou um string que descreve o erro, certo? Quando você digitar alguma coisa lá no postform aqui, vai chamar a função onChange, então aqui no postnew, onBodyChange, a função vai checar o body, se a gente digitou algo e apagou tudo e a body estiver vazia, vai chamar actionCreativeChangePostError, com dois argumentos, o primeiro sendo o campo em questão e o segundo sendo a descrição desse erro do campo body. Nesse caso, com o string estar vazia, você não digitou nada, isso é um erro, o conteúdo não pode estar vazio, em branco. Por causa disso, o postnew que lá embaixo tem um maps.tip props, ele extrai o titleError e o bodyError do estado do aplicativo e injeta e dá como propriedade ao postform o titleError e bodyError que vem desses caras aqui das props do postnew. E lá dentro do postform, a gente checa se tiver algum erro no conteúdo, você sete o background para vermelho e como está usando essa variável input bar style, é usada como estilo aqui. Certo? Contando aqui o postnew, você note que a gente fez quase a mesma coisa no ontário change e no ontário change. Se você se ver repetindo as coisas, sempre é bom pensar em alguma maneira de ser menos repetitivo. E é isso que a gente vai fazer no próximo vídeo. Até a próxima!