Warn user about unsaved changes before they navigate away

[liammulh]

One of the features we wanted to add to Rosetta 2 was the ability to warn the user that they have unsaved changes before they navigate away from the translation form. Unfortunately, our client-side routing library (React Router) dropped support for this feature in V6. They plan on adding it back in. Once they add it back in, we can implement this feature.

I don't want to revert back to V5 because it would require a fair amount of refactoring that would be have to be reverted to what it currently is when we upgrade to V6, which seems like a lot of work for very little benefit. Also, this was one of the "if it's easy" requests for Rosetta 2.

The React Router issue for this is: remix-run/react-router#8139.

Draft PR for the feature request here: remix-run/react-router#9709.

[liammulh]

useBeforeUnload is now in React Router! We can use it.

In the translation form component, we would want to do something along the lines of the example in the docs. Perhaps we could even submit the form values to short-term storage. The easiest thing to do is just window.alert('You have unsaved changes. Are you sure you want to leave?');.

Example from the docs:

import { useBeforeUnload } from "react-router-dom";

function SomeForm() {
  const [state, setState] = React.useState(null);

  // save it off before users navigate away
  useBeforeUnload(
    React.useCallback(() => {
      localStorage.stuff = state;
    }, [state])
  );

  // read it in when they return
  React.useEffect(() => {
    if (state === null && localStorage.stuff != null) {
      setState(localStorage.stuff);
    }
  }, [state]);

  return <>{/*... */}</>;
}

(Check the docs in case that example is somehow outdated by the time you read this.)