Description

This PR converts the Main class component in Main.tsx to a functional component. The class component is refactored to use React hooks instead of lifecycle methods and state. The state variables are replaced with useState hooks, and the componentDidMount lifecycle method is replaced with the useEffect hook. The methods within the class are converted to functions within the functional component. The contextType is replaced with the useContext hook. This change improves the readability and maintainability of the code.

Changes Made

• Converted the Main class component to a functional component
• Replaced the state object with useState hooks for each state variable
• Replaced the componentDidMount method with a useEffect hook and moved the logic inside the componentDidMount method into the useEffect hook
• Converted the methods within the class component to functions within the functional component
• Replaced the contextType with the useContext hook

Testing Instructions

• Tested the functionality of the Main component by running the application and verifying that it behaves as expected

Related Issues

Resolves #3315

Checklist

• The code builds without any errors
• The code follows the style and coding conventions of the project
• The changes have been tested for functionality
• The PR title and description are clear and concise
• The PR has been reviewed by at least one other engineer

Fixes #3315.

To checkout this PR branch, run the following command in your terminal:

git checkout sweep/convert-main-to-functional-component