generated from pricelees/issue-pr-template
91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { cancelWaiting, fetchMyReservations } from '@_api/reservation/reservationAPI';
|
|
import type { MyReservationRetrieveResponse } from '@_api/reservation/reservationTypes';
|
|
import { ReservationStatus } from '@_api/reservation/reservationTypes';
|
|
import { isLoginRequiredError } from '@_api/apiClient';
|
|
|
|
const MyReservationPage: React.FC = () => {
|
|
const [reservations, setReservations] = useState<MyReservationRetrieveResponse[]>([]);
|
|
const navigate = useNavigate();
|
|
|
|
const handleError = (err: any) => {
|
|
if (isLoginRequiredError(err)) {
|
|
alert('로그인이 필요해요.');
|
|
navigate('/login', { state: { from: location } });
|
|
} else {
|
|
const message = err.response?.data?.message || '알 수 없는 오류가 발생했습니다.';
|
|
alert(message);
|
|
console.error(err);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchMyReservations()
|
|
.then(res => setReservations(res.reservations))
|
|
.catch(handleError);
|
|
}, []);
|
|
|
|
const _cancelWaiting = (id: number) => {
|
|
cancelWaiting(id)
|
|
.then(() => {
|
|
alert('예약 대기가 취소되었습니다.');
|
|
setReservations(reservations.filter(r => r.id !== id));
|
|
})
|
|
.catch(handleError);
|
|
};
|
|
|
|
const getStatusText = (status: ReservationStatus, rank: number) => {
|
|
if (status === ReservationStatus.CONFIRMED) {
|
|
return '예약';
|
|
}
|
|
if (status === ReservationStatus.CONFIRMED_PAYMENT_REQUIRED) {
|
|
return '예약 - 결제 필요';
|
|
}
|
|
if (status === ReservationStatus.WAITING) {
|
|
return `${rank}번째 예약 대기`;
|
|
}
|
|
return '';
|
|
};
|
|
|
|
return (
|
|
<div className="content-container">
|
|
<h2 className="content-container-title">내 예약</h2>
|
|
<div className="table-container"></div>
|
|
<table className="table">
|
|
<thead>
|
|
<tr>
|
|
<th>테마</th>
|
|
<th>날짜</th>
|
|
<th>시간</th>
|
|
<th>상태</th>
|
|
<th>대기 취소</th>
|
|
<th>paymentKey</th>
|
|
<th>결제금액</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{reservations.map(r => (
|
|
<tr key={r.id}>
|
|
<td>{r.themeName}</td>
|
|
<td>{r.date}</td>
|
|
<td>{r.time}</td>
|
|
<td>{getStatusText(r.status, r.rank)}</td>
|
|
<td>
|
|
{r.status === ReservationStatus.WAITING &&
|
|
<button className="btn btn-danger" onClick={() => _cancelWaiting(r.id)}>취소</button>}
|
|
</td>
|
|
<td>{r.paymentKey}</td>
|
|
<td>{r.amount}</td>
|
|
<td></td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MyReservationPage;
|