Dashboard - Validações e formatação

Campos de data e hora

Existem vários tipos de inputs como date, time, tel, email que modificam o formato do input ( cada navegador tem uma interface diferente) e deixam o HTML mais semântico.

Para adicionar uma nova task temos os campos Data e Hora:

src/components/ModalFormTasks/index.js:

<div> <label> Date <input type="date" onChange={e => setDate(e.currentTarget.value)} /> </label> <label> Hour <input type="time" onChange={e => setHour(e.currentTarget.value)} /> </label> </div> 

E para dar uma 'descolada' do texto dos campos na lateral, vamos dar um espacinho nesses inputs:

src/components/ModalFormTasks/styles.js:

label { ... input[type=time], input[type=date] { padding-left: 5px; } ... } 

Toda as modificações acima podem ser encontradas aqui

Obrigando o preenchimento de todas as informações

Hoje temos um problema, que se o usuário não preencher as informações, mesmo assim estamos criando uma task, e assim deixando a task em branco. Para resolver isso, sempre que o usuário não preencher as informações vamos mostrar um alerta, para lembra-lo.

Uma maneira simples de fazer isso é verificando se os valores estão preenchidos antes de adicionar uma nova tarefa, e caso não estejam, mostramos um alerta:

src/components/ModalFormTasks/index.js:

function handleSaveTask() { if ( title && description && date && hour && responsable && status) { handleAddTask({ title, description, date, hour, responsable, status, }) onClose() } else { alert('Preencha todos os campos.') } } 

Toda as modificações acima podem ser encontradas aqui