Как переместить состояние диалога в его собственный компонент с помощью реакции и машинописного текста?

Question

• 1000 *

после нажатия этих кнопок открывается диалоговое окно, а нажатие кнопки «Скрыть» в диалоговом окне не отображает диалоговое окно для сеанса.

Я реализовал это, как показано ниже, и работает.

export function Dialog() {
  onhide = () => { dialogContext.setDialogOpen(false);}
  const dialogContext = React.useContext(DialogContext);
  return (
      <button onclick={onHide}>hide</button>
  )
}

interface ContextProps {
    setDialogOpen: (open: boolean) => void;   
}

export const DialogContext = React.createContext<ContextProps>({setDialogOpen: (open: boolean) => 
{ }});

function Main () => {
    let [showDialog, setShowDialog] = React.useState(false);
    return (
        <DialogContext.Provider
            value={{
                setDialogOpen: (open: boolean) => {
                    if (open) {
                        const sessionDialogClosed = sessionStorage.getItem('dialog');
                        if (sessionDialogClosed !== 'closed') {
                            setShowDialog(open);
                            sessionStorage.setItem('dialog', 'closed');
                        }
                    } else {
                        setShowDialog(open);
                    } 
                },
            }}
        >
        {showDialog && <Dialog DialogContext={DialogContext}/>
            <Route 
                path="/items">
                <Home />
            </Route>
            <Route
                path="/id/item_id">
                <Books/>
            </Route>
        </DialogContext.Provider>
    )     
  }


function Home() {
      const dialogContext= React.useContext(DialogContext);
      const handleClick = () {
          dialogContext.setDialogOpen(true); //get error here
      }
      return ( 
          <button onClick={handleClick}>add</button>
      )
}

function Books({DialogContext} : Props) {
      const dialogContext= React.useContext(DialogContext);
      const handleClick = () {
          dialogContext.setDialogOpen(true); 
      }
      return ( 
          <button onClick={handleClick()}>Click me</button>
      )    
}  

Теперь я хочу, чтобы состояние showDailog в компоненте Main было перемещено в его собственный компонент с помощью реакции и машинописного текста.

Я пробовал что-то с компонентом Dialog, как показано ниже,

interface DialogOpts {
    onHide: () => any;
}

interface Props extends DialogOpts {
    isOpen: boolean;
}

export function Dialog({onHide, isOpen}: Props){
    return (
        <Fragment> 
            {isOpen && 
                <button onClick={onHide}>hide</button>
            }
        </Fragment>
    );
}


interface DialogState {
    onHide: () => any;
    isOpen: boolean;
}

const initialState: DialogState = {
    onHide: noop,
    isOpen: false,
};

function DialogReducer(
    state: DialogState,
    action: //dont know what to give here
) {
//dont know what to do here
}

export const DialogProvider = ({ children }: any) => {
    const [state, dispatch] = React.useReducer(
        DialogReducer,
        initialState
    );


    function onHide() {
        state.onHide();
    }

    return (
        <DialogContext.Provider value={dispatch}>
            {children}
            <Dialog onHide={onHide} isOpen={state.isOpen} />
        </DialogContext.Provider>
    );
};


export function useDialog() {
    const dispatch = React.useContext(DialogContext);
    return function DialogFunction(opts: DialogOpts) {
    //something missing not sure what to addd
    };
}

Как видно из приведенный выше код, это всего лишь скелет того, как я хочу, чтобы код выглядел или использовался диалог .... Я хочу определить настраиваемый хук useDialog, а затем использовать его в компоненте Home and Books ...

Но я не знаю, как это сделать. может кто-нибудь помочь мне исправить это. спасибо.