Bug for build regarding useState and router:

[Coltensiemer]

GitHub Issue: Bug for Build Regarding useState and useRouter

Description

Objective: To address and resolve a bug related to the conditional use of React Hooks (useState and useRouter) which causes build errors. The specific errors are:

• Error: React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. react-hooks/rules-of-hooks
• Error: React Hook "useRouter" is called conditionally. React Hooks must be called in the exact same order in every component render. react-hooks/rules-of-hooks

Tasks:

1. Identify Conditional Hook Usage:

   • Locate the lines of code where useState and useRouter are used conditionally (line 102 and line 106, respectively).
   • Understand the conditions under which these hooks are being called.

2. Refactor Code:

   • Refactor the component to ensure that all hooks are called unconditionally, following React's rules of hooks.
   • Move the hook calls to the top level of the component, outside of any conditional statements or loops.
   • Ensure that the logic which depended on conditional hook calls is adjusted to work correctly after the refactoring.

3. Test Changes:

   • Thoroughly test the refactored component to ensure it functions as expected.
   • Verify that the build errors are resolved and no new issues are introduced.

4. Code Review:

   • Submit the changes for code review to ensure compliance with best practices and to catch any potential issues.

5. Update Documentation:

   • If necessary, update any relevant documentation to reflect changes in the component structure or logic.
   • Provide clear explanations of the changes and reasoning behind the refactoring.

Benefits:

• Ensures compliance with React's rules of hooks.
• Prevents build errors related to conditional hook usage.
• Maintains functionality and logic of the component.

Requirements:

• Familiarity with React hooks and their rules.
• Understanding of the project's current state and logic.
• Ability to refactor and test components effectively.

Acceptance Criteria:

• The useState and useRouter hooks are no longer called conditionally.
• The component builds without errors.
• The refactored component functions as expected in all scenarios.
• Documentation and code comments are updated to reflect changes and provide clarity.

Additional Information

Please review the proposed refactoring plan and provide feedback or suggestions. Ensure that all changes are thoroughly tested before merging to maintain project stability.

[Coltensiemer]

Fixed build issue, commit and merge to development