chore(angular-react): Migrate UsersComponent and UsersServices to React

[devin-ai-integration]

chore(angular-react): Migrate UsersComponent and UsersServices to React

Summary

This PR migrates the UsersComponent and UsersServices from Angular to React as part of an incremental migration effort. The Angular components remain in place (not removed per migration guidelines).

Key changes:

• Created useUsers hook to replace the Angular UsersServices injectable, converting Observable-based HTTP calls to async/await with the fetch API
• Created UsersComponent.tsx functional component with loading and error state handling (improvements over the original Angular version)
• Added Jest configuration and React Testing Library for testing React components
• Updated tsconfig.json with jsx: "react-jsx" and esModuleInterop: true for React support
• Added 13 unit tests covering the hook and component behavior

Migration mapping:

Angular	React
UsersServices.getUsers(): Observable<any>	useUsers().fetchUsers(): Promise<void>
@Injectable service	Custom React hook
*ngFor	.map()
(click)	onClick
ngOnInit	Not needed (fetch on button click)

Review & Testing Checklist for Human

• Verify the tsconfig.json changes (jsx, esModuleInterop) don't break existing Angular compilation by running npm run build
• Run npm run test:react to confirm all 13 React tests pass
• Verify the User interface type in useUsers.ts matches the JSONPlaceholder API response structure
• Check that the button styling in UsersComponent.tsx is acceptable (uses inline styles to approximate Angular Material's warn button)

Recommended test plan: Since the React components are not yet integrated into the app routing, you can verify functionality by:

1. Running npm run test:react to execute the unit tests
2. Optionally creating a simple React test harness to render UsersComponent and verify it fetches/displays users from the JSONPlaceholder API

Notes

• The original Angular components were intentionally not removed per the migration playbook guidelines
• Added test:react npm script to run Jest tests separately from Angular's Karma tests
• Loading and error states were added to the React version (not present in original Angular component)

Link to Devin run: https://app.devin.ai/sessions/946df38f8be447979fcde1ec43276630
Requested by: @milind-cognition

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring