Refactoring CSS file

[ctrlaltaf]

index.css is getting extremely large. All components use this file to define their CSS files. I think it would be beneficial to make independent CSS files for each Component i.e. Query.jsx has a corresponding Query.css.

[ctrlaltaf]

In addition to this, I think Query.jsx is the main focus of a refactor. Some of the follownig things are things to achieve in the refactor

• Many state variables are used. Seeing which ones are redundant/could be combined into one state would be helpeful.
• Many useEffects are used to signal when to render components and when to display information. Would be helpful to sketch out the lifecycle of components in query.jsx can be a starting point to see which are redundant/more or less important/needs refactoring
• Components in query.jsx take many props. We can potentially determine what are necessary information to transfer between components and this would help the refactoring
• Researching best practices for using many useState variables and useEffects
• Research best practice for API fetch calls. I think we can refactor where and how we do fetch API calls to make it cleaner to understand and how information is passed through the websit

[oliverfanderson]

https://stackoverflow.com/questions/32041281/one-big-css-file-vs-multiple-small-css-files