tasks-mockup/src/components/task-row.js
2019-06-22 08:07:37 -04:00

38 lines
958 B
JavaScript

import React from 'react'
const TaskRow = props => {
const { task } = props
const project = props.projects.find(p => p.id === task.projectId) || 'None'
const projectName = project.name || 'None'
return (
<li className="list-group-item" key={task.id} onClick={props.editTask}>
<button
className="btn btn-outline-danger mr-1"
onClick={() => props.deleteTask(task.id)}
>
X
</button>
<span>{task.desc}</span>
{!props.selectedProjectId ? (
<button
className="btn btn-outline-dark ml-5"
onClick={() => props.selectProject(task.projectId)}
>
{projectName}
</button>
) : null}
<button
className={`btn btn-${
task.completed ? 'secondary' : 'outline-success'
} float-right`}
onClick={() => props.completeTask(task.id)}
>
&#10004;
</button>
</li>
)
}
export default TaskRow