We need to design hyperlinks for statebus

[toomim]

• I don't know how to use it right now.
• When you open a link in a new tab, it shouldn't trigger the change on the current tab
• I don't know what {trigger: true} means
• Links should be as simple as possible to specify
• Can't go to &selected=%2Fpoint%2F3466 from the homepage. It gets stripped from the url.
• If I add an extra / to the url, it gets stripped
• When these things are stripped, it adds the old url to the history, auto-redirecting to the stripped url, which means you can't go back beyond the old url because it'll immediately redirect you to the new one as soon as you try

[toomim]

How might I learn how hyperlinks work now?

[tkriplean]

You could follow those referenced commits. Or browse browser_location.coffee.

Michael Toomim wrote:

How might I learn how hyperlinks work now?

— Reply to this email directly or view it on GitHub https://github.com/tkriplean/ConsiderIt/issues/35#issuecomment-104778617.

[toomim]

Ok thanks. I actually opened up the commits but it was over a thousand lines of diffs to understand. browser_location.coffee looks better. I'm most interested in how to use it as a developer who wants to make a hyperlink.

[tkriplean]

Cool, thanks for clarifying.

As a developer, you don't need to do anything special.

Internal link:

           A
              style: {color: '#888'}
              href: "/proposal/23432/edit"
              'Edit'

External link:

           A
              style: {color: '#888'}
              href: "http://google.com"
              'Google'

There are some esoteric options, but the basics almost always work.

One caveat is that internal links must be relative.

onClick handlers will work on your links.

Michael Toomim wrote:

Ok thanks. I actually opened up the commits but it was over a thousand lines of diffs to understand. browser_location.coffee looks better. I'm most interested in how to use it as a developer who wants to make a hyperlink.

— Reply to this email directly or view it on GitHub https://github.com/tkriplean/ConsiderIt/issues/35#issuecomment-104783567.

[toomim]

Ok so here's what I'm learning:

• There's a "location" statebus key. This has a URL broken up into
  • Path (e.g. "/paper_43")
  • Query_params (e.g. {"results": true})
• There's an override for the A tag. It looks like it automatically creates a faux-hyperlink that emulates the behavior of a normal hyperlink except that instead of doing a page reload it just changes the state of "location" when clicked.
  • It lets you open pages in new tabs by holding down command or control
  • But if the URL is absolute, it will revert to a normal hyperlink?
• So the way to use this is to make the page depend on the "location" state, and then make hyperlinks in the page with the new A tag that will change that state.

[toomim]

I'm guessing there might also be some sort of conventions for designing your react components to depend on the path... like seeing "/paper_43" and then extracting out the paper_43 part and knowing to load that page. But I bet for consider.it so far it's so simple that this is probably just done by hand somewhere in franklin.

[toomim]

Thank you. This is very cool.

[tkriplean]

The "router" / Page in considerit is now just a component that depends on the location key.

https://github.com/tkriplean/ConsiderIt/blob/master/%40client/franklin.coffee#L2977

Michael Toomim wrote:

I'm guessing there might also be some sort of conventions for designing your react components to depend on the path... like seeing "/paper_43" and then extracting out the paper_43 part and knowing to load that page. But I bet for consider.it so far it's so simple that this is probably just done by hand somewhere in franklin.

— Reply to this email directly or view it on GitHub https://github.com/tkriplean/ConsiderIt/issues/35#issuecomment-104785304.

[tkriplean]

Glad you like it. I imagine it can be improved upon. I only took it a certain distance and moved on.

Michael Toomim wrote:

Thank you. This is very cool.

— Reply to this email directly or view it on GitHub https://github.com/tkriplean/ConsiderIt/issues/35#issuecomment-104785576.

[toomim]

Ok cool. That explains the full loop. Thanks!