Skip to content

[Week6] 박성일 과제제출 #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Atipico1 wants to merge 1 commit into
base: seongil-week6
Choose a base branch
from
Open

[Week6] 박성일 과제제출 #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 24 additions & 2 deletions src/routes/FavouriteHistoryPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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_Iyhi1ILrF0FD1vlsdHpX4CYBM37yG1ZXsUjP58Jx4Wov7qsp27cZmsuBjMt0HYVo",
},
}
);

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);
}
Expand Down
68 changes: 62 additions & 6 deletions src/routes/MainPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,26 +15,82 @@ 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_Iyhi1ILrF0FD1vlsdHpX4CYBM37yG1ZXsUjP58Jx4Wov7qsp27cZmsuBjMt0HYVo",
},
}
);

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

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_GKblu8slVg2fFDula9hfgUUWLXlaX6aCWLZpv8pAyFb6Cyhxzq9CkhlwW88Erb0z",
},
}
);

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

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);
}
Expand Down
12 changes: 8 additions & 4 deletions src/routes/VoteHistoryPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,13 @@ function VoteHistoryPage() {

const getImages = async () => {
try {
let response;
// ### TO DO ###
// #############
let response = await axios.get("https://api.thecatapi.com/v1/votes", {
headers: {
"Content-Type": "application/json",
"x-api-key":
"live_Iyhi1ILrF0FD1vlsdHpX4CYBM37yG1ZXsUjP58Jx4Wov7qsp27cZmsuBjMt0HYVo",
},
});
const data = response.data;
const imageSet = [];

Expand Down Expand Up @@ -65,7 +69,7 @@ function VoteHistoryPage() {
key={img.url}
src={img.url}
className={`object-cover w-full h-full border-[3px] border-[#FF6841] rounded-xl
### FILL ME ###
${img.value === 1 ? "border-red-500" : "border-blue-500"}
`}
/>
</div>
Expand Down
60 changes: 55 additions & 5 deletions src/routes/VotePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")
);
Expand All @@ -20,17 +20,46 @@ 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_Iyhi1ILrF0FD1vlsdHpX4CYBM37yG1ZXsUjP58Jx4Wov7qsp27cZmsuBjMt0HYVo",
},
}
);

const data = response.data;
setImage({
id: data[0].id,
url: data[0].url,
isFavorite: false,
favoriteId: null,
});
} catch (err) {
console.log(err);
}
};

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_Iyhi1ILrF0FD1vlsdHpX4CYBM37yG1ZXsUjP58Jx4Wov7qsp27cZmsuBjMt0HYVo",
},
}
);
} catch (err) {
console.log(err);
}
Comment on lines 46 to 65
Copy link
Contributor

@isuh88 isuh88 May 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

앗 아까 쓰는걸 깜박했는데, 지금은 투표 후에 요청은 post로 잘 전송되나 새로운 고양이 이미지가 다시 불러와지지는 않아요! getImage()를 통해 vote를 호출하여 투표를 완료하면 다음 고양이 사진이 보이도록 수정하면 좋을 것 같네요 :)

Expand Down Expand Up @@ -63,18 +92,39 @@ function VotePage() {
<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 ###
onMouseEnter={() =>
setThumbsUpImage(
require("../assets/images/thumbs-up-click.png")
)
}
onMouseLeave={() =>
setThumbsUpImage(require("../assets/images/thumbs-up-icon.png"))
}
onClick={() => vote(1)}
/>
<img
src={thumbsDownImage}
className="w-20 h-20 cursor-pointer"
// ### thumbsDownImage Event ###
onMouseEnter={() =>
setThumbsDownImage(
require("../assets/images/thumbs-down-click.png")
)
}
onMouseLeave={() =>
setThumbsDownImage(
require("../assets/images/thumbs-down-icon.png")
)
}
onClick={() => vote(-1)}
/>
</div>
</div>
Expand Down