Skip to content

Commit

Permalink
πŸ”₯ delete : unused event
Browse files Browse the repository at this point in the history 
- μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” μš”μ²­ ν•¨μˆ˜λ₯Ό μ‚­μ œν•©λ‹ˆλ‹€

by Hah-nna #14
  • Loading branch information
@Hah-nna
Hah-nna committed Mar 31, 2024
1 parent 2eb4f3f commit 9ab7ff7
Showing 1 changed file with 101 additions and 89 deletions.
190 changes: 101 additions & 89 deletions src/pages/CreateChallengePage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,119 +4,132 @@ import { challengeLoadingState } from "../../store/challengeLoadingState";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import DownloadIcon from "../../assets/icons/downloadIcon.svg?react";
import axios, { AxiosError } from "axios";
import { AxiosError } from "axios";
import Cookies from "js-cookie";
import { userDataState } from "../../store/userDataState";
import roulette from "../../assets/roulette.gif";
import useModal from "../../hooks/useModal";
import ModalPortal from "../../components/modal/ModalTotal";
import Modal from "../../components/modal/Modal";
import useLoggedIn from "../../hooks/useLoggedIn";
import { categoryState } from "../../store/categoryState";
import { instance } from "../../axios/axios";
import { useMutation } from "@tanstack/react-query";
import { format } from "date-fns";
import { ko } from "date-fns/locale";
// import { format } from "date-fns";
// import { ko } from "date-fns/locale";

const CreateChallengePage = () => {
const [challengeLoading, setChallengeLoading] = useRecoilState(
challengeLoadingState
);
const challengeLoading = useRecoilValue(challengeLoadingState);

const navigate = useNavigate();
const [userData, setUserData] = useRecoilState(userDataState);
const userData = useRecoilValue(userDataState);
const accessToken = Cookies.get("accessToken");
const { login } = useLoggedIn();
const category = useRecoilValue(categoryState);
const date = new Date(userData.startTime);

const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hours = date.getHours();
const minutes = date.getMinutes();
const { modal, setModal, closeModalHandler } = useModal();

const mainApi = async () => {
if (!accessToken) {
navigate("/login");
return;
}
setChallengeLoading(true); // api 호좜 전에 true둜 λ³€κ²½ν•˜μ—¬ λ‘œλ”©ν™”λ©΄ λ„μš°κΈ°
const body = { category: category };
console.log("body", body);
try {
if (!accessToken) {
navigate("/login");
return;
}

await axios
.post("https://today-challenge.site/challenge/draw", body, {
headers: { Authorization: `Bearer ${accessToken}` },
})
.then((res) => {
setTimeout(() => {
setChallengeLoading(false);
const {
memberName,
memberProfile,
startTime,
expireTime,
challengeTitle,
challengeImg,
} = res.data;

setUserData({
memberName,
memberProfile,
startTime,
expireTime,
challengeTitle,
challengeImg,
completeTime: "",
});
console.log("res", res);
}, 3000);
});
} catch (err) {
console.log("err", err);
navigate("/error");
}
};
// const drawChallenge = async (accessToken, body) => {
// const response = await instance.post(
// "https://today-challenge.site/challenge/draw",
// body,
// {
// headers: { Authorization: `Bearer ${accessToken}` },
// }
// );
// return response.data;
// };

// const { mutate: drawChallengeMutation } = useMutation({
// mutationFn: () => drawChallenge(accessToken, { category: category }),
// onSuccess: (data) => {
// const {
// memberName,
// memberProfile,
// startTime,
// expireTime,
// challengeTitle,
// challengeImg,
// } = data;
// setUserData({
// memberName,
// memberProfile,
// startTime,
// expireTime,
// challengeTitle,
// challengeImg,
// completeTime: "",
// takenTime: "",
// });
// // console.log("startTime", userData.startTime);
// },
// onError: (error) => {
// const axiosError = error as AxiosError;
// if (axiosError.response?.data === "이미 도전 쀑인 μ±Œλ¦°μ§€κ°€ μžˆμŠ΅λ‹ˆλ‹€.") {
// navigate("/my-page");
// } else {
// console.log("err", error);
// navigate("/error");
// }
// console.log("error", error);
// },
// onSettled: () => {
// setChallengeLoading(false);
// },
// });

useEffect(() => {
mainApi();
}, [login]);

const modalHandler = () => {
setModal((prev) => !prev);
tryChallengeHandler();
};
if (!accessToken) {
return navigate("/login");
}
}, []);

