“Debug Info” modal

[outoftime]

In many cases it would be helpful for students to quickly get debugging information when working with Popcode’s developers to try to resolve issues. So, let’s create a “debug info” feature, accessible from the hamburger menu, that pops up a modal with the following information (plus any more that we can think of):

• User ID (if logged in)
• Raw user agent
• Parsed user agent info from Bowser
• Viewport dimensions

A one-click copy button would be particularly useful here.

[laxmy]

Hi outoftime, I am looking to contribute to Popcode and would like to give this item a go. Could you please assign this to me?

[outoftime]

@laxmy yep! just added you as a collaborator to the repo, can assign the issue once you’ve accepted the invite. thanks!

[laxmy]

Hi @outoftime , I tried hooking a DebugInfo Component which uses Modal to create a popup. But since Hamburger menu itself is created using an export function, I am not sure how I can pass down the state to the modal(open/close) as props. The solution I was trying was to maintain a state in MenuItem called 'ShowModal' and pass it down as props so that I can toggle this state on OnClick to show the modal. Is there a better way to do this ?