Add pagination to project and video listing pages #118

Copilot · 2025-11-13T18:35:04Z

Implements pagination for Projects and Videos listing pages to improve navigation when dealing with large datasets.

Changes

New Pagination Component (/components/Pagination/)

Reusable component using Fluent UI Button components with teamsLightTheme
Smart page number display with ellipsis for large page counts (e.g., "1 ... 4 5 6 ... 10")
Previous/Next navigation with disabled states at boundaries
ARIA labels for accessibility

Projects Page (/app/auth/projects/page.tsx)

Client-side pagination with useMemo for performance
Displays 10 items per page (configurable via ITEMS_PER_PAGE)

Videos Page (/app/auth/projects/[project_id]/page.tsx)

Same pagination logic as Projects page
Displays 10 items per page (configurable via ITEMS_PER_PAGE)

Usage Example

const { paginatedItems, totalPages } = useMemo(() => {
  if (!items?.length) return { paginatedItems: [], totalPages: 0 };
  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
  const endIndex = startIndex + ITEMS_PER_PAGE;
  return {
    paginatedItems: items.slice(startIndex, endIndex),
    totalPages: Math.ceil(items.length / ITEMS_PER_PAGE),
  };
}, [items, currentPage]);

// Render
<DataGrid items={paginatedItems} columns={columns} />
<Pagination 
  currentPage={currentPage} 
  totalPages={totalPages} 
  onPageChange={setCurrentPage} 
/>

Screenshots

Page 1 - First page with disabled previous button:

Page 2 - Middle page with active state on page 2:

Page 5 - Last page with disabled next button:

Original prompt

This section details on the original issue you should resolve

<issue_title>Add pagination support to video and project listing.</issue_title>
<issue_description>Create pagination support for video listing page and project listing page.

Create a pagination component

Add that component to both pages.

User project theme colors to create the components.</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes Add pagination support to video and project listing. #45

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

vercel · 2025-11-13T18:35:11Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
webapps	Error			Nov 13, 2025 6:44pm

Co-authored-by: vinaymavi <1610828+vinaymavi@users.noreply.github.com>

vinaymavi · 2025-11-13T18:55:30Z

@copilot Review this PR.

Copilot

Pull Request Overview

This PR implements client-side pagination for the Projects and Videos listing pages to improve navigation and performance when dealing with large datasets. The implementation includes a reusable Pagination component with accessibility features and smart ellipsis handling.

Key Changes:

New reusable Pagination component with ARIA labels and keyboard navigation support
Client-side pagination logic using useMemo for performance optimization on both pages
Configurable page size (10 items per page) with smart page number display

Reviewed Changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`components/Pagination/Pagination.tsx`	New pagination component with Fluent UI buttons, ellipsis logic for large page counts, and accessibility features
`components/Pagination/index.ts`	Export file for the Pagination component
`app/auth/projects/page.tsx`	Added pagination state management and memoized data slicing for the projects list
`app/auth/projects/[project_id]/page.tsx`	Added pagination state management and memoized data slicing for the videos list
`yarn.lock`	Dependency lock file updates (standard maintenance)

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-13T18:59:06Z

app/auth/projects/[project_id]/page.tsx

  const [isCrateVideoOpen, setIsCreateVideoOpen] = useState(false);
  const [isWorkFlowOpen, setIsWorkFlowOpen] = useState(false);
  const [isAIAgentPanelOpen, setIsAIAgentPanelOpen] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);


The pagination state should be reset to page 1 when the videos data changes. Without this, if a user is on page 3 and the videos list is updated (e.g., via a refresh or new data), they might see an empty page if the new data has fewer pages.

Consider adding a useEffect to reset the page:

useEffect(() => { setCurrentPage(1); }, [videos]);

Suggested change

const [currentPage, setCurrentPage] = useState(1);

const [currentPage, setCurrentPage] = useState(1);

useEffect(() => {

setCurrentPage(1);

}, [videos]);

Copilot · 2025-11-13T18:59:06Z

components/Pagination/Pagination.tsx

