React popup with router - reactjs

I have a redux store named as cart and once I click checkout button I am moving to another route order summary. I want to keep cart alive because if I click back button on order summary it must show me the cart with stored data?
Please help how can I do this?

Related

How to trigger a delayed function call after you have navigated away from the page in React

So I have a really ask but the implementation is eluding me.
I want to simulate the completion of a task in the background in our product demo.
The User Journey :
Arrive at the home page
Click button on the home page -> Button goes into loading state (button replaced by loading animation)
We continue on with the demo and navigate away
We want to come back to the home page after "execution complete" .
Well how do we know if execution is complete ? Well that's where this delayed alert I'm trying to implement comes in. I'd like an alert to be sent out , regardless of what page I am on in the app after some x minutes/seconds of clicking that button.
Any ideas on how I would go about doing this ?
I am trying with redux-toolkit but so far it's only working on the page itself and
if I return to the page after navigating away.
This can be done in two ways,
elevate the state to the point which covers both home page and all the navigation pages, Use react context API to pass data and use useEffect hook to track task completion and do the need full.
Use native javascript to trigger custom event and add an event listner to it Read more about curtom events here
Although this is all just theory, I can help more after viewing the code.

How can i change a component according to url but not change the page? React

For example i have a page /profile on there, the user isshowed his profile picture. When the respected user clicks on it, it changes to /profile/avatar. But, i dont want to change the page but show a component which otherwise will not be shown in /profile. Think of it as when you click on another's avatar in twitter, it changes to /#elonmusk/pfp a modal shows the image but it doesnt unmount the previous page
How can i implement that?

How to Route user to a specific part of a page

I am working on a project where we have a subscriptions plans container at the home page of the app.....when we are the at the other route where the user need to buy subscription....so there we provide the button to buy subscription....but what i want is when the user click that button i want to route the user to the specific part where the component of the subscriptions plans is......To make this work what i tried is....i gave the parent component of that area an id of subscriptions....then when the user is at different route and he click that button there i also gave a tag with a href of that id i.e. #subscriptions.....but its not working........and i hope you'll understand what i am trying to say.
here if the user havn't bought the subscription i want him to route to home page to buy subscription
This is the area where i want the user to route to. (Not the top of the page like a normal react-router do)

Action not visible in page layout setup

I have created an action to show a lightning component on the contact record:
When I go to the page layout editor I am not able to see the button to add to the page layout.
I tried with global action but that also doesn't seem to be working.
What am I missing?
We are able to see the button in Mobile & Lightning Actions in the Page Layout Edit page

React routing and back button reloading

I'm using React with react-router v4 for routing in a SPA app.
From within a list page, when user taps on an item, we navigate to detail url which renders detail component.
From here, if I click back, route transitions to list page but list page itself is reloaded. So its scroll position, selection of an item (which opened the details page) is lost.
I have been struggling to think about how to approach this problem. One way I was thinking is to build all pages to open as model on top of another so base page context is always there and when user navigates back, I can start to close the modals revealing previous page in its exact state.
Not sure if that is a right approach.
You could store the current scroll position locally, then scroll back to it when your list page component is mounted.
These are jQuery answers, but the principle is the same:
Restoring page scroll position with jQuery
How can I retain the scroll position of a scrollable area when pressing back button?

Resources