Merge pull request #58 from NullFull/feat/add-elected

찬성한 후보 중 당선자, 반대한 후보 목록 추가

Author: limkhl

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>
     )
 }