diff --git a/src/components/Pledges.jsx b/src/components/Pledges.jsx index 25edf1b..ffe2692 100644 --- a/src/components/Pledges.jsx +++ b/src/components/Pledges.jsx @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react' +import React, { Fragment, useState } from 'react' import classnames from 'classnames' import Typography from '@material-ui/core/Typography' import Checkbox from '@material-ui/core/Checkbox' @@ -70,7 +70,7 @@ const styles = () => ({ const useStyles = makeStyles(styles) -function TableHeader() { +function TableHeader({ allSelected, selectAll }) { const classes = useStyles() const { tableHeader } = classes return ( @@ -80,27 +80,33 @@ function TableHeader() { Pledge ID Funded on Select all - + ) } -function TableRow({ pledge, amtFormatter, tokenLabel }) { +function TableRow({ pledge, amtFormatter, tokenLabel, selectedPledges, setSelected }) { const classes = useStyles() const { id, amount, creationTime, pledgeState } = pledge + const isSelected = selectedPledges ? selectedPledges.includes(id) : false + const handleChange = () => { + if (isSelected) return setSelected(selectedPledges.filter(p => p !== id)) + setSelected([...selectedPledges, id]) + } return ( {pledgeState} {amtFormatter(amount)} {tokenLabel} {toDecimal(id)} {getDateFromTimestamp(creationTime, true)} - + ) } function Pledges({ match }) { const classes = useStyles() + const [selectedPledges, setSelected] = useState([]) const projectId = match.params.id const { loading, error, data } = useQuery(getProfileWithPledges, { variables: { id: formatProjectId(projectId) } @@ -112,18 +118,25 @@ function Pledges({ match }) { const { pledges, projectInfo: { goalToken } } = data.profile const amtFormatter = getHumanAmountFormatter(goalToken) const tokenLabel = getTokenLabel(goalToken) + const allSelected = selectedPledges.length === pledges.length + const selectAll = () => { + if (allSelected) return setSelected([]) + setSelected(pledges.map(p => p.id)) + } return (
- - {pledges.map(p => + + {pledges.map(p => ( - )} + ))}
) }