Skip to content

feat:converting js files into tsx files

Kaveri Mamidi requested to merge kviswam into teams

🌟 What does this MR do?

This merge request refactors and enhances the Interaction & Detail Pages by migrating them from JavaScript to TypeScript, improving UI with Tailwind CSS, ensuring lint compliance, and adding unit test coverage.

Updated Pages:

  • Authors.js → Authors.tsx
  • AuthorDetail.js → AuthorDetail.tsx
  • Articles.js → Articles.tsx
  • ArticleDetail.js → ArticleDetail.tsx
  • Collaborations.js → Collaborations.tsx
  • Contact.js → Contact.tsx
  • Events.js → Events.tsx

This update improves type safety, maintainability, UI consistency, and overall code quality.

🎯 Motivation / Use Case

Previously:

  • Pages were written in JavaScript without strict typing
  • No proper data interfaces for Author, Article, or Event
  • Contact form lacked structured validation
  • Some UI alignment inconsistencies existed
  • Limited test coverage

This enhancement solves these issues by:

  • Introducing strong TypeScript typing
  • Improving UI using Tailwind CSS
  • Adding proper validation for Contact form
  • Fixing lint warnings and unused imports
  • Adding essential unit tests

This improves reliability, scalability, and developer experience.

🛠 Implementation Notes

✅ TypeScript Migration

  • Converted all listed pages to .tsx

  • Added interfaces for:

    • Author
    • Article
    • Event

  • Added strict typing for:

    • Props
    • useState
    • Mapping functions

  • Removed usage of any

✅ Contact Page Improvements

  • Added type-safe form state

  • Implemented validation for:

    • Name (required)
    • Email (valid format)
    • Message (required)

  • Displayed proper validation error messages

✅ CSS → Tailwind Migration

  • Replaced custom CSS with Tailwind utility classes

  • Improved:

    • Layout alignment
    • Collaboration cards design
    • Contact form UI

  • Ensured responsive layout (mobile + desktop)

✅ Linting & Formatting

  • Fixed hook dependency warnings
  • Removed unused imports
  • Ensured consistent formatting
  • No ESLint errors remaining

✅ Test Cases Added

Added unit tests using React Testing Library for:

  • Contact form renders correctly
  • Contact form validation works
  • Events page renders event cards
  • ArticleDetail renders content properly
  • Collaborations page renders list correctly

All tests pass successfully.

🧪 How to Test

  1. Pull this branch:

git checkout

  1. Install dependencies:

npm install


3. Run the application:


npm start
  1. Run test cases:

npm test -- --watchAll=false


Verify:

* Pages render without TypeScript errors
* Contact form validation works
* UI alignment and responsiveness improved
* All tests pass successfully


# ✅ Checklist

* Feature implemented as per requirements
* TypeScript migration completed
* Tailwind UI improvements applied
* Lint warnings resolved
* Test cases added and passing
* No breaking changes introduced

Merge request reports