Code Quality Modularization Decoupling Testing

[ChromaticPanic]

Some components are too highly coupled and violate the single responsibility principle making some components hard to test and debug

I would like to propose the following solution:

• Break down components into smaller parts
• Separate Component Logic from View
• e.g. ClassifierContainer.tsx , ClassifierView.tsx
• then export as one Module
• This allows the React state logic to be tested separately from the UI structure
• Make functions pure
• Move functions that don't depend on React hooks into their own modules
• In some cases, e.g. deep component nesting, React Context can be used to share information without having to rely on passing props repeatedly into a deep component tree

Tasks

• Factor out species list autocomplete component
• Break down Microscope Feed Component
• uuid and backendurl useContext

[ChromaticPanic]

For the Body specifically, I think we can move all the popup JSX code down into the component tree close to the code that triggers them if we show them as Modals.

[rngadam]

Ensure that @CFIALeronB understands the plan for change so he can adequately comment on it.