Dashboard - Criando Task

Adicionar um botão fechar no modal

Adicionar o botão no componente ModalFormTask

receber `onClose` como prop

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

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

button + button {
  right: 8rem;
}

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

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

<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)

<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

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.

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

<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

<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

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

<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

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

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

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

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

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

<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

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

<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

<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

{
  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

{
  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}
    />
  ))
}