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 => (
- )}
+ ))}
)
}