From 31e6e26863937830eed6d8d758724ab1642d9e86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=9C=A4=ED=9D=AC?= Date: Tue, 30 Apr 2024 20:52:02 +0900 Subject: [PATCH] yunhee-week6-hwdone --- src/routes/FavouriteHistoryPage.jsx | 26 ++++++++++- src/routes/MainPage.jsx | 68 ++++++++++++++++++++++++++--- src/routes/VoteHistoryPage.jsx | 14 +++--- src/routes/VotePage.jsx | 58 ++++++++++++++++++++++-- 4 files changed, 149 insertions(+), 17 deletions(-) diff --git a/src/routes/FavouriteHistoryPage.jsx b/src/routes/FavouriteHistoryPage.jsx index f2e4ce5..cfd6700 100644 --- a/src/routes/FavouriteHistoryPage.jsx +++ b/src/routes/FavouriteHistoryPage.jsx @@ -15,8 +15,30 @@ function FavouriteHistoryPage() { const getImages = async () => { try { - // ### TO DO ### - // ############# + const response = await axios.get( + `https://api.thecatapi.com/v1/favourites?sub_id=${userId}`, + { + headers: { + "Content-Type": "application/json", + "x-api-key": + "live_ZTJIhVxMYYZVZAzD7evB7nXOEAjLguOs8ny2ybFvKgH6yMMun7mZsBDRjPOx9HTf", + }, + } + ); + + const data = response.data; + const imageSet = []; + + data.map((e) => { + imageSet.push({ + id: e.image.id, + url: e.image.url, + isFavourite: true, + favouriteId: e.id, + }); + }); + + setImages(imageSet); } catch (err) { console.log(err); } diff --git a/src/routes/MainPage.jsx b/src/routes/MainPage.jsx index 79be6bb..cb03479 100644 --- a/src/routes/MainPage.jsx +++ b/src/routes/MainPage.jsx @@ -15,8 +15,30 @@ function HomePage() { const getImages = async () => { try { - // ### TO DO ### - // ############# + const response = await axios.get( + "https://api.thecatapi.com/v1/images/search?limit=8&size=small", + { + headers: { + "Content-Type": "application/json", + "x-api-key": + "live_ZTJIhVxMYYZVZAzD7evB7nXOEAjLguOs8ny2ybFvKgH6yMMun7mZsBDRjPOx9HTf", + }, + } + ); + + const data = response.data; + const imageSet = []; + + data.map((e) => { + imageSet.push({ + id: e.id, + url: e.url, + isFavourite: false, + favouriteId: null, + }); + }); + + setImages(imageSet); } catch (err) { console.log(err); } @@ -24,8 +46,27 @@ function HomePage() { const favouritingImage = async (imgId) => { try { - // ### TO DO ### - // ############# + const response = await axios.post( + "https://api.thecatapi.com/v1/favourites", + { + image_id: imgId, + sub_id: userId, + }, + { + headers: { + "Content-Type": "application/json", + "x-api-key": + "live_ZTJIhVxMYYZVZAzD7evB7nXOEAjLguOs8ny2ybFvKgH6yMMun7mZsBDRjPOx9HTf", + }, + } + ); + + const newImages = [...images]; + const idx = newImages.findIndex((e) => e.id === imgId); + newImages[idx].isFavourite = true; + newImages[idx].favouriteId = response.data.id; + + setImages(newImages); } catch (err) { console.log(err); } @@ -33,8 +74,23 @@ function HomePage() { const unFavouritingImage = async (favouriteId) => { try { - // ### TO DO ### - // ############# + const newImages = [...images]; + const idx = newImages.findIndex((e) => e.favouriteId === favouriteId); + newImages[idx].isFavourite = false; + newImages[idx].favouriteId = null; + + setImages(newImages); + + const response = await axios.delete( + `https://api.thecatapi.com/v1/favourites/${favouriteId}`, + { + headers: { + "Content-Type": "application/json", + "x-api-key": + "live_GKblu8slVg2fFDula9hfgUUWLXlaX6aCWLZpv8pAyFb6Cyhxzq9CkhlwW88Erb0z", + }, + } + ); } catch (err) { console.log(err); } diff --git a/src/routes/VoteHistoryPage.jsx b/src/routes/VoteHistoryPage.jsx index 2f12755..afaf0d7 100644 --- a/src/routes/VoteHistoryPage.jsx +++ b/src/routes/VoteHistoryPage.jsx @@ -15,9 +15,13 @@ 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_ZTJIhVxMYYZVZAzD7evB7nXOEAjLguOs8ny2ybFvKgH6yMMun7mZsBDRjPOx9HTf", + }, + }); const data = response.data; const imageSet = []; @@ -64,8 +68,8 @@ function VoteHistoryPage() { diff --git a/src/routes/VotePage.jsx b/src/routes/VotePage.jsx index c77d27f..c8bf23d 100644 --- a/src/routes/VotePage.jsx +++ b/src/routes/VotePage.jsx @@ -6,7 +6,7 @@ import { getCookie } from "../utils/cookie"; function VotePage() { const navigate = useNavigate(); const userId = getCookie("userId"); - + const [image, setImage] = useState([]); const [thumbsUpImage, setThumbsUpImage] = useState( require("../assets/images/thumbs-up-icon.png") ); @@ -20,8 +20,24 @@ function VotePage() { const getImage = async () => { try { - // ### TO DO ### - // ############# + const response = await axios.get( + "https://api.thecatapi.com/v1/images/search?limit=1&size=full", + { + headers: { + "Content-Type": "application/json", + "x-api-key": + "live_ZTJIhVxMYYZVZAzD7evB7nXOEAjLguOs8ny2ybFvKgH6yMMun7mZsBDRjPOx9HTf", + }, + } + ); + + const data = response.data[0]; + + const imageSet = { + id: data.id, + url: data.url, + }; + setImage(imageSet); } catch (err) { console.log(err); } @@ -31,11 +47,39 @@ function VotePage() { 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_ZTJIhVxMYYZVZAzD7evB7nXOEAjLguOs8ny2ybFvKgH6yMMun7mZsBDRjPOx9HTf", + }, + } + ); } catch (err) { console.log(err); } }; + const handleThumbsUpHover = () => { + setThumbsUpImage(require("../assets/images/thumbs-up-click.png")); + }; + const handleThumbsUpLeave = () => { + setThumbsUpImage(require("../assets/images/thumbs-up-icon.png")); + }; + const handleThumbsDownHover = () => { + setThumbsDownImage(require("../assets/images/thumbs-down-click.png")); + }; + const handleThumbsDownLeave = () => { + setThumbsDownImage(require("../assets/images/thumbs-down-icon.png")); + }; + return (
@@ -62,7 +106,7 @@ function VotePage() {
@@ -70,11 +114,17 @@ function VotePage() { src={thumbsUpImage} className="w-20 h-20 cursor-pointer" // ### thumbsUpImage Event ### + onMouseOver={handleThumbsUpHover} + onMouseOut={handleThumbsUpLeave} + onClick={() => vote(1)} /> vote(-1)} />