import * as React from "react" ; import { DashboardActivitySelectableItemProps } from "./DashboardTypes" ; import DashboardActivityItemTitle from "./DashboardActivityItemTitle" ; import { StyledDashboardActivityItem , StyledChallengeIDKicker , StyledItemCheckboxContainer , StyledDashboardActivityItemDetails , StyledNumTokensContainer , } from "./DashboardStyledComponents" ; const ItemCheckbox = props => { const challengeID = props . appealChallengeID || props . challengeID ; const handleChange = ( event ) => { props . toggleSelect ! ( challengeID ! , event . target . checked , props . salt ) ; } ; return < input type = "checkbox" onChange = { handleChange } / > ; } ; export const DashboardActivitySelectableItem = props => { if ( props . challengeID && props . appealChallengeID ) { throw new Error ( "DashboardActivitySelectableItem: cannot have both challengeID and appealChallengeID props" ) ; } let challengeIDDisplay = "Challenge" ; if ( props . challengeID ) { challengeIDDisplay = `Challenge #${ props . challengeID }` ; } else if ( props . appealChallengeID ) { challengeIDDisplay = `Appeal Challenge #${ props . appealChallengeID }` ; } return ( < StyledDashboardActivityItem > < StyledItemCheckboxContainer > { props . toggleSelect && ItemCheckbox ( props ) } < /StyledItemCheckboxContainer> < StyledDashboardActivityItemDetails > < StyledChallengeIDKicker > { challengeIDDisplay } < /StyledChallengeIDKicker> < DashboardActivityItemTitle title = { props . title } viewDetailURL = { props . viewDetailURL } / > { props . children } < /StyledDashboardActivityItemDetails> { props . numTokens && < StyledNumTokensContainer > + { props . numTokens } < /StyledNumTokensContainer>} < /StyledDashboardActivityItem>); } ;