Trip 페이지에서 하는 것

• 내가 한 예약 정보를 보여준다.

  • currentUser가 없으면 Unauthroized를 보여주며 경고 페이지를 보여준다.
  • DB에서 내 유저 정보로 예약정보를 바로조회해 온다.

  const reservations = await getReservations({ userId: currentUser.id });
  

  • <TripsClient/> 에 위의 reservations을 props로 전달해준다.

TripsClient 컴포넌트에서 하는것

• ListingCard 컴포넌트를 재 사용해서, 내가 예약한 정보들을 리스트화 한다.
• onCancel이라는 핸들러 함수를 만들어 놓는다. 내가 카드를 누르면 id가 저장되고 해당 id로 axios.delete를 날린다.

const onCancel = useCallback(
    (id: string) => {
      setDeletingId(id);

      axios
        .delete(`/api/reservations/${id}`)
        .then(() => {
          toast.success('Reservations canceled');
          router.refresh();
        })
        .catch((error) => {
          toast.error(error?.response?.data.error);
        })
        .finally(() => {
          setDeletingId('');
        });
    },
    [router]
  );