Refactor

[Raxxius]

Refactoring

Process

Deep code dive (4 days)

Refactoring (4 days)

Changelist for Refactoring

Layering

Existing client has essentially empty layers in the App.js and page.js that are simply calling another layer. Removing those redundant layers reduced the depth of the project. Additionally the MeasurementSegment.js is a 556 line file with data management, display management, multiple useEffects and Semantic UI all within the same layer.

App.js is now the core data management layer, all useEffects and useStates are called and stored in this layer.
The page folder has been removed in its entirety, as it’s not relevant as the react app is being used as a component and not a page in itself.
MeasurementSegment has become the display layer SemantiGrid, containing Semantic UI logic and the display logic.

At this stage, no further addressing of deeper layers has been conducted.

Exported functions and hooks

Functions that are standalone have been removed from the App.js main into standalone file in functions folders. Similarly useEffects have been turned into custom hooks and moved to the hooks folder.

4 Custom hooks have been created, useErrorHandling, useSelectedTheme, useCheckForData useRcpchAPi have been created in the new hooks folder along with useGlobalState
Semantic UI constructor functions createSemanticPanes, createFormPanes and createTabPanes have been created in the components/SemanticGrid subcomponent folder
Global constants have been moved into assets/config.js

Separation of components

ErrorModal has been turned into a separate component
Semantic UI is now nearly entirely contained in the MeasurementSegment which acts as a display layer for

Conclusions

App.js is now a 252 line file with better separation of concerns. MeasurementSegment has become a display layer for Semantic Grid components MeasurementForm and ResultsForm.

Still to do

Review props and data layer position.
At this moment a very large number of props are being passed down to SemanticGrid, a proper assessment of what props can be moved from the App.js file to the SemanticGrid layer.
This will also allow for the complete removal of Semantic UI from the App.js layer.
Correct identification and grouping of props will assist in future updates.

MeasurementForm.js
This is another 600+ line single file that is used by the createFormPanes component, and it should be further separated into data management, subcomponents and functions.

Better commenting of files to allow for ease of understanding of components and their functions

Completing these steps will allow for easier completion of updates and maintenance to the client.