πŸ“„ Enhanced Wedding Guest List Pagination

πŸ”§ Pagination Improvements:
- Enhanced pagination data handling for multiple API response structures
- Added comprehensive debugging for pagination info
- Improved data extraction logic for different response formats
- Better error handling for missing pagination data

πŸ“Š API Response Handling:
- Support for { data: [...], pagination: {...} } structure
- Support for { guests: [...], pagination: {...} } structure
- Support for direct array responses [...]
- Fallback pagination calculation from array length

🎯 Debugging Enhancements:
- Added detailed console logging for pagination data
- Clear visibility of totalCount, totalPages, currentPage, pageSize
- Better error tracking for API response structures
- Improved development debugging experience

βœ… CustomPagination Integration:
- Proper integration with existing CustomPagination component
- Maintains consistent pagination UI across the application
- Responsive pagination with page size options [10, 20, 50, 100]
- Professional pagination styling and user experience

πŸš€ User Experience:
- Seamless pagination navigation
- Clear total count and page information display
- Loading states during pagination changes
- Consistent behavior with other paginated components
This commit is contained in:
tuanOts 2025-06-05 00:12:31 +07:00
parent 4ddc23fbfd
commit 6c890f369c
2 changed files with 57 additions and 11 deletions

View File

@ -139,19 +139,62 @@ const WeddingGuestList = () => {
console.log('πŸ“₯ API Response:', response);
if (response.success) {
const guests = response.data.guests || response.data || [];
// Handle different API response structures
let guests = [];
let paginationInfo = null;
// Check if response has pagination structure
if (response.data && typeof response.data === 'object') {
if (response.data.data && Array.isArray(response.data.data)) {
// Structure: { data: [...], pagination: {...} }
guests = response.data.data;
paginationInfo = response.data.pagination;
} else if (response.data.guests && Array.isArray(response.data.guests)) {
// Structure: { guests: [...], pagination: {...} }
guests = response.data.guests;
paginationInfo = response.data.pagination;
} else if (Array.isArray(response.data)) {
// Structure: [...]
guests = response.data;
} else {
// Fallback: try to extract array from response
guests = Object.values(response.data).find(val => Array.isArray(val)) || [];
}
}
console.log('πŸ‘₯ Setting guest data:', guests);
setGuestData(guests);
if (response.data.pagination) {
setTotalCount(response.data.pagination.totalCount);
setTotalPages(response.data.pagination.totalPages);
console.log('πŸ“Š Pagination:', response.data.pagination);
// Handle pagination info
if (paginationInfo) {
const totalCount = paginationInfo.totalCount || paginationInfo.total || 0;
const totalPages = paginationInfo.totalPages || Math.ceil(totalCount / pageSize);
setTotalCount(totalCount);
setTotalPages(totalPages);
console.log('πŸ“Š Pagination from API:', {
paginationInfo,
totalCount,
totalPages,
currentPage: page,
pageSize
});
} else {
// If no pagination object, assume single page
setTotalCount(guests.length);
setTotalPages(1);
console.log('πŸ“Š No pagination, using array length:', guests.length);
// Calculate pagination from array length
const totalCount = guests.length;
const totalPages = Math.ceil(totalCount / pageSize);
setTotalCount(totalCount);
setTotalPages(totalPages);
console.log('πŸ“Š Calculated pagination:', {
totalCount,
totalPages,
currentPage: page,
pageSize,
guestsLength: guests.length
});
}
} else {
console.error('❌ API call failed:', response.message);

View File

@ -62,10 +62,13 @@ export const weddingGuestService = {
data: response.data
});
// Handle different response structures
const responseData = response.data;
return {
success: true,
data: response.data.data || response.data,
message: response.data.message || 'Success'
data: responseData,
message: responseData.message || 'Success'
};
} catch (error) {
console.error('❌ Error fetching wedding guests:', {