Resumo do Vídeo

no vídeo anterior nós fizemos a validação, mostrando o mensagem de erro aqui para cada campo de texto, esse caso de título não pode estar em branco e o conteúdo tem que ter alguma coisa assim por diante, mas tem também outra coisa aqui que a gente ainda não fez foi, é o negócio do botão de ok, você note que se eu clicar no novo post e clicar no novo post, ele cria um novo post que é vazio, a gente não quer que isso aconteça, entendeu? Não, porque é a realzir isso, que acontece. Vamos aqui, a gente vê o post aqui, está vazio, fazer de novo, novo post, clicar ok, e pareceu que o cara aqui é vazio, eu cliquei no cara vazio, então vamos lá, o que a gente vai fazer? A gente tem que desabilitar o ok se qualquer um desses campos estiver inválido, certo? Agora o botão é enderezado usando a totable opacity, um componente chamado totable opacity, que quando você clica e segura, aparece esse negócio, eu estou clicando e segurando o botão, esse que o totable opacity faz visualmente. Agora esse cara, se você olhar na documentação, eu estou aqui na documentação do yaknere, versão 36.36 totable opacity, certo? Ele pega as propriedades do totable without feedback, eu vou clicar lá, e as propriedades de um dos delas é disabled, essa que a gente quer, para desabilitar o botão, então se esse propriedade for dada com o valor true, vai desabilitar o botão, desabilita todas as interações com esse componente. Então vamos tentar lá, vamos ver. Então só para testar, estou no totable opacity, do ok, eu vou adicionar disabled, certo? True. Vou salvar, eu tenho hot reloading, então ele já dá uma atualizada, e mantém o membro estado, volta para o mesmo par. Senorte eu estou clicando aqui, e nada acontece, eu estou clicando no botão ok, e nada acontece, porque está desabilitado, certo? Se eu tirar esse cara e botar false, ou tirar a propriedade, senorte já funciona de novo. Certo? Vou voltar para true. Só um talk aqui, se você não souber desse negócio, se você tiver uma propriedade que é boolean, é verdade ou false, você não precisa fazer explicitamente true, você pode deixar assim, em please, o valor implícito do disable vai ser true, certo? É a mesma coisa desses caras aqui, só para você saber, então vou salvar, só para demonstrar, nada acontece quando eu clico. Porque esse cara em please, o valor em please disable já é true, certo? Eu gosto de fazer assim, deixar assim. Mas a gente tem que definir esse valor para ser desabilitado somente quando tiver um erro. Então como a gente vai fazer isso? Então a gente sabe que vai ter erro se tiver o quê? Vai ter erro se o title error e se o body error, qualquer um dos dois, estiver definido, né? Esses caras aqui, title error e body error, são dados com propriedade ao post porn pelo pai, componente pai, nesse caso a gente está lidando com um novo post, então é post new, componente e esses caras vêm da onde? Vêm do estado do aplicativo que nesse caso foi injetado no componente post new via a função map state to props. Apeou o sub reducer do post porn, chamado post porn, né? Agora vamos aqui voltando a post porn, então a gente quer desabilitar o botão se o quê? Se esse ponto props ponto title error for definido ou se esse ponto props ponto body error for definido? Se qualquer um dos dois for definido, a gente quer que esse cara seja true, né? Note que o valor desse variável aqui vai ser dois. Tem dois casos. O primeiro é se não tiver erro vai ser no, se tiver erro vai ser uma string, certo? Mas no JavaScript a string, se não for vazia, tem valor verdadeiro, certo? Então esse cara vai se tornar verdade, embora que seja uma string. Mas se você quiser realmente forçar esse cara a se tornar valor Boolean de true, você pode usar essa técnica aqui dos dois exclamações, certo? Para demonstrar isso eu vou aqui no navegador, eu vou abrir meu console, certo? Então se eu tiver assim erro aconteceu uma string, né? Deixe aumentar aqui. Esse aqui, se você estiver dentro do if ou no dentro de qualquer negócio, eu vou estar assim. Se for verdadeiro esse cara, se isso for verdadeiro vai dar console log sim. Não deu console log sim, porque esse cara é uma string e foi verdadeiro, né? Mas se você forçar esse cara para ser uma Boolean, essa fazia assim. Se torna true. Por quê? Porque ele pega uma string, quando você dá o operador de negar, esse cara que tem valor verdadeiro, a gente chama true, em inglês, true, contrário, é false. Então vai se tornar false, se estiver só um e põe mais outro para forçar a ser true, certo? E por isso é só, vamos voltar o nosso aplicativo. Se você quiser forçar, pode põe esse cara, mas vai funcionar do mesmo jeito. Certo? Voltando aqui para o simulador. Vamos ver se funcionou aqui. Opa, desculpa. Novo. Opa, o que está acontecendo? Não está funcionando?