[Chore] The Home component handles too many responsibilities

[malparty]

Issue

The file frontend/src/components/Home.tsx handles the following:

• Socket connections provider
• State management for many parts of the Application
• Fetching the keywords (instead of a “KeywordList” component)
• Design of the keyword list and rows
• Keyword Search
• Keyword click
• Toast Messages
• ...

Expected

As much as possible, a React component should focus on a single responsibility. This not only helps with reading and maintaining the code, but also improve the code testability.

• Socket connections and application state can be moved in different provider components
• A KeywordList component could handle the fetch of keywords and the main keyword table. Note that using a separate component for rendering the rows is recommended to improve the page re-rendering
• Search could be moved in a dedicated component that either calls a callback or set a global state value for the search query.
• etc.

[wildan3105]

Thank you for your insightful suggestions. Upon reflection (https://github.com/wildan3105/google-scraper/issues/40#issuecomment-2042372857), I realize that I may have underestimated the frontend implementation while focusing extensively on the backend aspects, which were optional according to the problem statement. Your guidance on adhering to the principle of single responsibility for React components is invaluable, and I wholeheartedly agree with it.

I appreciate your feedback. Moving forward, I will ensure that each React component focuses on a single responsibility to enhance code readability, maintainability, and testability.

Once again, thank you for taking the time to review and provide constructive feedback.