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