Reset global state after navigating to another page

[NadjaKanunnikow]

Hi there,
We implemented an edit.js-Page in order to edit snippets.
After editing the user is redirected to the detailsPage of the relevant snippet.
On that detailsPage a success message is rendered.
In order to achieve this we had to define a global state in _app.js since the editPage and the detailsPage do not have any shared components.
The problem now is that we do not know how to reset the state once the user leaves the detailsPage.
As a result the success message is shown on the detailsPage of every snippet and does not disappear anymore. 😱

Any suggestions are welcome!

Link to the relevant branch

[NikRoe]

Hi there,

the success message is displayed on every DetailsPage and does not disappear anymore, because the state edit is either true or false and every DetailsPage depends on this very state.

In order to reset the state and let the message disappear, you could work with a setTimeout where you change the state from true to false after a certain amount of time. Like 5seconds or so.

This would not yet solve the issue you are facing where every DetailsPage is either true or false.

Do solve this, you can have a somewhat more complex state to track whether an entry has been edited. I updated your if-statement in your edit function to look somewhat like this:

if (response.ok) {
      const foundEntry = editedSnippets.find((entry) => entry.id === id);
      if (foundEntry) {
        setEditedSnippets(
          editedSnippets.map((entry) => {
            entry.id === id ? { id, isEdit: true } : entry;
          })
        );
      } else {
        setEditedSnippets([...editedSnippets, { id, isEdit: true }]);
      }

      router.push(`/${id}`);
      setTimeout(() => {
        setEditedSnippets(
          editedSnippets.map((entry) => {
            entry.id === id ? { id, isEdit: false } : entry;
          })
        );
      }, 5000);
    }

In addition to this, you would need to determine in your SnippetDetailsPage whether this very Snippet has currently an edited state:

  const isEdited = editState.find((entry) => entry.id === id)?.isEdit;

Hope this already helps 🙏