π 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:
parent
4ddc23fbfd
commit
6c890f369c
@ -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);
|
||||
|
||||
@ -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:', {
|
||||
|
||||
Loadingβ¦
x
Reference in New Issue
Block a user