modals should be accessible via URL

[cvan]

1. load https://hubs.mozilla.com/
2. scroll to footer at the bottom of the page
3. on desktop, hover over the first three links and notice the URL tooltips are https://hubs.mozilla.com/# (from a[href="#"])

ideally, at these URLs, the respective modals could be opened (or links be opened):

• /contact - Join the Conversation
• /subscribe - Get Updates
• /report - Report Issues
• /terms - Terms of Use
• /privacy - Privacy Notice

hashes (e.g., #contact) are possible but would not be preferable, as hashes don't appear in server logs/analytics (unless manually handling them in client-side JS).

[gfodor]

sooo is this a request to add React Router? I am not sure how to prioritize.

[cvan]

sooo is this a request to add React Router? I am not sure how to prioritize.

the History API, although confusing, can be used for this (example). React Router, under the hood, is using the History API.

what I was going to suggest is having the server return the same /index.html for each of those endpoints, and then look at window.location.pathname conditionally (in addition to the existing onClick plumbing).

here's example of using that technique. and scripts for generating the static files:

• https://github.com/WebVRRocks/play/blob/master/scripts/routes.json
• https://github.com/WebVRRocks/play/blob/master/scripts/build.js

I'd be happy to help with this.

[gfodor]

yep, understood -- just wondering if adding react router is the desired action item for this (and adding routes for the above dialogs) I think it makes sense but adding proper routing in general may have some incidental complexity unrelated to the case above. I think for the index page it should be fine though.

[robertlong]

This still seems desirable. Perhaps we do need to add react router to display these modals.

[suhailsinghbains]

Hi, Can I please work on this bug ? I am new to this project.

[brianpeiris]

Hi @suhailsinghbains. Yes, thanks, I think we do still want URLs for the dialogs listed above, unless @netpro2k or @gfodor disagree.
If you're taking this on, note that we've recently added React Router to the project, so that's what we should use for these URLs and dialogs as well: #823

[suhailsinghbains]

I was looking through the code where, I could write the Router Code, I found a file state-route.js I wasn't able to add another Route, so, I omitted the line L23, the project works just fine. Hence, I wasn't able to debug it, please help me :)

[gfodor]

hey @suhailsinghbains thank you for offering to help with this issue! the state-router library we have in place is primarily used in the main Hub room page (hub.html) and has not been integrated into the homepage (index.html). For the homepage, it seems like we'd want to use normal URL transitions, not state oriented transitions, so a standard React Router setup in index.html would probably be just fine. If that's something you'd like to do to ensure the back button works properly on the home page we'll welcome the PR for review!