From 149c27a02d84b5cfbd7858ef3e0e540285c5e0d5 Mon Sep 17 00:00:00 2001
From: Rokhee LEE <rockey020312@snu.ac.kr>
Date: Fri, 3 May 2024 15:36:50 +0900
Subject: [PATCH] homework finish

---
 src/routes/VoteHistoryPage.jsx | 17 ++++++---
 src/routes/VotePage.jsx        | 64 ++++++++++++++++++++++++++++++----
 2 files changed, 69 insertions(+), 12 deletions(-)

diff --git a/src/routes/VoteHistoryPage.jsx b/src/routes/VoteHistoryPage.jsx
index 2f12755..07d84a1 100644
--- a/src/routes/VoteHistoryPage.jsx
+++ b/src/routes/VoteHistoryPage.jsx
@@ -15,9 +15,16 @@ function VoteHistoryPage() {
 
   const getImages = async () => {
     try {
-      let response;
-      // ### TO DO ###
-      // #############
+      const response = await axios.get(
+        "https://api.thecatapi.com/v1/votes",
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_xEi0AeOWPilSMxy9Gfogg39wSAoPQAEafUTjX90ifRBVjaBvXPEQ4a9l51p5fuU3",
+          },
+        }
+      );
       const data = response.data;
       const imageSet = [];
 
@@ -64,8 +71,8 @@ function VoteHistoryPage() {
               <img
                 key={img.url}
                 src={img.url}
-                className={`object-cover w-full h-full border-[3px] border-[#FF6841] rounded-xl 
-                  ### FILL ME ### 
+                className={`object-cover w-full h-full border-[3px] rounded-xl 
+                  ${img.value < 0 ? "border-red-500" : "border-blue-500"}
                 `}
               />
             </div>
diff --git a/src/routes/VotePage.jsx b/src/routes/VotePage.jsx
index c77d27f..23a9f06 100644
--- a/src/routes/VotePage.jsx
+++ b/src/routes/VotePage.jsx
@@ -13,6 +13,8 @@ function VotePage() {
   const [thumbsDownImage, setThumbsDownImage] = useState(
     require("../assets/images/thumbs-down-icon.png")
   );
+  
+  const [image, setImage] = useState({});
 
   useEffect(() => {
     getImage();
@@ -20,8 +22,25 @@ function VotePage() {
 
   const getImage = async () => {
     try {
-      // ### TO DO ###
-      // #############
+      const response = await axios.get(
+        "https://api.thecatapi.com/v1/images/search",
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_xEi0AeOWPilSMxy9Gfogg39wSAoPQAEafUTjX90ifRBVjaBvXPEQ4a9l51p5fuU3",
+          },
+        }
+      );
+
+      const data = response.data;
+
+      const voteImage = {
+        id: data[0].id,
+        url: data[0].url,
+      };
+      setImage(voteImage);
+
     } catch (err) {
       console.log(err);
     }
@@ -29,8 +48,21 @@ function VotePage() {
 
   const vote = async (val) => {
     try {
-      // ### TO DO ###
-      // #############
+      const response = await axios.post(
+        "https://api.thecatapi.com/v1/votes",
+        { 
+          image_id: image.id, 
+          sub_id: userId, 
+          value: val 
+        }, 
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_xEi0AeOWPilSMxy9Gfogg39wSAoPQAEafUTjX90ifRBVjaBvXPEQ4a9l51p5fuU3",
+          },
+        }
+      );
     } catch (err) {
       console.log(err);
     }
@@ -62,19 +94,37 @@ function VotePage() {
       <div className="w-2/3 h-2/3 py-2 border-4 rounded-2xl border-[#FF6841] flex justify-center items-center">
         <div className="w-full h-[90%] flex justify-evenly items-center">
           <img
-            // ### ONE CAT IMAGE ###
+            src={image.url}
             className="w-3/5 h-full border-[3px] rounded-xl border-[#FF6841]"
           />
           <div className="w-1/3 flex gap-12 justify-center">
             <img
               src={thumbsUpImage}
               className="w-20 h-20 cursor-pointer"
-              // ### thumbsUpImage Event ###
+              onMouseOver = {() => setThumbsUpImage(
+                require("../assets/images/thumbs-up-click.png")
+              )}
+              onMouseOut = {() => setThumbsUpImage(
+                require("../assets/images/thumbs-up-icon.png")
+              )}
+              onClick = {() => {
+                vote(1);
+                getImage();
+              }}
             />
             <img
               src={thumbsDownImage}
               className="w-20 h-20 cursor-pointer"
-              // ### thumbsDownImage Event ###
+              onMouseOver = {() => setThumbsDownImage(
+                require("../assets/images/thumbs-down-click.png")
+              )}
+              onMouseOut = {() => setThumbsDownImage(
+                require("../assets/images/thumbs-down-icon.png")
+              )}
+              onClick = {() => {
+                vote(-1);
+                getImage();
+              }}
             />
           </div>
         </div>