useEffect(() => {
const getEvents = async () => {
const { data } = await axios.get(getUserInfo, {
headers,
params: {
email,
token
}
});
dispatch(setUpcoming(data.data.upcoming_events));
dispatch(setOngoing(data.data.ongoing_events));
getData(true);
setData(data.data.user_data);
setDate(data.data.upcoming_events[0]?.event_start);
// btnchange();
};
getEvents();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
setDate 를 사용하여, upcoming event 가 있을때만, event_start 를 date 변수에 저장해준다.
useEffect(() => {
if (date !== "") {
btnchange();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [date]);
date 값이 빈 string 이 아닐때, btnchange 함수를 실행한다.
const btnchange = () => {
if (date !== "") {
function getToday() {
var date = new Date();
var year = date.getFullYear();
var month = ("0" + (1 + date.getMonth())).slice(-2);
var day = ("0" + date.getDate()).slice(-2);
return year + "-" + month + "-" + day;
}
let today = getToday();
function setYesterday(date) {
var selectDate = date?.split("-");
var changeDate = new Date();
changeDate.setFullYear(
selectDate && [0],
selectDate && [1] - 1,
selectDate && [2] - 1
);
var y = changeDate.getFullYear();
var m = changeDate.getMonth() + 1;
var d = changeDate.getDate();
if (m < 10) {
m = "0" + m;
}
if (d < 10) {
d = "0" + d;
}
var resultDate = y + "-" + m + "-" + d;
return resultDate;
}
let newdate = setYesterday(date);
console.log("newdate", newdate);
if (today === newdate) {
setdeletebtn(!deletebtn);
}
}
return;
};
today 라는 변수에 "yyyy-mm-dd" 형식으로 된 오늘의 날짜를 담고, newdate라는 변수에는 date값을 가져와 하루 전날의 날짜를 계산해 주는 함수인 setYesterday 에 넣은 후 나온 값을 담고 두 날짜가 같으면 deletebtn 을 false 로 바꾼다.
이후 render 될때, deletebtn 이 true 면 쓰레기통 아이콘이 나타나고 false 면 나타나지 않게 한다.