feat: 당선자, 반대 후보 목록 추가

src/components/Result.tsx

@@ -16,41 +16,32 @@ const Response = ({member}: any) => (
 
 const Result = () => {
  const [agrees, setAgrees] = React.useState<any[]>([])
- // const [disagrees, setDisagrees] = React.useState<any[]>([])
+ const [disagrees, setDisagrees] = React.useState<any[]>([])
 
  const fetchResponses = async () => {
  const { data: responses } = await client().get(`/api/responses`)
  const agreedCandidates = await joinPersonalInfo(responses.agreed)
- // const disagreedCandidates = await joinPersonalInfo(responses.disagreed)
+ const disagreedCandidates = await joinPersonalInfo(responses.disagreed)
  setAgrees(agreedCandidates)
- // setDisagrees(disagreedCandidates)
+ setDisagrees(disagreedCandidates)
  }
 
  async function joinPersonalInfo(candidates: any) {
  return Promise.all(candidates.map(async (candidate: any) => {
- const candidateInfo = await fetch(`/candidates/${candidate.id}.json`).then((res) => res.json())
+ const { data: candidateInfo } = await client().get(`/api/candidates/${candidate.id}`)
  const { choice, id } = candidate
  return { candidate: candidateInfo, choice, id }
  }))
  }
 
+ const electedAgrees = agrees.filter(e => e.candidate.elected)
+
  React.useEffect(() => {
  fetchResponses()
  }, [])
 
  return (
  <div>
- {/* <div>
- <h3 className="title">찬성한 당선자 목록</h3>
- <ul className="list">
- {agrees.filter(e => e.candidate.elected).map(response => (
- <li key={`elected-${response.id}`} style={{padding: '5px 0'}}>
- <Response member={response.candidate}/>
- </li>
- ))}
- </ul>
- </div> */}
-
  {agrees.length > 0 &&
  <div>
  <h3 className="listTitle">동의한 후보 {agrees.length}명</h3>
@@ -64,9 +55,20 @@ const Result = () => {
  </div>
  }
 
- {/* {disagrees.length > 0 &&
+ <div>
+ <h3 className="listTitle">찬성한 후보 중 당선된 후보 {electedAgrees.length}명</h3>
+ <ul className="list">
+ {electedAgrees.map(response => (
+ <li key={`elected-${response.id}`} style={{padding: '5px 0'}}>
+ <Response member={response.candidate}/>
+ </li>
+ ))}
+ </ul>
+ </div>
+
+ {disagrees.length > 0 &&
  <div>
- <h3 className="listTitle">반대한 후보 목록</h3>
+ <h3 className="listTitle">반대한 후보 {disagrees.length}명</h3>
  <ul className="list">
  {disagrees.map(response => (
  <li key={`disagree-${response.id}`} style={{padding: '5px 0'}}>
@@ -75,7 +77,7 @@ const Result = () => {
  ))}
  </ul>
  </div>
- } */}
+ }
  </div>
  )
 }