I have a data visualization tool written with React. I want to make sure that the URL for the page always refers to the view that the user is currently looking at, and that when they e.g. pan and zoom, or change display settings, the URL is updated so that it will take them back to the same view if they visit it in the future.
(Google Maps works like this; as you pan and zoom the coordinates in the URL get updated to point to where you are currently looking.)
React has tools like React Router to access URL path components and query parameters, but they seem mostly to be designed around a normal multi-route single-page application. You might <Link> to a different route, but you aren't meant to end up at a different route every time you change a dropdown, or type a character in a textbox, or drag to pan something. If you did, the number of history entries created would be unmanageable.
Is there anything in React that can be used to two-way bind page state fields and fields in the URL, so that React will keep them in sync for me? I want to be able to, in the middle of interacting with my application, copy-paste the URL into a new browser window, and have at least the most important parts of my application state be restored, even when that state doesn't map cleanly to the idea of being "on a page".
Related
I am writing a mobile app and when the user sees some screens of the app for the first time, I would like to show a tooltip, explaining some of the functionality.
For instance, the user navigates to the profile page, and I show a tooltip on the add icon, saying something like "you can add a photo here".
Obviously I dont want to show this tooltip every time the user navigates to the profile page, so what is the correct way of doing so? Is it via redux? Keeping some state like "tooltipWasShown"?
Or should I write a custom hook? Something which checks if the tooltip was shown? (this should happen again via redux I guess)
I dont think it is a unique problem, but I couldn't find any blog posts/examples of what is the way to implement it. Any suggestions are welcome!
You will need to use Async Storage for the save data about tutorial, if user reload app redux will be empty. Or will add isFirstEnter field to user in DB and then check this field
So like the title says, I'm using Google Tag Manager to send events to Facebook. Most events seem fine any only fire once, except the view page event. The event is setup to trigger using GTM's history trigger because we're using React for our site.
Originally it was setup to fire on all history changes, but I notice when using preview mode in GTM that there were two history changes being fired.
1: gtm.historyChange
2: gtm.history change-v2
So, I updated the trigger to only fire on some changes and set: Event equals gtm.historyChange With this change I now only see one history change in GTM preview mode, but I still see two in the fb pixel helper chrome extension. One Page event has the an event ID and params I want to see, the other has nothing.
I'm no analytics or pixel expert so even pointing to a possible reason why this is happening would be really helpful.
I believe that the Facebook pixel already considers history change as a page view, so you are double counting it by also triggering it on the history change. Just load it on page view only and it should resolve the issue.
would anybody here know if it's possible to do something like what happens in this screen recording? https://www.dropbox.com/s/snhhbeq8knk5dyc/modal-window-routing.mp4?dl=0
It's about routing a modal window, while keeping the UI underneath intact. Normally I'd say that to achieve this in React router the URL would need to encode both what's behind, and the modal. Maybe with some nesting scheme (e.g. /mainview/settings/general). But Outlook web manages to do so while not reflecting in the URL the view that was present when the modal was fired.
Note in the recording how the URL for the settings modal is the same, regardless of whether you open it from the Drafts or the Sent Items or wherever. However, the view from which you opened is kept rendered, and it's where you go back to when you close the modal.
according to the react-router-dom documentation, the following link lays out the proper way to go about achieving your desired result https://reactrouter.com/web/example/modal-gallery
I have a design where login screen looks completely different from the dashboard UI.
Once the user logs in he is shown a dashboard where he can control things.
Now,the login screen just occupies the whole view with a form box in centre.
once user logs in, then he is taken to the dashboard.
In our current approach we have kept login as a separate angular app and dashboard as separate as I am planning to use a view that changes except the sidebar and header as the ng-view for teh dashboard.
Currently the whole login screen is a separate app, which i feel is little weird when it comes to dealing with things, so is it possible to have an overlay which occupies the whole screen and goes away when the user logs in ?
Of course it is. There are a couple options here. Some folks simply force you to the /login route until a successful login has been completed, token stored, etc. The other option is that you use a full-sized, absolutely-positioned container, with highest z-index, and place it on your main index.html. Until something changes, that's all you'll see. Then, use ng-If to remove that container once login is complete and a property of the view-model has been updated, such as navModel.loginComplete=true;
When navigating around the developer's guide for AngularJS, I noticed that I do not go back to my last scroll position when navigating back to a page using the back button. Instead, I go right back to the top. Since the developer's guide is built with AngularJS, I am afraid that, when I build my own web application with AngularJS, it will annoy my users if they have this same experience. Why is this happening, and how can it be fixed? Do I need to use HTML5's history API somehow?
Go to the developer's guide and see this behavior yourself: http://docs.angularjs.org/guide/directive
If you want to fix it, I can think of an idea of keeping the track of every route scroll position in a map (in service or on a rootScope) - when you are leaving the page ($routeChangeStart listener) just save the scroll position together with route path.
And when coming to any page, you can check if a record in a map exists for the route path and scroll window to desired position on $routeChangeSuccess event
You should look into the Angular $anchorScroll service.
http://docs.angularjs.org/api/ng.$anchorScroll
It is for exactly your scenario!
The sample code pretty much speaks for itself.