Refactor: Remove legacy components and migrate to TypeScript by vinothkumar-onyx · Pull Request #35 · drajer-health/eCRNow-UI

vinothkumar-onyx · 2025-09-16T06:54:55Z

This pull request makes significant changes to modernize the build system, deployment, and environment configuration for the eCRNow-UI project. The main updates include migrating from Create React App to Vite, overhauling Docker and Nginx configuration, and updating documentation to reflect the new workflows. Several legacy files and configurations are removed, and new mock/test resources are added.

Build System and Tooling Modernization:

Migrated the project from Create React App to Vite, updating scripts in package.json and adding Vite-specific dependencies. The build, development, and test commands now use Vite and Vitest instead of react-scripts and Jest.
Added a new .env.example with Vite-compatible environment variables, replacing the old env.example that used React's naming conventions. [1] [2]
Updated the main HTML entry point to a new index.html for Vite, replacing the previous CRA-style public/index.html. [1] [2]

Docker and Deployment Changes:

Replaced the old Docker setup with a new multi-stage Dockerfile (root-level), which builds the app with Node, then serves it with Nginx. The Nginx configuration and Docker Compose files are updated or removed to match the new structure. [1] [2] [3] [4]
Removed outdated Docker and deployment documentation, and updated or added new instructions for building and deploying with the new setup. [1] [2] [3]

Mock and Testing Resources:

Added mock server files and example data for local testing, including mock/db.json, mock/json-server.json, mock/routes.json, and mock/server.js. [1] [2] [3] [4]
Added a sample db.json for API testing and local development.

Styling Improvements:

Updated src/App.css to add new CSS variables and improved form validation styles, aligning with the new primary color and validation feedback.

Summary of Most Important Changes

Build System and Environment Configuration:

Migrated from Create React App to Vite, updating scripts and dependencies in package.json, and switching environment variable usage to Vite's conventions (e.g., VITE_ECR_BASE_URL). [1] [2] [3]
Replaced public/index.html with a new Vite-compatible index.html. [1] [2]

Docker and Deployment:

Introduced a new multi-stage Dockerfile at the project root for building and serving the app with Nginx, and updated Nginx configuration accordingly. [1] [2]
Removed old Docker Compose and Dockerfile setup, and deprecated related documentation. [1] [2] [3] [4]

Documentation:

Added and updated documentation for separating UI from backend, building, and deploying the UI independently (including Maven/Tomcat instructions).

Mock and Testing:

Added mock server and test data files to support local development and API testing. [1] [2] [3] [4] [5]

Styling:

Improved form validation and color theming in src/App.css.

Release 3.1.2 changes

- Deleted KAR, PublicHealthAuthority, and PublicHealthAuthorityList components. - Removed index.js and replaced with main.tsx for Vite compatibility. - Introduced serviceWorker.ts for service worker registration. - Added TypeScript configuration (tsconfig.json) and Vite configuration (vite.config.ts). - Updated withRouter to TypeScript. - Added setupTests.ts for testing library setup.

Copilot

Pull Request Overview

This pull request refactors the application by removing legacy components and migrating to TypeScript with Vite. The refactoring modernizes the codebase by replacing Create React App with Vite, converting JavaScript components to TypeScript, and removing outdated components.

Key changes include:

Removed legacy JavaScript components (KAR, PublicHealthAuthority, PublicHealthAuthorityList)
Replaced index.js with main.tsx for Vite compatibility
Converted withRouter helper from JavaScript to TypeScript
Added TypeScript configurations and reusable form components

Reviewed Changes

Copilot reviewed 83 out of 98 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
vite.config.ts	Vite configuration with React plugin and test setup
src/withRouter.tsx	TypeScript version of router HOC
src/setupTests.ts	Test environment setup for TypeScript
src/serviceWorker.ts	Migrated service worker with TypeScript
src/main.tsx	New TypeScript entry point replacing index.js

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-16T06:57:02Z

