danak/dmail-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pagination

Browse Source
This commit is contained in:
hamid zarghami
2025-07-27 08:54:25 +03:30
parent 6dca90bd56
commit 59f9eb5d42
23 changed files with 2312 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Trash/List.tsx
+21 -8
View File
@@ -12,12 +12,14 @@ import { useEmailActions } from '@/hooks/useEmailActions';
const List: FC = () => {
const navigate = useNavigate();
const [currentPage, setCurrentPage] = useState(1);
const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
const [filters, setFilters] = useState<FilterValues>({});
const emailActions = useEmailActions();
const { data: trashData, isLoading, refetch, isFetching } = useGetTrashMessages({
page: currentPage,
next: nextCursor,
previous: previousCursor,
limit: 10,
...filters
});
@@ -73,7 +75,8 @@ const List: FC = () => {
const handleFilterChange = (newFilters: FilterValues) => {
setFilters(newFilters);
setCurrentPage(1);
setNextCursor(undefined);
setPreviousCursor(undefined);
};
const handleSelectionChange = (selectedRows: TrashMessage[]) => {
@@ -107,8 +110,16 @@ const List: FC = () => {
const handlePageChange = (page: number) => {
setCurrentPage(page);
const handleNext = (cursor?: string) => {
setNextCursor(cursor);
setPreviousCursor(undefined);
};
const handlePrevious = (cursor?: string) => {
setPreviousCursor(cursor);
setNextCursor(undefined);
};
const messages = trashData?.data?.trashMails || [];
@@ -147,9 +158,11 @@ const List: FC = () => {
selectable={true}
rowActions={getRowActions}
pagination={pager ? {
totalPages: pager.totalPages,
currentPage: pager.page,
onPageChange: handlePageChange
hasNext: typeof pager.nextCursor === 'string',
nextCursor: typeof pager.nextCursor === 'string' ? pager.nextCursor : undefined,
previousCursor: typeof pager.previousCursor === 'string' ? pager.previousCursor : undefined,
onNext: handleNext,
onPrevious: handlePrevious
} : undefined}
/>
</div>
src/pages/Trash/types/TrashTypes.ts
+14 -3
View File
@@ -35,7 +35,8 @@ export interface TrashMessage extends Record<string, unknown> {
}
export interface MessageListQueryDto {
page?: number;
next?: string;
previous?: string;
limit?: number;
search?: string;
from?: string;
@@ -43,6 +44,7 @@ export interface MessageListQueryDto {
datestart?: string;
dateend?: string;
attachments?: boolean;
unseen?: boolean;
flagged?: boolean;
order?: "asc" | "desc";
}
@@ -57,8 +59,17 @@ export interface TrashResponse {
totalPages: number;
totalItems: number;
limit: number;
prevPage: boolean;
nextPage: boolean;
previousCursor: string | boolean;
nextCursor: string | boolean;
};
};
}
export interface Pager {
page: number;
limit: number;
totalItems: number;
totalPages: number;
previousCursor: string | boolean;
nextCursor: string | boolean;
}
src/pages/archive/List.tsx
+21 -8
View File
@@ -12,12 +12,14 @@ import { useEmailActions } from '@/hooks/useEmailActions';
const List: FC = () => {
const navigate = useNavigate();
const [currentPage, setCurrentPage] = useState(1);
const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
const [filters, setFilters] = useState<FilterValues>({});
const emailActions = useEmailActions();
const { data: archiveData, isLoading, refetch, isFetching } = useGetArchiveMessages({
page: currentPage,
next: nextCursor,
previous: previousCursor,
limit: 10,
...filters
});
@@ -73,7 +75,8 @@ const List: FC = () => {
const handleFilterChange = (newFilters: FilterValues) => {
setFilters(newFilters);
setCurrentPage(1);
setNextCursor(undefined);
setPreviousCursor(undefined);
};
const handleSelectionChange = (selectedRows: ArchiveMessage[]) => {
@@ -105,8 +108,16 @@ const List: FC = () => {
},
];
const handlePageChange = (page: number) => {
setCurrentPage(page);
const handleNext = (cursor?: string) => {
setNextCursor(cursor);
setPreviousCursor(undefined);
};
const handlePrevious = (cursor?: string) => {
setPreviousCursor(cursor);
setNextCursor(undefined);
};
const messages = archiveData?.data?.archiveMails || [];
@@ -145,9 +156,11 @@ const List: FC = () => {
selectable={true}
rowActions={getRowActions}
pagination={pager ? {
totalPages: pager.totalPages,
currentPage: pager.page,
onPageChange: handlePageChange
hasNext: typeof pager.nextCursor === 'string',
nextCursor: typeof pager.nextCursor === 'string' ? pager.nextCursor : undefined,
previousCursor: typeof pager.previousCursor === 'string' ? pager.previousCursor : undefined,
onNext: handleNext,
onPrevious: handlePrevious
} : undefined}
/>
</div>
src/pages/archive/types/ArchiveTypes.ts
+14 -3
View File
@@ -35,7 +35,8 @@ export interface ArchiveMessage extends Record<string, unknown> {
}
export interface MessageListQueryDto {
page?: number;
next?: string;
previous?: string;
limit?: number;
search?: string;
from?: string;
@@ -43,6 +44,7 @@ export interface MessageListQueryDto {
datestart?: string;
dateend?: string;
attachments?: boolean;
unseen?: boolean;
flagged?: boolean;
order?: "asc" | "desc";
}
@@ -57,8 +59,17 @@ export interface ArchiveResponse {
totalPages: number;
totalItems: number;
limit: number;
prevPage: boolean;
nextPage: boolean;
previousCursor: string | boolean;
nextCursor: string | boolean;
};
};
}
export interface Pager {
page: number;
limit: number;
totalItems: number;
totalPages: number;
previousCursor: string | boolean;
nextCursor: string | boolean;
}
src/pages/draft/List.tsx
+22 -9
View File
@@ -15,13 +15,15 @@ import { useSharedStore } from '@/shared/store/sharedStore';
const List: FC = () => {
const navigate = useNavigate();
const { t } = useTranslation();
const [currentPage, setCurrentPage] = useState(1);
const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
const [filters, setFilters] = useState<FilterValues>({});
const emailActions = useEmailActions();
const { setDraftData, setOpenNewMessage, setEditingDraftId } = useSharedStore();
const { data: draftData, isLoading, refetch, isFetching } = useGetDrafts({
page: currentPage,
next: nextCursor,
previous: previousCursor,
limit: 10,
...filters
});
@@ -106,7 +108,8 @@ const List: FC = () => {
const handleFilterChange = (newFilters: FilterValues) => {
setFilters(newFilters);
setCurrentPage(1);
setNextCursor(undefined);
setPreviousCursor(undefined);
};
const handleSelectionChange = (selectedRows: DraftMessage[]) => {
@@ -171,11 +174,19 @@ const List: FC = () => {
},
];
const handlePageChange = (page: number) => {
setCurrentPage(page);
const handleNext = (cursor?: string) => {
setNextCursor(cursor);
setPreviousCursor(undefined);
};
const messages = draftData?.data?.draftsMail || [];
const handlePrevious = (cursor?: string) => {
setPreviousCursor(cursor);
setNextCursor(undefined);
};
const messages = draftData?.data?.draftMails || [];
const pager = draftData?.data?.pager;
return (
@@ -211,9 +222,11 @@ const List: FC = () => {
selectable={true}
rowActions={getRowActions}
pagination={pager ? {
totalPages: pager.totalPages,
currentPage: pager.page,
onPageChange: handlePageChange
hasNext: typeof pager.nextCursor === 'string',
nextCursor: typeof pager.nextCursor === 'string' ? pager.nextCursor : undefined,
previousCursor: typeof pager.previousCursor === 'string' ? pager.previousCursor : undefined,
onNext: handleNext,
onPrevious: handlePrevious
} : undefined}
/>
</div>
src/pages/draft/types/DraftTypes.ts
+8 -6
View File
@@ -19,7 +19,8 @@ export interface EmailAttachmentDto {
}
export interface MessageListQueryDto {
page?: number;
next?: string;
previous?: string;
limit?: number;
search?: string;
from?: string;
@@ -27,6 +28,7 @@ export interface MessageListQueryDto {
datestart?: string;
dateend?: string;
attachments?: boolean;
unseen?: boolean;
flagged?: boolean;
order?: "asc" | "desc";
}
@@ -76,21 +78,21 @@ export interface DraftMessage extends Record<string, unknown> {
export type InboxMessage = DraftMessage;
export interface InboxPager {
export interface Pager {
page: number;
limit: number;
totalItems: number;
totalPages: number;
prevPage: boolean;
nextPage: boolean;
previousCursor: string | boolean;
nextCursor: string | boolean;
}
export interface InboxResponse {
statusCode: number;
success: boolean;
data: {
pager: InboxPager;
draftsMail: DraftMessage[];
pager: Pager;
draftMails: DraftMessage[];
};
}
src/pages/favorite/List.tsx
+19 -8
View File
@@ -13,12 +13,14 @@ import Favorite from '../received/Components/Favorite';
const List: FC = () => {
const navigate = useNavigate();
const [currentPage, setCurrentPage] = useState(1);
const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
const [filters, setFilters] = useState<FilterValues>({});
const emailActions = useEmailActions();
const { data: favoriteData, isLoading, refetch, isFetching } = useGetFavoriteMessages({
page: currentPage,
next: nextCursor,
previous: previousCursor,
limit: 10,
...filters
});
@@ -75,7 +77,8 @@ const List: FC = () => {
const handleFilterChange = (newFilters: FilterValues) => {
setFilters(newFilters);
setCurrentPage(1);
setNextCursor(undefined);
setPreviousCursor(undefined);
};
const handleSelectionChange = (selectedRows: FavoriteMessage[]) => {
@@ -125,8 +128,14 @@ const List: FC = () => {
},
];
const handlePageChange = (page: number) => {
setCurrentPage(page);
const handleNext = (cursor?: string) => {
setNextCursor(cursor);
setPreviousCursor(undefined);
};
const handlePrevious = (cursor?: string) => {
setPreviousCursor(cursor);
setNextCursor(undefined);
};
const messages = favoriteData?.data?.favoriteMails || [];
@@ -165,9 +174,11 @@ const List: FC = () => {
selectable={true}
rowActions={getRowActions}
pagination={pager ? {
totalPages: pager.totalPages,
currentPage: pager.page,
onPageChange: handlePageChange
hasNext: typeof pager.nextCursor === 'string',
nextCursor: typeof pager.nextCursor === 'string' ? pager.nextCursor : undefined,
previousCursor: typeof pager.previousCursor === 'string' ? pager.previousCursor : undefined,
onNext: handleNext,
onPrevious: handlePrevious
} : undefined}
inlineActions={getInlineActions}
/>
src/pages/favorite/types/FavoriteTypes.ts
+14 -3
View File
@@ -35,7 +35,8 @@ export interface FavoriteMessage extends Record<string, unknown> {
}
export interface MessageListQueryDto {
page?: number;
next?: string;
previous?: string;
limit?: number;
search?: string;
from?: string;
@@ -43,6 +44,7 @@ export interface MessageListQueryDto {
datestart?: string;
dateend?: string;
attachments?: boolean;
unseen?: boolean;
flagged?: boolean;
order?: "asc" | "desc";
}
@@ -57,8 +59,17 @@ export interface FavoriteResponse {
totalPages: number;
totalItems: number;
limit: number;
prevPage: boolean;
nextPage: boolean;
previousCursor: string | boolean;
nextCursor: string | boolean;
};
};
}
export interface Pager {
page: number;
limit: number;
totalItems: number;
totalPages: number;
previousCursor: string | boolean;
nextCursor: string | boolean;
}
src/pages/received/List.tsx
+36 -9
View File
@@ -20,14 +20,16 @@ const List: FC = () => {
const navigate = useNavigate();
const { t } = useTranslation();
const [currentPage, setCurrentPage] = useState(1);
const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
const [filters, setFilters] = useState<FilterValues>({});
const emailActions = useEmailActions();
const [openSummarizeModal, setOpenSummarizeModal] = useState(false);
const { mutate: summarizeEmail, isPending: isSummarizing, data: summarizeData } = useSummarizeEmail();
const { data: inboxData, isLoading, refetch, isFetching } = useGetInbox({
page: currentPage,
next: nextCursor,
previous: previousCursor,
limit: 10,
...filters
});
@@ -113,7 +115,8 @@ const List: FC = () => {
const handleFilterChange = (newFilters: FilterValues) => {
setFilters(newFilters);
setCurrentPage(1);
setNextCursor(undefined);
setPreviousCursor(undefined);
};
const handleSelectionChange = (selectedRows: InboxMessage[]) => {
@@ -189,12 +192,34 @@ const List: FC = () => {
},
];
const handlePageChange = (page: number) => {
setCurrentPage(page);
const handleNext = (cursor?: string) => {
setNextCursor(cursor);
setPreviousCursor(undefined);
};
const handlePrevious = (cursor?: string) => {
setPreviousCursor(cursor);
setNextCursor(undefined);
};
const messages = inboxData?.data?.results || [];
const pager = inboxData?.data?.pager;
const rootData = inboxData?.data as unknown as Record<string, unknown>;
// Debug pagination data
console.log('Full response data:', inboxData?.data);
console.log('Pager data:', pager);
console.log('Root nextCursor:', rootData?.nextCursor);
console.log('Root previousCursor:', rootData?.previousCursor);
// Get cursors from response
const responseNextCursor = (typeof rootData?.nextCursor === 'string' && rootData.nextCursor !== '') ? rootData.nextCursor as string : undefined;
const responsePreviousCursor = (typeof rootData?.previousCursor === 'string' && rootData.previousCursor !== '') ? rootData.previousCursor as string : undefined;
// Debug pagination values
console.log('responseNextCursor:', responseNextCursor);
console.log('responsePreviousCursor:', responsePreviousCursor);
console.log('Will render pagination?', !!(responseNextCursor || responsePreviousCursor));
return (
<div className='mt-2 md:mt-4 px-2 md:px-0'>
@@ -239,10 +264,12 @@ const List: FC = () => {
selectable={true}
inlineActions={getInlineActions}
rowActions={getRowActions}
pagination={pager ? {
totalPages: pager.totalPages,
currentPage: pager.page,
onPageChange: handlePageChange
pagination={(responseNextCursor || responsePreviousCursor) ? {
hasNext: !!responseNextCursor,
nextCursor: responseNextCursor,
previousCursor: responsePreviousCursor,
onNext: handleNext,
onPrevious: handlePrevious
} : undefined}
/>
src/pages/received/types/Types.ts
+6 -5
View File
@@ -54,7 +54,8 @@ export interface SendEmailDto {
}
export interface MessageListQueryDto {
page?: number;
next?: string;
previous?: string;
limit?: number;
search?: string;
from?: string;
@@ -111,20 +112,20 @@ export interface InboxMessage extends Record<string, unknown> {
};
}
export interface InboxPager {
export interface Pager {
page: number;
limit: number;
totalItems: number;
totalPages: number;
prevPage: boolean;
nextPage: boolean;
previousCursor: string | boolean;
nextCursor: string | boolean;
}
export interface InboxResponse {
statusCode: number;
success: boolean;
data: {
pager: InboxPager;
pager: Pager;
message: string;
results: InboxMessage[];
};
src/pages/search/List.tsx
+19 -8
View File
@@ -12,12 +12,14 @@ import { useEmailActions } from '@/hooks/useEmailActions';
const List: FC = () => {
const navigate = useNavigate();
const [currentPage, setCurrentPage] = useState(1);
const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
const [filters, setFilters] = useState<FilterValues>({});
const emailActions = useEmailActions();
const { data: searchData, isLoading, refetch, isFetching } = useSearchMessages({
page: currentPage,
next: nextCursor,
previous: previousCursor,
limit: 10,
...filters
});
@@ -81,7 +83,8 @@ const List: FC = () => {
const handleFilterChange = (newFilters: FilterValues) => {
setFilters(newFilters);
setCurrentPage(1);
setNextCursor(undefined);
setPreviousCursor(undefined);
};
const handleSelectionChange = (selectedRows: SearchMessage[]) => {
@@ -124,8 +127,14 @@ const List: FC = () => {
},
];
const handlePageChange = (page: number) => {
setCurrentPage(page);
const handleNext = (cursor?: string) => {
setNextCursor(cursor);
setPreviousCursor(undefined);
};
const handlePrevious = (cursor?: string) => {
setPreviousCursor(cursor);
setNextCursor(undefined);
};
const messages = searchData?.data?.results || [];
@@ -180,9 +189,11 @@ const List: FC = () => {
selectable={true}
rowActions={getRowActions}
pagination={pager ? {
totalPages: pager.totalPages,
currentPage: pager.page,
onPageChange: handlePageChange
hasNext: typeof pager.nextCursor === 'string',
nextCursor: typeof pager.nextCursor === 'string' ? pager.nextCursor : undefined,
previousCursor: typeof pager.previousCursor === 'string' ? pager.previousCursor : undefined,
onNext: handleNext,
onPrevious: handlePrevious
} : undefined}
/>
</div>
src/pages/search/types/SearchTypes.ts
+19 -3
View File
@@ -34,8 +34,24 @@ export interface SearchMessage extends Record<string, unknown> {
};
}
export interface MessageListQueryDto {
next?: string;
previous?: string;
limit?: number;
search?: string;
from?: string;
subject?: string;
datestart?: string;
dateend?: string;
attachments?: boolean;
unseen?: boolean;
flagged?: boolean;
order?: "asc" | "desc";
}
export interface SearchQueryDto {
page?: number;
next?: string;
previous?: string;
limit?: number;
q?: string;
dateFrom?: string;
@@ -52,8 +68,8 @@ export interface SearchResponse {
totalPages: number;
totalItems: number;
limit: number;
prevPage: boolean;
nextPage: boolean;
previousCursor: string | boolean;
nextCursor: string | boolean;
};
};
}
src/pages/sent/List.tsx
+19 -8
View File
@@ -13,12 +13,14 @@ import { formatDate } from '@/config/func';
const List: FC = () => {
const navigate = useNavigate();
const [currentPage, setCurrentPage] = useState(1);
const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
const [filters, setFilters] = useState<FilterValues>({});
const emailActions = useEmailActions();
const { data: sentData, isLoading, refetch, isFetching } = useGetSentMessages({
page: currentPage,
next: nextCursor,
previous: previousCursor,
limit: 10,
...filters
});
@@ -91,7 +93,8 @@ const List: FC = () => {
const handleFilterChange = (newFilters: FilterValues) => {
setFilters(newFilters);
setCurrentPage(1);
setNextCursor(undefined);
setPreviousCursor(undefined);
};
const handleRowClick = (id: number, item: InboxMessage) => {
@@ -138,8 +141,14 @@ const List: FC = () => {
},
];
const handlePageChange = (page: number) => {
setCurrentPage(page);
const handleNext = (cursor?: string) => {
setNextCursor(cursor);
setPreviousCursor(undefined);
};
const handlePrevious = (cursor?: string) => {
setPreviousCursor(cursor);
setNextCursor(undefined);
};
const messages = sentData?.data?.sentMails || [];
@@ -178,9 +187,11 @@ const List: FC = () => {
selectable={true}
rowActions={getRowActions}
pagination={pager ? {
totalPages: pager.totalPages,
currentPage: pager.page,
onPageChange: handlePageChange
hasNext: typeof pager.nextCursor === 'string',
nextCursor: typeof pager.nextCursor === 'string' ? pager.nextCursor : undefined,
previousCursor: typeof pager.previousCursor === 'string' ? pager.previousCursor : undefined,
onNext: handleNext,
onPrevious: handlePrevious
} : undefined}
/>
src/pages/sent/types/SentTypes.ts
+5 -3
View File
@@ -1,5 +1,6 @@
export interface MessageListQueryDto {
page?: number;
next?: string;
previous?: string;
limit?: number;
search?: string;
from?: string;
@@ -7,6 +8,7 @@ export interface MessageListQueryDto {
datestart?: string;
dateend?: string;
attachments?: boolean;
unseen?: boolean;
flagged?: boolean;
order?: "asc" | "desc";
}
@@ -54,8 +56,8 @@ export interface Pager {
limit: number;
totalItems: number;
totalPages: number;
prevPage: boolean;
nextPage: boolean;
previousCursor: string | boolean;
nextCursor: string | boolean;
}
export interface InboxResponse {
src/pages/spam/List.tsx
+19 -8
View File
@@ -12,12 +12,14 @@ import { useEmailActions } from '@/hooks/useEmailActions';
const List: FC = () => {
const navigate = useNavigate();
const [currentPage, setCurrentPage] = useState(1);
const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
const [filters, setFilters] = useState<FilterValues>({});
const emailActions = useEmailActions();
const { data: spamData, isLoading, refetch, isFetching } = useGetSpamMessages({
page: currentPage,
next: nextCursor,
previous: previousCursor,
limit: 10,
...filters
});
@@ -72,7 +74,8 @@ const List: FC = () => {
const handleFilterChange = (newFilters: FilterValues) => {
setFilters(newFilters);
setCurrentPage(1);
setNextCursor(undefined);
setPreviousCursor(undefined);
};
const handleSelectionChange = (selectedRows: SpamMessage[]) => {
@@ -104,8 +107,14 @@ const List: FC = () => {
},
];
const handlePageChange = (page: number) => {
setCurrentPage(page);
const handleNext = (cursor?: string) => {
setNextCursor(cursor);
setPreviousCursor(undefined);
};
const handlePrevious = (cursor?: string) => {
setPreviousCursor(cursor);
setNextCursor(undefined);
};
const messages = spamData?.data?.junkMails || [];
@@ -144,9 +153,11 @@ const List: FC = () => {
selectable={true}
rowActions={getRowActions}
pagination={pager ? {
totalPages: pager.totalPages,
currentPage: pager.page,
onPageChange: handlePageChange
hasNext: typeof pager.nextCursor === 'string',
nextCursor: typeof pager.nextCursor === 'string' ? pager.nextCursor : undefined,
previousCursor: typeof pager.previousCursor === 'string' ? pager.previousCursor : undefined,
onNext: handleNext,
onPrevious: handlePrevious
} : undefined}
/>
</div>
src/pages/spam/types/SpamTypes.ts
+14 -3
View File
@@ -35,7 +35,8 @@ export interface SpamMessage extends Record<string, unknown> {
}
export interface MessageListQueryDto {
page?: number;
next?: string;
previous?: string;
limit?: number;
search?: string;
from?: string;
@@ -43,6 +44,7 @@ export interface MessageListQueryDto {
datestart?: string;
dateend?: string;
attachments?: boolean;
unseen?: boolean;
flagged?: boolean;
order?: "asc" | "desc";
}
@@ -56,8 +58,17 @@ export interface SpamResponse {
totalPages: number;
totalItems: number;
limit: number;
prevPage: boolean;
nextPage: boolean;
previousCursor: string | boolean;
nextCursor: string | boolean;
};
};
}
export interface Pager {
page: number;
limit: number;
totalItems: number;
totalPages: number;
previousCursor: string | boolean;
nextCursor: string | boolean;
}