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}
/>
))
}
Top comments (0)