Cases Modal Component (cases-modal.tsx)

Types

CasesModalProps

Props for the CasesModal component:

• isOpen: boolean – Whether the modal is open.

• onClose: () => void – Callback to close the modal.

• onSelectCase: (caseNum: string) => void – Callback when a case is selected.

• currentCase: string – The currently selected case.

• user: User – The current authenticated user.

---

Component

CasesModal(props: CasesModalProps)

A modal dialog for viewing and selecting user cases.

State:

• cases: Array of case numbers for the user.

• isLoading: Whether cases are being loaded.

• error: Error message for loading failures.

• currentPage: Current page number for pagination.

Effects:

• Adds an event listener to close the modal on Escape key press.

• Loads the list of cases from the backend when the modal opens.

Features:

• Case Listing:

  • Fetches and displays all cases for the user.

  • Shows loading and error states.

  • Displays a message if no cases are found.

• Pagination:

  • Shows up to 10 cases per page.

  • Provides "Previous" and "Next" buttons for navigation if there are multiple pages.

• Case Selection:

  • Clicking a case selects it and closes the modal.

  • Highlights the currently selected case.

• Accessibility:

  • Modal can be closed with the Escape key or the close button.