I'm using this.props.history.push('/', { signOut: true }) for when user clicks a button.
It does work, but even though I refresh / the data is always persisted. How can I make it so it only happens once (when a user clicks a button), then I'm able to handle the logic :)
Are there any other ways to do this? Would love the help ;c
Related
Struggling with what I thought was a simple concept..
When a screen is focused, I want it to reload, unless I specify otherwise.
My screen is accessed from a bottom tab navigator, as well as other places in the app.
Using useFocusEffect, I can add this code which does trigger a reload:
const focusRefresh = useCallback(() => {
loadData();
}, [user?.userId, .. other deps here..]);
useFocusEffect(focusRefresh);
So I'm halfway there. However, some screens (such as a modal with more information), when they close and navigate back, I don't in this situation want another refresh. I'm struggling to get this. I can add some params when I go back from this modal:
navigator.navigate('Screen1',{dontRefresh:true})
But the issue here is that once I set this param, it seems to always be present. So after doing this, if I then navigate around via the bottom tabs, then I observe that the dontRefresh param is thereafter always present.
Can someone help?
Thanks!
I'm trying to achieve the following with Gatsby
The user is on a form page, if they hit the browser back button, a pop up would appear, asking if they want to leave.
If the user selects ok, then it would go back.
If the user selects cancel, then it would stay on this page
I was able to "almost" make it happen by doing the following
useEffect(() => {
const confirmExit = e => {
const leaveThisPage = window.confirm("Would you like to leave this page?")
if (!leaveThisPage) {
window.history.forward()
}
}
window.addEventListener("popstate", confirmExit)
return () => {
window.removeEventListener("popstate", confirmExit)
}
}, [])
There is one issue, if the user selects cancel, then the browser would go to the previous page. Then window.history.forward() would fire and sends them back.
I noticed that popstate event cannot be cancelled, so e.preventDefault() won't work.
Note: I also tried to test with window.onbeforeunload, but it only triggers if I close to window, or if my previous is from outside my app. Is there a work around for my issue?
Gatsby is using #reach/router under the hood, which doesn't support intercepting and preventing navigation (emphasis mine):
No history blocking. I found that the only use-case I had was preventing the user from navigating away from a half-filled out form. Not only is it pretty easy to just save the form state to session storage and bring it back when they return, but history blocking doesn’t happen when you navigate away from the app (say to another domain). This kept me from actually using history blocking and always opting to save the form state to session storage. (Source)
I second the recommendation for saving the form state using localStorage.
I have a login page(Functional Component), When a user tries to login without entering the required fields, I have to show the error message(ex:"Email is required"). When an invalid field exists, I shouldn't make the API call.
But, without entering fields, when I click on login button, API call is done. Again clicking on login button stops the API call.
I have made this demo - https://stackblitz.com/edit/react-pd6vvk?file=login.js which explains the issue.
Steps to follow:
1.Click on login without filling any text values. You can see "API request made" statement when fields are invalid.
2.Again click on login button, "API Request stopped" statement is displayed now.
I am new to React and I don't know, the reason and the solution to fix this issue.
Can somebody please help me out?
Thank you,
Abhilash
Because, setValidFields has async behaviour :
validateLoginForm(); //<--- inside this setValidFieldsis async
console.log(validFields);
if (isFormValid()) { //<---- so,this will still have true value ( means not updated )
// inside validateLoginForm()
// this state change won,t be reflected immediately
setValidFields(validFields => ({
...validFields,
[key]: error.length == 0
}));
I have made few changes as per your code structure, as long as I know you will need useEffect also as shown in working demo.
WORKING DEMO
If a user attempts to change the active page (window/tab/etc) from our page to another while myState is true, we want to notify/alert the user in React JS using react-router.
I tried implementing it with the help TransitionHook and React-router's Confirming Navigation article. Though these only point out / work when user wants to close the page or reload it. Whereas I need to know when user just temporarily leaves the page without necessarily closing it.
How can I achieve this?
If by "leaving the page", you mean that the page is open, but a different window has popped up, you could consider using the document.hasFocus property. Here is one way I handled a problem that was tangentially related:
componentDidMount: function (){
setInterval(()=>{
if (document.hasFocus()){
this.checkServerState();
}
},
},
When refreshing the page or navigating away from the site (aka losing temporary storage), I need to show the user a confirmation dialog box telling him that he will lose all unsaved data.
He can either choose to continue navigating or to cancel the transition, as expected.
I am handling this using the below code:
componentWillMount() {
const history = useBeforeUnload(createHistory)();
history.listenBeforeUnload(() => {
confirm('You will lose all unsaved information, proceed?');
});
}
This works fine, however, as per default, ReactJS uses window.confirm and others ( see: https://github.com/reactjs/history/issues/14 ) to display a confirmation dialog box.
What I have to do is to replace this box with a custom modal for confirmation.
Or at least to change its styling; heavily.
Now, I know some amount of customisation is possible through using getUserConfirmation ( https://github.com/reactjs/history/blob/master/docs/ConfirmingNavigation.md )
I'm unsure how to use the getUserConfirmation to customise my message dialog box, if this is possible, or how this should be done.
I've also seen alternatives like http://bootboxjs.com/, unsure if this is a proper way to go.
Does anyone know how should I go about this & how much customisation is possible?