Skip to content

Convert 7 UI primitive class components to functional#700

Merged
rzueger merged 1 commit intodevelopfrom
refactor/functional-components-ui-primitives
Apr 16, 2026
Merged

Convert 7 UI primitive class components to functional#700
rzueger merged 1 commit intodevelopfrom
refactor/functional-components-ui-primitives

Conversation

@rzueger
Copy link
Copy Markdown
Member

@rzueger rzueger commented Apr 16, 2026

Summary

  • Convert Button, Dropdown, SingleSelect, IncrementationField, LabeledComponent, ClipboardCopier, and QrCodeGenerator from class components to functional components with hooks
  • Replace PropTypes with TypeScript interfaces and default parameters
  • Use render-time sync pattern (not useEffect) for prop-to-state synchronization in Dropdown and SingleSelect, preserving the original componentWillReceiveProps/componentDidUpdate timing to avoid visual flash
  • Use useRef for Dropdown's async onBlur callback to prevent stale closure in requestAnimationFrame
  • Replace withTranslation() HOC with useTranslation() hook in QrCodeGenerator

Test plan

  • npm test — 1746 tests pass
  • npm run typecheck — clean
  • Reviewed for stale closure issues in async handlers (rAF, timeouts)
  • Reviewed prop-to-state sync timing matches original lifecycle methods
  • Cypress E2E — Button, Dropdown, SingleSelect, IncrementationField are exercised by departure/arrival wizard specs

Convert Button, Dropdown, SingleSelect, IncrementationField,
LabeledComponent, ClipboardCopier, and QrCodeGenerator from
class components to functional components with hooks.

Replace PropTypes with TypeScript interfaces. Replace
componentWillReceiveProps/componentDidUpdate prop-to-state
sync with render-time sync pattern to avoid visual flash.
Use useRef for Dropdown's async onBlur to prevent stale
closure reads. Replace withTranslation HOC with
useTranslation hook in QrCodeGenerator.
@rzueger rzueger merged commit 29f0bcc into develop Apr 16, 2026
2 checks passed
@rzueger rzueger deleted the refactor/functional-components-ui-primitives branch April 16, 2026 07:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant