rtfeldman / elm-spa-example

A Single Page Application written in Elm
https://dev.to/rtfeldman/tour-of-an-open-source-elm-spa
MIT License
3.28k stars 530 forks source link

A way to not reroute some url modification. #41

Open ivanceras opened 6 years ago

ivanceras commented 6 years ago

Let's say if the user clicks on a button that opens a record, the code will open initialize and open a view, as an enhancement, the url is modified to allow users to share links, but then it will make the app do a reroute/setroute page then open exactly the same view.

So, is there a way to do this:

rtfeldman commented 6 years ago

Sorry, I don't understand. Can you rephrase?

Annotated screenshots might help!

ivanceras commented 6 years ago

In the elm-spa-example, clicking on the tags will not change the url since href is javascript:void(0) and also since onClick (SelectTag tagName) which execute the corresponding update on the models. There's nothing wrong here, except the user can not share the url to other user that is looking on the content for that active tag.

Meanwhile building a complex app such as this user-friendly database-interface, and one of the goal of the app is that whatever the user is looking at, he can copy the url and share it on chat with other users and they will be seeing the same content.

Take notice of the clicking on between tabs inventory, actor and category clicking on those tabs will update the Model and in turn the view.

There are 3 possible ways the user could see the same content:

Item (2) and (3) works perfectly, but item (1) has a lot of complications since: After the model and update has been executed I added a

model =>Cmd.batch [Route.modifyUrl ... ]

to change the browser URL so that users can share the new url based on the new content he is looking. The side-effect is that it seems (3) is triggered, causing it to load afterwards, the reload( triggered re-initialize) is very subtle, since it displays the same view so there is no jumps in between view, but take notice of the loading-indicator at the top.

TL:DR;

If you could make the elm-spa-example to change the url when clicking on tags to something like http://localhost:4000/#/tags/dragons while showing the new content without triggering a reload, then that would solve my issue.

dwayne commented 4 months ago

@ivanceras I solve this exact problem on the profile page which has the article tabs. When you click the tabs the URL changes so you can share either URL to open the page on that tab. At the same time, when on the page and clicking the tab that page doesn’t reload.

For e.g. Maksim Esteban My Articles and Favourited Articles tab.

Additionally, I could exploit the same technique on the home page with the tabs and the tags.