new-server/webui/src/contexts/DialogContext.tsx

import React, {createContext, useCallback, useState} from "react";
import {DialogConfig, DialogType} from "../models/Dialog";
import {unimplemented} from "../helpers/misc";
import ColorDialog from "../dialogs/ColorDialog";

interface DialogContextValue {
  dialog: DialogConfig,
  setDialog: (dialog: DialogConfig) => void,
  clearDialog: () => void,
}

const DialogContext = createContext<DialogContextValue>({
  dialog: {type: DialogType.None},
  setDialog: unimplemented,
  clearDialog: unimplemented,
});

export const DialogContextProvider: React.FC = ({children}) => {
  const [dialog, setDialog] = useState<DialogConfig>({type: DialogType.None});

  const clearDialog = useCallback(() => {
    setDialog({type: DialogType.None});
  }, []);

  return (
    <DialogContext.Provider value={{dialog, setDialog, clearDialog}}>
      {children}
    </DialogContext.Provider>
  );
};

export function makeDialog(dialog: DialogConfig) {
  switch (dialog.type) {
    case DialogType.None:
      return undefined;
    case DialogType.AddColor:
      return <ColorDialog/>;
  }
}

export default DialogContext;