Async/Await a Page Reload in React TypeScript

Question

I am having a button, and when I click on it, it should do the following things in order:

First refresh the Page
Then Open the Side Pane in React

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.

Why are trying to reload the page? Can't you use state to manage which panel is open? — Andy, Oct 22 '21 at 11:01
you can't use the existing state after page refresh even you have used async-await, so one thing you can try you can save your sidePaneIsOpen value in local storage and on component render use effect you can check if the value is there in local storage or not, likewise you can manage — Vishal Nai, Oct 22 '21 at 11:02
As @Andy said, there probably exists a better solution than reload->setIsPaneOpen. However, I guess you could solve the reload problem by looking at this question: https://stackoverflow.com/questions/41904975/refresh-page-and-run-function-after-javascript — A_A, Oct 22 '21 at 11:04

score 1 · Answer 1 · answered Oct 22 '21 at 11:05

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>

Async/Await a Page Reload in React TypeScript

1 Answers1