Motivation and Context

"Get User Info" button console output not visible

Problem

The "Get User Info" button logged data to the browser console, but the on-page console div was not visible because it was rendered outside the loggedInView component.

Solution

• Moved the console div inside loggedInView so it renders when logged in
• Added toggle functionality: button text switches between "Get User Info" and "Hide User Info"
• Console only appears when the button is clicked
• Reused existing #console CSS class (no new CSS rules)

Changes

• Console div moved from outside conditional render to inside loggedInView
• Added useState to control console visibility
• Added useRef and useEffect to properly update console content
• Button now toggles console visibility on/off

Testing

Jira Link: NA

How has this been tested?

Tested local react app:

1. Log in to the app
2. Click "Get User Info" — console box appears with user data
3. Click "Hide User Info" — console box disappears
4. Button text toggles appropriately

Screenshots (if appropriate):

Types of changes

• [x ] Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• [ x] My code follows the code style of this project. (run lint)
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.
• My code requires a db migration.