import React, { Component } from "react"; import Candidate from "./Candidate"; import { getCandidateList } from "../helper"; import { Form, Card } from "semantic-ui-react"; import { reelectedCandidates } from "../constants"; class ListCandidates extends Component { constructor(props) { super(props); this.state = { candidates: {}, currSelection: "" }; } componentDidMount() { this.setCandidateList(); } setCandidateList = async () => { const candidates = await getCandidateList(); this.setState({ candidates }); }; onSelect = (name) => { const { updateVote, position, reelect } = this.props; const candidateName = reelect ? Object.keys(name) : name; const candidateRanking = reelect ? Object.values(name) : null; this.setState({ currSelection: name }); updateVote({ position, candidateName, candidateRanking }); }; renderCandidates = (position) => { const { reelect, voteMethod } = this.props; const { candidates, currSelection } = this.state; let currCandidates; if (reelect) { currCandidates = reelectedCandidates; } else if (candidates[position]) { currCandidates = candidates[position]; } if (currCandidates) { return Object.keys(currCandidates) .sort() .reverse() .map((candidateName) => ( <Candidate position={position} key={candidateName} candidateName={candidateName} currSelection={currSelection} onSelect={this.onSelect} reelect={reelect} voteMethod={voteMethod} /> )); } }; render() { const { position } = this.props; return ( <Form> <Form.Group grouped widths="equal"> <Card.Group stackable itemsPerRow={3}> {this.renderCandidates(position)} </Card.Group> </Form.Group> </Form> ); } } export default ListCandidates;