File size: 3,109 Bytes
050d2e1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
import PropTypes from 'prop-types';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTrash } from '@fortawesome/free-solid-svg-icons/faTrash';
import faCheckSquare from '@fortawesome/fontawesome-free-regular/faCheckSquare';
import faSquare from '@fortawesome/fontawesome-free-regular/faSquare';
import './ItemDisplay.scss';
export function ItemDisplay({ item, onItemUpdate, onItemRemoval }) {
const toggleCompletion = () => {
fetch(`/api/items/${item.id}`, {
method: 'PUT',
body: JSON.stringify({
name: item.name,
completed: !item.completed,
}),
headers: { 'Content-Type': 'application/json' },
})
.then((r) => r.json())
.then(onItemUpdate);
};
const removeItem = () => {
fetch(`/api/items/${item.id}`, { method: 'DELETE' }).then(() =>
onItemRemoval(item),
);
};
return (
<Container fluid className={`item ${item.completed && 'completed'}`}>
<Row>
<Col xs={2} className="text-center">
<Button
className="toggles"
size="sm"
variant="link"
onClick={toggleCompletion}
aria-label={
item.completed
? 'Mark item as incomplete'
: 'Mark item as complete'
}
>
<FontAwesomeIcon
icon={item.completed ? faCheckSquare : faSquare}
/>
<i
className={`far ${
item.completed ? 'fa-check-square' : 'fa-square'
}`}
/>
</Button>
</Col>
<Col xs={8} className="name">
{item.name}
</Col>
<Col xs={2} className="text-center remove">
<Button
size="sm"
variant="link"
onClick={removeItem}
aria-label="Remove Item"
>
<FontAwesomeIcon
icon={faTrash}
className="text-danger"
/>
</Button>
</Col>
</Row>
</Container>
);
}
ItemDisplay.propTypes = {
item: PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
completed: PropTypes.bool,
}),
onItemUpdate: PropTypes.func,
onItemRemoval: PropTypes.func,
};
|