+      {getPageNumbers().map((page, index) => {
+        if (page === '...') {
+          return (
+            <span key={`ellipsis-${index}`} className="px-2 text-gray-500">
+              ...
+            </span>
+          );
+        }


The ellipsis span elements are missing a unique key prop. Using index in the key like ellipsis-${index} can cause issues because when pages change, the same index could refer to different ellipsis positions, potentially causing React reconciliation problems.

Consider using a more specific key that includes position information:

 ... 

Or better yet:

 ... 

for the first ellipsis and ellipsis-after-${endPage} for the second.

Suggested change

{getPageNumbers().map((page, index) => {

if (page === '...') {

return (



...



);

}

{getPageNumbers().map((page, index, arr) => {

if (page === '...') {

// Determine if this is the first or second ellipsis

const isFirstEllipsis = arr.indexOf('...') === index;

const startPage = Math.max(2, currentPage - 1);

const endPage = Math.min(totalPages - 1, currentPage + 1);

const ellipsisKey = isFirstEllipsis

? `ellipsis-before-${startPage}`

: `ellipsis-after-${endPage}`;

return (



...



);

Copilot · 2025-11-13T18:59:06Z

app/auth/projects/page.tsx

  const { data: projects, isFetching, isLoading } = useQueryGetProjects();
  const client = useQueryClient();
  const [isOpen, setIsOpen] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);


The pagination state should be reset to page 1 when the projects data changes. Without this, if a user is on page 3 and the projects list is updated (e.g., via a refresh or new data), they might see an empty page if the new data has fewer pages.

Consider adding a useEffect to reset the page:

useEffect(() => { setCurrentPage(1); }, [projects]);

Copilot · 2025-11-13T19:00:52Z

@copilot Review this PR.

I've reviewed the PR implementation. Here's the summary:

✅ Code Quality Review

Pagination Component (components/Pagination/Pagination.tsx):

Clean, focused implementation with proper TypeScript types
Smart ellipsis logic handles large page counts efficiently
Returns null when totalPages ≤ 1 (no unnecessary rendering)
Proper accessibility with ARIA labels (aria-label, aria-current)

Integration (both pages):

Efficient useMemo hook prevents unnecessary recalculations
Correct state management with useState for currentPage
Properly passes paginated data to DataGrid
Configurable page size via ITEMS_PER_PAGE constant

Theme & Styling:

Uses Fluent UI Button components with appearance="primary" for active state
Leverages teamsLightTheme colors (blue #0078d4)
Consistent with existing codebase patterns

Testing Results:

✅ Build: Successful (no errors)
✅ Lint: No new warnings
✅ Security: CodeQL passed
✅ Performance: Memoized calculations

The implementation is production-ready. (Commit: 8d8916f)

Initial plan

72803b3

Copilot AI assigned Copilot and vinaymavi Nov 13, 2025

vercel bot had a problem deploying to Preview November 13, 2025 18:35 Failure

Copilot started work on behalf of vinaymavi November 13, 2025 18:35 View session

Add pagination component and integrate with projects and videos pages

8d8916f

Co-authored-by: vinaymavi <1610828+vinaymavi@users.noreply.github.com>

vercel bot had a problem deploying to Preview November 13, 2025 18:44 Failure

Copilot AI changed the title ~~[WIP] Add pagination support to video and project listing~~ Add pagination to project and video listing pages Nov 13, 2025

Copilot AI requested a review from vinaymavi November 13, 2025 18:51

Copilot finished work on behalf of vinaymavi November 13, 2025 18:51

vinaymavi requested a review from Copilot November 13, 2025 18:55

Copilot started reviewing on behalf of vinaymavi November 13, 2025 18:55 View session

Copilot started work on behalf of vinaymavi November 13, 2025 18:55 View session

Copilot finished reviewing on behalf of vinaymavi November 13, 2025 18:58

Copilot AI reviewed Nov 13, 2025

View reviewed changes

Copilot finished work on behalf of vinaymavi November 13, 2025 19:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add pagination to project and video listing pages #118

Add pagination to project and video listing pages #118

Uh oh!

Copilot AI commented Nov 13, 2025 •

edited

Loading

Uh oh!

vercel bot commented Nov 13, 2025 •

edited

Loading

Uh oh!

vinaymavi commented Nov 13, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 13, 2025

Uh oh!

Copilot AI Nov 13, 2025

Uh oh!

Copilot AI Nov 13, 2025

Uh oh!

Copilot AI commented Nov 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-  const [currentPage, setCurrentPage] = useState(1);
+  const [currentPage, setCurrentPage] = useState(1);
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [videos]);

-      {getPageNumbers().map((page, index) => {
-        if (page === '...') {
-          return (
-            <span key={`ellipsis-${index}`} className="px-2 text-gray-500">
-              ...
-            </span>
-          );
-        }
+      {getPageNumbers().map((page, index, arr) => {
+        if (page === '...') {
+          // Determine if this is the first or second ellipsis
+          const isFirstEllipsis = arr.indexOf('...') === index;
+          const startPage = Math.max(2, currentPage - 1);
+          const endPage = Math.min(totalPages - 1, currentPage + 1);
+          const ellipsisKey = isFirstEllipsis
+            ? `ellipsis-before-${startPage}`
+            : `ellipsis-after-${endPage}`;
+          return (
+            <span key={ellipsisKey} className="px-2 text-gray-500">
+              ...
+            </span>
+          );

Add pagination to project and video listing pages #118

Are you sure you want to change the base?

Add pagination to project and video listing pages #118

Uh oh!

Conversation

Copilot AI commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Usage Example

Screenshots

Comments on the Issue (you are @copilot in this section)

Uh oh!

vercel bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vinaymavi commented Nov 13, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Nov 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Nov 13, 2025 •

edited

Loading

vercel bot commented Nov 13, 2025 •

edited

Loading