feat(react-dogfood): add "beforeunload" event handler #722

arnautov-anton · 2023-06-27T19:09:59Z

This PR adds "beforeunload" handler which prompts users upon website reload or leave to prevent unwanted call leaves.

Known limitations:

event.returnValue is deprecated, documentation suggests using event.preventDefault() which does not work - documentation also suggest using return value - which (surprise, surprise) also does not work (compatibility table)
does not respect navigation changes (NextJS router ~~solutions work~~ - but prompt you twice)

Read more: https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#compatibility_notes

MartinCupela · 2023-06-28T08:34:44Z

I tested this hook and it did not work. Looking into the code, we could add window.confirm(message) to already existing hook in MeetingUI.tsx:

  useEffect(() => {
    const handlePageLeave = async () => {
      if (!window.confirm('Call in progress, are you sure you want to leave?')) return;
      if (
        activeCall &&
        [CallingState.JOINING, CallingState.JOINED].includes(callState)
      ) {
        await activeCall.leave();
      }
    };
    router.events.on('routeChangeStart', handlePageLeave);
    return () => {
      router.events.off('routeChangeStart', handlePageLeave);
    };
  }, [activeCall, callState, router.events]);

Or better we could add window.confirm(message) to onClick callback passed to CancelCallButton in the same file:

  const onLeave = useCallback(async () => {
    if (!window.confirm('Call in progress, are you sure you want to leave?'))
      return;
    setShow('loading');
   await call.leave();
    try {
      await router.push('/');
    } catch (e) {
      console.error(e);
      setShow('error-leave');
    }
  }, [router, call]);