+  onUpdate?: (registration: ServiceWorkerRegistration) => void;
+};
+
+const isLocalhost = Boolean(


The old isLocalhost code is commented out instead of being removed, creating duplicate logic. Remove the commented-out code block (lines 13-135) to maintain code cleanliness.

… HealthCareSettings component

Copilot

Pull Request Overview

Copilot reviewed 84 out of 99 changed files in this pull request and generated 5 comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-16T11:40:35Z

+    const publicUrl = new URL(process.env.PUBLIC_URL!, window.location.href);
+
+    if (publicUrl.origin !== window.location.origin) {
+      return;
+    }
+
+    window.addEventListener("load", () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;


Using non-null assertion operator (!) on process.env.PUBLIC_URL without checking if it exists could cause runtime errors. The environment variable might be undefined in some environments.

Suggested change

const publicUrl = new URL(process.env.PUBLIC_URL!, window.location.href);

if (publicUrl.origin !== window.location.origin) {

return;

}

window.addEventListener("load", () => {

const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

const publicUrlValue = process.env.PUBLIC_URL || '/';

const publicUrl = new URL(publicUrlValue, window.location.href);

if (publicUrl.origin !== window.location.origin) {

return;

}

window.addEventListener("load", () => {

const swUrl = `${publicUrlValue}/service-worker.js`;

Copilot · 2025-09-16T11:40:35Z

+      reporter: ["text", "html"],
+      exclude: [
+        "src/Services/AxiosConfig.ts",
+        "./vite.config.ts",


[nitpick] Including the Vite config file itself in the test coverage exclusion list is unnecessary since Vite configuration files are not typically part of test coverage analysis.

Suggested change

"./vite.config.ts",

Copilot · 2025-09-16T11:40:36Z

-    }
+
+  function handleUsernameChange(e: ChangeEvent<HTMLInputElement>): void {
+     const value = e.target.value.replace(/\s/g, "");


Automatically removing all spaces from username and password inputs without user notification could lead to confusion if users intentionally include spaces. Consider providing visual feedback or validation messages instead.

Copilot · 2025-09-16T11:40:36Z

-      return;
-    }
+  function handlePasswordChange(e: ChangeEvent<HTMLInputElement>): void {
+    const value = e.target.value.replace(/\s/g, "");


Automatically removing all spaces from username and password inputs without user notification could lead to confusion if users intentionally include spaces. Consider providing visual feedback or validation messages instead.

… CDA_R30

Copilot

Pull Request Overview

Copilot reviewed 84 out of 99 changed files in this pull request and generated 5 comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-16T05:07:34Z

+ import { useNavigate } from "react-router-dom";
+import React from "react";


[nitpick] The React import should come before the react-router-dom import for better organization and consistency with typical React import ordering conventions.

Suggested change

import { useNavigate } from "react-router-dom";

import React from "react";

import React from "react";

import { useNavigate } from "react-router-dom";

Copilot · 2025-10-16T05:07:34Z

+      setTimeout(() => {
+        localStorage.removeItem("logoutSuccess");
+      }, 1000);


[nitpick] The hardcoded 1000ms timeout should be extracted to a named constant for better maintainability and to make the timing intention clearer.

Copilot · 2025-10-16T05:07:34Z

+      setTimeout(() => {
+        localStorage.removeItem("sessionExpired");


The timeout value 181 appears to be missing a closing parenthesis and the value seems arbitrary. This should be consistent with other timeout values and properly closed.

Copilot · 2025-10-16T05:07:35Z

+                onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+                    if (
+                        type === "number" &&
+                        min !== undefined &&
+                        e.target.value !== "" &&
+                        !isNaN(parseFloat(e.target.value)) &&
+                        parseFloat(e.target.value) < min
+                    ) {
+                        const target = { ...e.target, value: String(min) };
+                        const syntheticEvent = {
+                            ...e,
+                            target,
+                        } as React.ChangeEvent<HTMLInputElement | HTMLSelectElement>;
+                        onChange(syntheticEvent);
+                        return;
+                    }
+                    onChange(e);
+                }}


[nitpick] The synthetic event creation is complex and could be extracted to a separate helper function for better readability and testability.

Copilot · 2025-10-16T05:07:35Z

+import * as path from "path";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),


[nitpick] Using import * as path is unnecessary when you only need the resolve method. Consider using import { resolve } from "path" for more specific imports.

Suggested change

import * as path from "path";

export default defineConfig({

plugins: [react()],

resolve: {

alias: {

"@": path.resolve(__dirname, "src"),

import { resolve } from "path";

export default defineConfig({

plugins: [react()],

resolve: {

alias: {

"@": resolve(__dirname, "src"),

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…r setup

…organization

nbashyam and others added 2 commits April 22, 2025 15:32

Merge pull request #24 from drajer-health/3.1.2

32d91f7

Release 3.1.2 changes

Copilot AI review requested due to automatic review settings September 16, 2025 06:54

chore: add example environment configuration file

7c4efd0

Copilot AI reviewed Sep 16, 2025

View reviewed changes

vinothkumar-onyx added enhancement New feature or request ready-to-review do not merge labels Sep 16, 2025

vinothkumar-onyx assigned nbashyam Sep 16, 2025

refactor: remove unused service worker registration code and clean up…

7eea302

… HealthCareSettings component

vinothkumar-onyx requested a review from Copilot September 16, 2025 11:38

Copilot AI reviewed Sep 16, 2025

View reviewed changes

fix: update output formats to include CDA_R31 and correct mapping for…

a3a550e

… CDA_R30

vinothkumar-onyx changed the base branch from main to 3.1.2 October 16, 2025 05:05

vinothkumar-onyx requested a review from Copilot October 16, 2025 05:06

Copilot AI reviewed Oct 16, 2025

View reviewed changes

vinothkumar-onyx and others added 3 commits October 16, 2025 12:09

Update src/Components/HealthCareSettings/HealthCareSettings.tsx

58d0768

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

docs: update README to enhance clarity and provide better guidance fo…

8e4eae2

…r setup

docs: update setup instructions for eCRNow-UI to improve clarity and …

2f41986

…organization

		import { useNavigate } from "react-router-dom";
		import React from "react";

		setTimeout(() => {
		localStorage.removeItem("sessionExpired");

Uh oh!

Conversation

vinothkumar-onyx commented Sep 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI Sep 16, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Sep 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 16, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Sep 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vinothkumar-onyx commented Sep 16, 2025 •

edited

Loading