const tryChallengeHandler = async () => {
// λ„μ „ν•˜κ² λƒ 말겠냐
const tryChallengeHandler = async (accessToken) => {
try {
if (!accessToken) {
navigate("/login");
return;
}

await axios
.post("https://today-challenge.site/challenge/try", null, {
const response = await instance.post(
"https://today-challenge.site/challenge/try",
null,
{
headers: { Authorization: `Bearer ${accessToken}` },
})
.then(() => {
navigate("/my-page");
});
}
);
return response;
} catch (err) {
const axiosError = err as AxiosError;
if (
axiosError.response?.data === "이미 도전 쀑인 μ±Œλ¦°μ§€κ°€ μžˆμŠ΅λ‹ˆλ‹€." ||
axiosError.response?.status === 409
) {
navigate("/have-challenge");
if (axiosError.response?.data === "이미 도전 쀑인 μ±Œλ¦°μ§€κ°€ μžˆμŠ΅λ‹ˆλ‹€.") {
navigate("/my-page");
} else {
console.log("err", err);
navigate("/error");
}
}
};
const mutation = useMutation({
mutationFn: () => tryChallengeHandler(accessToken),
onSuccess: () => navigate("/my-page"),
onError: (error) => {
const axiosError = error as AxiosError;
if (axiosError.response?.data === "이미 도전 쀑인 μ±Œλ¦°μ§€κ°€ μžˆμŠ΅λ‹ˆλ‹€.") {
navigate("/my-page");
} else {
console.log("err", error);
navigate("/error");
}
},
});

const modalHandler = () => {
setModal((prev) => !prev);
mutation.mutate();
};

const formattedDate = format(
new Date(userData.startTime),
"yyyyλ…„ MMμ›” dd일 HH:mm",
{ locale: ko }
);
console.log("formattedDate", formattedDate);

return (
<StatusBarLayout
Expand All @@ -142,7 +155,7 @@ const CreateChallengePage = () => {
{modal && (
<ModalPortal>
<Modal
onConfirm={tryChallengeHandler}
onConfirm={() => tryChallengeHandler}
onCancel={closeModalHandler}
showCancelBtn={true}
title="이 μ±Œλ¦°μ§€μ— λ„μ „ν•˜μ‹œκ² μ–΄μš”?"
Expand All @@ -159,7 +172,7 @@ const CreateChallengePage = () => {
<img
src={userData.challengeImg}
alt="challengeImg"
className="w-[305px] h-[385px]"
className="w-[305px] h-[385px] shadow-xl overflow-hidden rounded-[10px]"
/>

{/* ν”„λ‘œν•„ 사진과 ν…μŠ€νŠΈλ₯Ό 묢은 μ»¨ν…Œμ΄λ„ˆ */}
Expand All @@ -171,16 +184,15 @@ const CreateChallengePage = () => {
/>
<div>
<h3 className="font-semibold">{userData.memberName}</h3>
<p className="body-s text-gray-700">{`${year}λ…„ ${month}μ›” ${day}일 ${hours}:${minutes}`}</p>
<p className="body-s text-gray-700">{formattedDate}</p>
</div>
</div>

{/* λ‹€μš΄λ‘œλ“œ μ•„μ΄μ½˜ */}
<div className="absolute top-20 right-8 ">
<DownloadIcon width={30} height={30} />
</div>

<div className="body-l absolute bottom-[120px] w-full left-0 right-0 m-auto text-center text-nowrap break-words">
<div className="body-l absolute bottom-[110px] w-full h-[50px] left-0 right-0 m-auto px-5 text-center text-wrap break-keep">
{userData.challengeTitle}
</div>
</div>
Expand Down

0 comments on commit 9ab7ff7

Please sign in to comment.