Skip to content

implementation.md

Latest commit

 

History

History
52 lines (41 loc) · 2.82 KB

implementation.md

File metadata and controls

52 lines (41 loc) · 2.82 KB

List of core requirements done

  • Payment table renders data with headers, paging (page=1, size=5) and i18n strings.
  • Search by payment ID with submit; Clear Filters resets search/currency/page.
  • Currency filter works and combines with search.
  • Error handling for 404/500 plus generic/network fallback messaging.
  • Pagination controls with correct disabled states; page label + total count shown.
  • Amount/date formatting per spec; empty state messaging.
  • Lint, tests, and build all pass.

Edge cases considered and extra features done

  • Locale-aware currency formatting with safe fallback.
  • Status badges mapped to known statuses with neutral fallback.
  • Customer names truncate with tooltip to protect layout.
  • Filters persist in URL (search, currency, page) for refresh/share.
  • Search input enables browser autocomplete for prior queries.
  • Added a payment details modal (triggered per row) to show full record fields without widening the table; mobile table hides date/currency/status columns to keep the action visible.
  • Modal closes on Escape key for keyboard accessibility.
  • React.memo on PaymentRow to prevent unnecessary re-renders.
  • Search auto-clears when input is emptied (preserves currency filter).
  • Defensive defaults for props to handle edge cases like browser tab suspension.

Libs added (beyond starter) and why

  • Zustand added for lightweight global filter state with minimal re-renders.

Things I considered and assumptions

  • Kept CURRENCIES list as shipped (includes JPY/CZK); unions match that list.
  • Status includes completed/pending/failed/refunded; assume backend sticks to these.
  • MSW mocks the API; no AbortController added to keep scope lean.
  • Mock data includes address/description; a modal was added to present full details in a compact table layout.
  • Considered prefetching next page but deemed unnecessary for current payload size (~1KB).
  • Chose array filter over HashMap for mock search because it supports partial matching (.includes()) and multi-field search (id, status, currency); a HashMap only benefits exact key lookups.

Additional tests added

  • Clear Filters visibility and reset of currency dropdown.
  • Pagination navigation (Next/Previous enablement and single-page disable).
  • Date formatting pattern assertion.
  • Empty state response handling.
  • Payment details modal opens/closes and renders full record fields.

What I'd do with more time

  • Add server-driven sorting and persisted column sorts.
  • Debounce search input and add AbortController-backed cancellation for in-flight requests.
  • Virtualization (react-virtual) for rendering 10k+ rows without performance degradation.
  • Error tracking integration (Sentry) for production monitoring and debugging.
  • Runtime validation (Zod) for API responses and input sanitization.
  • E2E tests (Playwright) for critical user flows and accessibility audits.