[MAINT] - Maintenance refactor (not redesign)

[gabalafou]

This issue is to provide a reference URL and place to track work on refactoring the UI codebase.

This work is NOT a redesign. This is not about changing the look and feel of the current UI. It is just about making the code behind the UI easier to work with by refactoring it. To an end user, there should be no apparent change. But for people working in the code base, adding features, it should become much easier.

Currently the code base has a number of problems:

• duplicated code
• fuzzy boundaries between components
• curious patterns and anti-patterns
• over-reliance on side effects during component rendering (i.e., the useEffect() hook is abused)
• and more

For more on the point about side effects, read the first section of React anti-patterns that lead to unnecessary complexity.

[gabalafou]

The approach that I plan to take:

1. Create a new directory outside the repo using a scaffold for a React app (such as create-react-app)
2. Copy over files from the current repo as needed
   • The idea is that I do not want to carry over cruft
   • But I will be very thorough going through the files
3. Overwrite the current directory with the new directory
   • I will keep the new directory structure as close as possible to the old structure in order to keep history
   • But I think it is inevitable that history will be lost because part of the refactor involves changing component and module boundaries, which will require things like splitting one file out into multiple files or consolidating code across multiple files into one file.
4. Create a new branch and push to GitHub