New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The Page component doesn't handle route change #742

Open
sylque opened this Issue Oct 23, 2018 · 3 comments

Comments

Projects
None yet
4 participants
@sylque
Copy link
Contributor

sylque commented Oct 23, 2018

The Discourse integration code needs to issue route changes in fl-maps. The reason is that, in Discourse, when the user opens a topic associated with a Page, then the fl-maps route needs to be changed to this Page.

The issue reported here occurs when the user is currently viewing a Page. When Discourse triggers a route change to a Page with a different Event id, the URL is changed but the Page is not refreshed. In other words, if you are on https://brightertomorrowmap.com/page/aaaaa and Discourse issues this JS command: history.push({ pathname: '/bbbbb' }), then nothing happens on the screen, except for the URL change in the address bar.

I've made a small test: if, in a Page, you insert a link to another Page, then the link works as expected (i.e. the page is refreshed when clicking the link). That is surprising to me, as the Page code doesn't seem to handle refresh at all. So maybe I'm missing something.

Do I do something wrong? Or is the Page code needs to be worked on?

@badpointer

This comment has been minimized.

Copy link

badpointer commented Oct 23, 2018

I assume it's because you are not telling react router to redirect to that page. Calling the path.history.push() will push an entry to the history stack.
Try swapping push with replace() which replaces the current history on the stack.

If both options don't work try using component.

@badpointer

This comment has been minimized.

Copy link

badpointer commented Oct 23, 2018

Docs: React Router History
You might also want to use Location than history because of mutation issues.

@sylque

This comment has been minimized.

Copy link
Contributor

sylque commented Oct 26, 2018

Thanks, @badpointer.

  • push and replace both show the issue.
  • If, by use Location, you mean changing the route with location.href=..., I think that's an excellent workaround and I will implement it right now! However, the UX will be terrible, as both fl-maps and Discourse will reload when the user clicks a topic. It might also mess up with the browser history, causing issues when users click the "back" button. So it can only be a temporary fix.
  • I'm not quite sure what you mean by "using component".

I can now confirm the issue lies in how the Page component is implemented:

  • The reason why, earlier, I was confused, is because I didn't insert the html link the React way. I used a standard "a" tag, which reloads the app entirely. So it didn't prove anything.
  • However, if, in a Page you insert a link the React way (<Link to={'/page/M7TNaCTahN4fFsKtF'}>Another page</Link>), it doesn't work. The link changes the address bar, but doesn't refresh the page, proving something is wrong in the Page component.
  • This seems to be a common issue with React: see this, for example.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment