debugging_log 1

이지·2020년 11월 29일
0

24시간 지나면 상품 delete 불가능하게 만들기

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 면 나타나지 않게 한다.

  • react infinite loop에 빠져서 눈물을 쏙 뺀 후, 비구조화 할당으로 해결했다.
profile
이지피지레몬스퀴지🍋

0개의 댓글