packages/components/hooks/usePreventLeave.tsx

   1 import type { ReactNode } from 'react';
   2 import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
   3
   4 import useBeforeUnload from './useBeforeUnload';
   5
   6 const PreventLeaveContext = createContext<{
   7     clearPendingTasks: () => void;
   8     preventLeave: <T>(task: Promise<T>) => Promise<T>;
   9 } | null>(null);
  10
  11 export default function usePreventLeave() {
  12     const preventLeaveState = useContext(PreventLeaveContext);
  13
  14     if (!preventLeaveState) {
  15         throw new Error('PreventLeaveContext is not initialized, wrap the app with PreventLeaveProvider');
  16     }
  17
  18     return preventLeaveState;
  19 }
  20
  21 export const PreventLeaveProvider = ({ children }: { children: ReactNode }) => {
  22     const pendingTasks = useRef(new Set<Promise<any>>());
  23     const [hasPendingTasks, setHasPendingTasks] = useState(false);
  24
  25     const clearPendingTasks = useCallback(() => {
  26         pendingTasks.current.clear();
  27     }, []);
  28
  29     const preventLeave = useCallback(
  30         <T,>(task: Promise<T>) => {
  31             pendingTasks.current.add(task);
  32
  33             if (!hasPendingTasks) {
  34                 setHasPendingTasks(true);
  35             }
  36
  37             const cleanup = () => {
  38                 pendingTasks.current.delete(task);
  39
  40                 if (!pendingTasks.current.size) {
  41                     setHasPendingTasks(false);
  42                 }
  43             };
  44
  45             task.then(cleanup).catch(cleanup);
  46             return task;
  47         },
  48         [hasPendingTasks]
  49     );
  50
  51     useBeforeUnload(hasPendingTasks);
  52
  53     useEffect(() => {
  54         return () => clearPendingTasks();
  55     }, []);
  56
  57     return (
  58         <PreventLeaveContext.Provider value={{ preventLeave, clearPendingTasks }}>
  59             {children}
  60         </PreventLeaveContext.Provider>
  61     );
  62 };