import { createContext, ReactNode, useContext, useRef, useState, } from 'react'; import styled from 'styled-components'; import Modal from 'example/Modal'; interface PromiseRef { resolve: (val?: unknown) => void reject: (val?: unknown) => void } export interface UnsavedChangesContextProps { confirm: (confirmationText?: string) => Promise; handleHasChanges: () => void; handleClearChanges: () => void; } export interface UnsavedChangesProps { children: ReactNode, } export const UnsavedChangesContext = createContext( {} as UnsavedChangesContextProps, ); export const useUnsavedChanges = () => useContext(UnsavedChangesContext); export function UnsavedChangesProvider({ children }: UnsavedChangesProps) { const [open, setOpen] = useState(false); const [text, setText] = useState(); const [askForConfirmation, setAskForConfirmation] = useState(false); const awaitingPromiseRef = useRef(null); const handleClose = () => { if (awaitingPromiseRef.current) { awaitingPromiseRef.current.reject(); } setOpen(false); }; const handleConfirm = () => { if (awaitingPromiseRef.current) { awaitingPromiseRef.current.resolve(); } setOpen(false); setAskForConfirmation(false); }; const confirm = (confirmationText?: string) => new Promise((resolve, reject) => { setOpen(true); if (confirmationText) { setText(confirmationText); } awaitingPromiseRef.current = { resolve, reject }; if (!askForConfirmation) { handleConfirm(); } }); const handleHasChanges = () => setAskForConfirmation(true); const handleClearChanges = () => setAskForConfirmation(false); return (

{text}

{children} ); } export default UnsavedChangesContext;

unsavedChanges.tsx