Refactor 2: [Phase 2] Refactor Screens to use DataGridWrapper (1 of 4)

[palisadoes]

Problem Statement

The following files implement DataGrid features inline (search/sort/pagination/loading), causing duplicated logic and inconsistent UX.

src/screens/EventVolunteers/Requests/Requests.tsx
src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.tsx
src/screens/EventVolunteers/Volunteers/Volunteers.tsx
src/screens/FundCampaignPledge/FundCampaignPledge.tsx

Proposed Solution

1. Refactor the files to use the shared DataGridWrapper component.

2. Create a linter to prevent new code reverting to the unapproved way.

   1. This command was used to identify files:

      rg -n --glob 'src/screens/**' -e '@mui/x-data-grid' -e '<DataGrid\b' | cut -d: -f1 |  sort -u
      

   2. The linter must run as a lint staged check. Look at the .husky directory for details.
   3. It must also be part of our Pull Request GitHub action file .github/workflows/pull-request.yml as a job that is a prerequisite to the Pre-Test-Checks-Pass job.

Implementation Plan

• Link to analysis: Talawa Admin - Refactoring (2025 - 2026) - More Refactoring #5271 (comment)

Example Starter Code

import { DataGridWrapper } from "src/shared-components/DataGridWrapper/DataGridWrapper";

<DataGridWrapper
  rows={rows}
  columns={columns}
  searchConfig={{ enabled: true, fields: ["name","email"] }}
  paginationConfig={{ enabled: true, defaultPageSize: 25, pageSizeOptions: [10,25,50,100] }}
/>

Learning Resources

• https://mui.com/x/react-data-grid/
• https://testing-library.com/docs/react-testing-library/intro/

Files to Modify

• src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.tsx

Implementation Approach

1. Replace inline DataGrid with DataGridWrapper.
2. Move search/sort/pagination state into wrapper props.
3. Update tests for search/pagination.

Dependencies

• Refactor 2: [Phase 1] DataGridWrapper Foundation #5290

Acceptance Criteria

• Uses DataGridWrapper exclusively
• Search/pagination parity with prior behavior
• Keyboard navigation/a11y intact

Effort Estimate

• Analysis: 0.5h | Implementation: 1.5h | Testing: 0.5h | Total: ~2.5h

Testing Requirements

• Search filters visible rows
• Pagination page/size updates model