Dashboard - Criando Task
Published: 2022-02-10 11:13:17

## Adicionar um botão fechar no modal

Adicionar o botão no componente ModalFormTask

```jsx
receber `onClose` como prop

<button onClick={onClose}>fechar</button>
```

adicionar um style para o botão não ficar em cima do outro

```css
button + button {
  right: 8rem;
}
```

Na page `Task/index.js` criar um estado para abrir/fechar o modal

```jsx
const [showModal, setShowModal] = useState(false)

{showModal &&
    <ModalFormTasks
      onClose={() => setShowModal(false)}
    />
  }
```

## Abrir modal ao clicar no `+` da coluna

No componente da coluna recebermos a prop *`onShowModal`, e* passamos para o botão

```jsx
<button onClick={onShowModal}>
  <img src={IconPlus} alt="Add" />
</button>
```

E na chamada do componente passamos a função para abrir o modal como prop para o componente filho (Column)

```jsx
<Column
  name="In progress"
  value="0"
  theme="yellow"
  icon={IconInProgress}
  **onShowModal={() => setShowModal(true)}**
>
  <CardsTasks />
</Column>
```

## Abrir o modal com o status pré preenchido

Criamos um estado para o status default

```jsx
const [defaultStatus, setDefaultStatus] = useState('to do')
```

Criamos uma função para alem de abrir o modal, também atualizar o status default, que recebe um status como parâmetro.

```jsx
function handleOpenModalWithDefaultStatus(status) {
  setDefaultStatus(status)
  setShowModal(true)
}
```

Agora podemos modificar a função de `onShowModal` para alem de abrir o modal também atualizar o status conforme o botão da coluna

```jsx
<Column
  name="To do"
  value="0"
  theme="pink"
  icon={IconTodo}
  onShowModal={() => handleOpenModalWithDefaultStatus('to do')}
>
  <CardsTasks />
</Column>
<Column
  name="In progress"
  value="0"
  theme="yellow"
  icon={IconInProgress}
  onShowModal={() => handleOpenModalWithDefaultStatus('in progress')}
>
  <CardsTasks />
</Column>
<Column
  name="Done"
  value="0"
  theme="green"
  icon={IconDone}
  onShowModal={() => handleOpenModalWithDefaultStatus('done')}
>
  <CardsTasks />
</Column>
```

Com o status default sendo preenchido conforme o click da coluna, podemos passar o status para o modal. Recebemos *`defaultStatus`* como prop, e adicionamos o valor no select

```jsx
<select defaultValue={defaultStatus}>
    <option value="to do">To do</option>
    <option value="in progress">In progress</option>
    <option value="done">Done</option>
  </select>
```

## Modificando o form do modal para utilizar o estado

Começamos criando os estados

```jsx
const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const [date, setDate] = useState('')
const [hour, setHour] = useState('')
const [responsable, setResponsable] = useState('')
const [status, setStatus] = useState(defaultStatus)
```

E depois adicionamos uma função para o `onChange` de cada input

```jsx
<input onChange={e => setTitle(e.currentTarget.value)} />
```

Vamos adicionar um console ao clicar em salvar, para visualizar se os estados estão sendo preenchidos corretamente

```jsx
function handleSaveTask() {
  console.log({
    title,
    description,
    date,
    hour,
    responsable,
    status,
  })
}

<button type="button" onClick={handleSaveTask}>Save</button>
```

## Adicionar uma nova task

Começamos criando um estado para armazenas as atividades

```jsx
const [tasks, setTasks] = useState([])
```

Vamos criar uma função bem simples para receber uma task e adiciona-la a lista

```jsx
function handleAddTask(task) {
  setTasks([...tasks, task])
}
```

Vamos passar para o modal a função para adicionar uma nova tarefa

```jsx
<ModalFormTasks
  onClose={() => setShowModal(false)}
  defaultStatus={defaultStatus}
	handleAddTask={handleAddTask}
/>
```

No modal, recebemos a nova prop, e ao clicar em salvar chamamos a função de adicionar tarefas passando as informações da nova tarefa

```jsx
function handleSaveTask() {
  handleAddTask({
    title,
    description,
    date,
    hour,
    responsable,
    status,
  })
}
```

## Mostrando as tasks criadas

Para mostrarmos as tasks criadas, vamos criar um map e passar para o componente `CardsTasks` as informações

```jsx
<Column
  name="To do"
  value="0"
  theme="pink"
  icon={IconTodo}
  onShowModal={() => handleOpenModalWithDefaultStatus('to do')}
>
  {
    tasks.map(task => (
      <CardsTasks
        title={task.title}
        description={task.description}
        date={task.date}
        hour={task.hour}
        responsable={task.responsable}
        status={task.status}
      />
    ))
  }
</Column>
```

e temos que modificar o componente `CardsTasks` para ser dinâmico e receber as informações como props

```jsx
<ContainerCardsTasks>
    <h4>{title}</h4>
    <p>{description}</p>

    <FooterCards>
      <time>{date} {hour}</time>
			<p>{responsable}</p>

      <div>
        <ContainerAvatar />
        <img src={IconEdit} alt="Edit" />
      </div>
    </FooterCards>
  </ContainerCardsTasks>
```

## Separando as tasks por status

Para listarmos somente a tarefa de cada status em sua respectiva coluna, podemos adicionar uma função de filtro antes do map

```jsx
{
  tasks.filter(t => t.status === 'to do').map(task => (
    <CardsTasks
      title={task.title}
      description={task.description}
      date={task.date}
      hour={task.hour}
      responsable={task.responsable}
      status={task.status}
    />
  ))
}
```

## Adicionando KEY no map

Para o React atualizar o seu componente corretamente, é uma boa prática adicionar a prop `key` ao seu componente, quando utilizar a função `map`

```jsx
{
  tasks.filter(t => t.status === 'in progress').map((task, index) => (
    <CardsTasks
      key={index}
      title={task.title}
      description={task.description}
      date={task.date}
      hour={task.hour}
      responsable={task.responsable}
      status={task.status}
    />
  ))
}
```