I am having a button, and when I click on it, it should do the following things in order:
This is my code snippet that is existing:
<button onClick={() => {
refreshPage();
setPaneIsOpen(true);
}}>Click me</button>
const refreshPage = () => {
window.location.reload();
}
setPaneIsOpen is a State that when set to true, will open the side pane. I want to specifially first refresh the page and then set the Pane.
I have tried this async/await promise approach:
function refreshPagePromise() {
return new Promise<void>((resolve) => {
window.location.reload();
resolve();
});
}
async function refreshAndOpen() {
await refreshPagePromise();
setIsPaneOpen(true);
}
<button onClick={() => { refreshAndOpen(); }}>Click me</button>
But I cannot seem to handle page reload. I tried to create a Code Sandbox, but since this is very complex, I could not. I will try to add one in the edits If I was able to reproduce.
One hacky way would be to use localStorage.
add this useEffect that runs on page load:
useEffect(() => {
const shouldOpenPane = !!localStorage.getItem("setPaneOpen")
if(shouldOpenPane){
setIsPaneOpen(true);
// Maybe the row beneath should not be there,
// Idk what behaviour u want if user reloads page manually
localStorage.removeItem("setPaneOpen")
}
}, []);
Update your button like this:
<button
onClick={() => {
localStorage.setItem("setPaneOpen", "true"); // can be set to any thruthy value
refreshPage();
}}
>
Click me
</button>