Poulter/44523 react 18 upgrade 1

[hawkespoulterva]

Resolves APPEALS-44522

Description

The following details the changes made to upgrade eFolder to React 18.2.0. The changes made involve necessary syntax updates, complaint versioning, and addressing breaking changes, all of which are made to resolve warnings received during the upgrade process.

React and React-DOM Versions:

• Old: React and React-DOM were at version ^16.2.0.
• Updated: React and React-DOM are now at version 18.2.0.

React-Router-DOM Version:

• Old: React-Router-DOM was at version ^4.2.2.
• Updated: React-Router-DOM is now at version 5.3.4.

*Note - React Router is necessary to upgrade to be compliant with the React 18 which deprecates childContextTypes API which is no longer supported and will be removed in the next major release.
The upgrade is made to v5 to be consistent with Caseflow Frontend Toolkit.

Caseflow Frontend Toolkit:

• Old: It was added with commit hash a05abe6.
• Updated: The toolkit is now specified from the "upgrade-test" branch of the repository.

*Note - the above upgrade to the Caseflow Frontend toolkit is a test branch that points to upgrades necessary for the toolkits compliance with both Caseflow and eFolder. The toolkit itself also requires updates to React 18.2.0. As far as eFolder is concerned the update only includes a change for the Redux Base component which wraps the root and passes the redux store. Caseflow Frontend toolkit upgrade branch

Refactoring of index.jsx

• React 18 introduces createRoot as the recommended way to create a root for rendering in concurrent mode. By updating to use createRoot, the codebase ensures compatibility with React 18 and takes advantage of its new features and optimizations.

Refactoring of the following components:

• DowloadContainer
• WelcomeContainer
• RecentDownloadsContainer

In React 18, the lifecycle methods like componentDidMount, componentWillReceiveProps, and componentWillUpdate are not deprecated or removed. However, they are considered legacy lifecycle methods and are generally discouraged from use in favor of newer lifecycle methods or alternative approaches.

Because of this the above components which use componentDidMount were updated to functional components. These updates align with modern React best practices and can lead to a more maintainable, readable, and performant codebase.

Acceptance Criteria

• Code compiles correctly

Testing Plan

1. Go to ...

• For higher-risk changes: Deploy the custom branch to UAT to test

User Facing Changes

• Screenshots of UI changes added to PR & Original Issue

BEFORE	AFTER

Code Documentation Updates

• Add or update code comments at the top of the class, module, and/or component.

Database Changes

Only for Schema Changes

• Timestamps (created_at, updated_at) for new tables
• Column comments updated
• Verify that migrate:rollback works as desired (change supported functions)
• Query profiling performed (eyeball Rails log, check bullet and fasterer output)
• Appropriate indexes added (especially for foreign keys, polymorphic columns, unique constraints, and Rails scopes)
• Add your indexes safely (see Caseflow::Migrations
• DB schema docs updated with make docs (after running make migrate)
• #appeals-schema notified with summary and link to this PR
• Any non-obvious semantics or logic useful for interpreting database data is documented at Caseflow Data Model and Dictionary

Integrations: Adding endpoints for external APIs

• Check that Caseflow's external API code for the endpoint matches the code in the relevant integration repo
  • Request: Service name, method name, input field names
  • Response: Check expected data structure
• Update Fakes
• Integrations impacting functionality are tested in Caseflow UAT