Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Dec 8, 2025

The component used React class components and lacked test infrastructure. Updated to React 19 with modern patterns and comprehensive capability tests.

Dependency updates

  • React 16 → 19.0.0
  • TypeScript 3.8.3 → 5.7.2
  • Added Jest 29.7.0 + React Testing Library 16.1.0

Component modernization

  • Converted TurkeyMap class component to functional component with hooks
  • Replaced this.state with useState
  • Replaced class methods with useCallback for memoization
  • Fixed event handlers to use currentTarget.querySelector('path') instead of target for delegated events

Before:

export default class TurkeyMap extends Component<IProps, IState> {
  onMouseEnter = (event) => {
    (event.target as SVGGElement).style.fill = customStyle.hoverColor;
  }
}

After:

const TurkeyMap: React.FC<IProps> = ({ customStyle, ... }) => {
  const handleOnMouseEnter = useCallback((event) => {
    const path = event.currentTarget.querySelector('path');
    if (path) path.style.fill = customStyle.hoverColor;
  }, [customStyle.hoverColor]);
}

Test coverage

Added 26 tests covering:

  • Rendering with default/custom props
  • Mouse interactions (hover, click, enter, leave)
  • Tooltip positioning and visibility
  • Custom styling application
  • City wrapper HOC pattern
  • Re-render stability

All props maintain backward compatibility. Updated tsconfig.json to use react-jsx transform for React 19.

Original prompt

This section details on the original issue you should resolve

<issue_title>Adapt Component for the newest ReactJS version</issue_title>
<issue_description>The component is quite old and needs to be adapted with the newest ReactJS version.

Also there needs to be capability tests implemented.</issue_description>

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


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI and others added 2 commits December 8, 2025 22:27
- Updated all dependencies to latest versions (React 19, TypeScript 5.7, etc.)
- Converted TurkeyMap from class component to functional component with hooks
- Fixed event handlers to properly target path elements via currentTarget
- Updated TypeScript config for React 19 JSX transform
- Added Jest and React Testing Library
- Created comprehensive test suites for TurkeyMap and Tooltip components
- All 26 tests passing successfully

Co-authored-by: erdigokce <17235148+erdigokce@users.noreply.github.com>
- Fixed event handler to use event.target correctly for path detection
- Removed key prop from city group element, now applied in wrapper
- Eliminated redundant object allocation in getCities
- Improved type safety in test with proper type assertion
- Added proper key handling in renderCityWrapper using cloneElement
- Used nullish coalescing operator for safer attribute access

Co-authored-by: erdigokce <17235148+erdigokce@users.noreply.github.com>
Copilot AI changed the title [WIP] Adapt component for the newest ReactJS version Modernize to React 19 with functional components and add test coverage Dec 8, 2025
Copilot AI requested a review from erdigokce December 8, 2025 22:32
Update brace-expansion and semver packages to latest versions
- Changed @types/react and @types/react-dom to use version ranges.
- Updated peer dependencies for React to allow versions >=16.8.0.
- Added externals configuration for React and ReactDOM in webpack.
- Created CI workflow for testing against multiple React versions.
@erdigokce erdigokce marked this pull request as ready for review December 10, 2025 20:07
@erdigokce erdigokce merged commit 7f49781 into master Dec 10, 2025
5 checks passed
@erdigokce erdigokce deleted the copilot/adapt-component-to-reactjs branch December 10, 2025 20:07
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.

Adapt Component for the newest ReactJS version

2 participants