How to open multiple mui DialogProvider dynamically? - reactjs

Question

I have a generic DialogProvider that written with MUI and I open all dialog modals with this generic provider.
Code is below.
import React from "react";
import { makeAutoObservable } from "mobx";
import {
BooleanValuePaths,
getValue,
setValue,
Paths,
PathValueType,
StringValuePaths,
} from "../utils/utils";
import { IAppState, useAppState } from "./app-state";
type BaseType = object;
export class DialogState<T extends BaseType> {
_data: T;
_resetFunction?: () => T;
_touched: BooleanValuePaths<Paths<T>>;
_error: StringValuePaths<Paths<T>>;
_formError?: string;
_initialData: T;
constructor(dataInitiator: () => T) {
this._data = dataInitiator();
this._initialData = dataInitiator();
this._resetFunction = dataInitiator;
this._touched = {};
this._error = {};
makeAutoObservable(this);
}
reset() {
this._resetFunction?.();
}
get data() {
return this._data;
}
get formTouched() {
const touched = Object.keys(this._touched).find(
(key) => this._touched[key as Paths<T>],
);
return touched;
}
setValue<P extends Paths<T>>(path: P, value: PathValueType<T, P>): void {
setValue(this._data, path, value as any); //TODO remove the "as any", but the typescript has problem
this._touched[path] = true;
}
getValue<P extends Paths<T>>(path: P): PathValueType<T, P> {
return getValue(this._data, path) as PathValueType<T, P>; //TODO remove the "as PathValueType<T, P>", but the typescript has problem
}
isTouched<P extends Paths<T>>(path: P) {
return this._touched[path];
}
errorOf<P extends Paths<T>>(path: P) {
return this._error[path];
}
setErrorOf<P extends Paths<T> | "">(path: P, error: string) {
this._error[path] = error;
}
resetErrors() {
this._error = {};
}
resetTouches() {
this._touched = {};
}
resetData() {
this._data = this._initialData;
}
setFormError(error: string) {
this._formError = error;
}
}
function processErrorFunction<T extends BaseType>(
state: DialogState<T>,
err: any,
appState: IAppState,
errorKeyMap?: { errorKey: string; dataKey: string }[],
) {
try {
const json = JSON.parse(err?.message);
if (Array.isArray(json?.message)) {
(json.message as any[]).forEach((m) => {
if (
typeof m?.property === "string" &&
typeof m?.constraints === "object"
) {
const msg = Object.keys(m.constraints)
.map((k) => m.constraints[k])
.join(", ");
const dataKey =
errorKeyMap?.find((erk) => erk.errorKey === m.property)?.dataKey ??
m.property;
state.setErrorOf(dataKey, msg);
}
});
} else {
appState.setSnackMessage({ message: json?.message || "unknown" });
}
} catch (_) {
appState.setSnackMessage({ message: err?.message || "unknown" });
}
}
export function useDialogStateProvider<T extends BaseType>(
stateInitiator: () => T,
saverFunction: (v: T, appState: IAppState) => Promise<any>,
closeFunction?: (value?: T) => void,
errorKeyMap?: { errorKey: string; dataKey: string }[],
) {
const appState = useAppState();
const [loading, setLoading] = React.useState(false);
const state = React.useMemo(
() => new DialogState(stateInitiator),
[stateInitiator],
);
const reset = () => {
state.reset();
};
const handleSave = async () => {
try {
setLoading(true);
state.resetErrors();
await saverFunction(state.data, appState);
state.resetTouches();
if (closeFunction) {
state.resetData();
closeFunction(state.data);
reset();
}
} catch (err: any) {
processErrorFunction(state, err, appState, errorKeyMap);
} finally {
setLoading(false);
}
};
const handleClose = () => {
try {
if (closeFunction) {
setLoading(false);
state.resetErrors();
state.resetData();
state.resetTouches();
closeFunction(state.data);
reset();
}
} catch (err: any) {
processErrorFunction(state, err, appState, errorKeyMap);
} finally {
setLoading(false);
}
};
return {
reset,
state,
loading,
handleSave,
handleClose,
};
}
interface useDialogStateProviderInterface<T extends BaseType> {
(stateProvider: () => T): {
reset: () => void;
state: DialogState<T>;
loading: boolean;
handleSave: () => Promise<void>;
handleClose?: () => void;
};
}
export type DialogStateProviderType<T extends BaseType> = ReturnType<
useDialogStateProviderInterface<T>
>;
export const DialogStateContext =
React.createContext<DialogStateProviderType<any> | null>(null);
export function DialogStateProvider<
K extends BaseType,
T extends DialogStateProviderType<K>,
>({ state, children }: { state: T; children?: React.ReactNode }) {
return (
<DialogStateContext.Provider value={state}>
{children}
</DialogStateContext.Provider>
);
}
export function useDialogState<T extends BaseType>() {
const store = React.useContext(DialogStateContext);
if (!store) {
throw new Error("useDialogState must be used within DialogStateProvider");
}
return store as DialogStateProviderType<T>;
}
Usage is like below:
<DialogStateProvider state={taskState}>
<BaseDialog open={open} handleClose={handleClose} title={title}>
<AssignedTaskEditor isSubsequent={isSubsequent} />
</BaseDialog>
</DialogStateProvider>
BaseDialog code is this:
import {
Dialog,
DialogContent,
DialogTitle,
IconButton,
SxProps,
Theme,
useMediaQuery,
useTheme,
} from "#mui/material";
import CloseIcon from "#mui/icons-material/Close";
export function BaseDialog({
open,
handleClose,
title,
children,
sx,
}: {
open: boolean;
handleClose: () => void;
title?: React.ReactNode;
children: React.ReactNode;
sx?: SxProps<Theme>;
}) {
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
return (
<Dialog
fullScreen={fullScreen}
open={open}
onClose={handleClose}
maxWidth="lg"
sx={{
...sx,
"& .MuiDialog-container > .MuiPaper-root": {
height: "100%",
backgroundColor: "background.default",
...(sx as any)?.["& .MuiDialog-container > .MuiPaper-root"],
},
"& .MuiDialogContent-root": {
flexGrow: 1,
backgroundColor: "background.default",
maxHeight: "80vh",
marginBlock: 2,
...(sx as any)?.["& .MuiDialogContent-root"],
},
"& .dialogBox-Icon": {
position: "absolute",
right: (theme) => theme.spacing(2.5),
top: (theme) => theme.spacing(1),
...(sx as any)?.["& .dialogBox-Icon"],
},
}}
>
{title && <DialogTitle>{title}</DialogTitle>}
<IconButton onClick={handleClose} className="dialogBox-Icon" size="large">
<CloseIcon />
</IconButton>
<DialogContent dividers>{children}</DialogContent>
</Dialog>
);
}
I want to open multiple dialog concurrently like that:
Save and add a subsequent task button should call an API endpoint to save data and it should close current modal and open another dialog and this should go forever. There should not be an end.
I have searched on internet but I couldn't find good example for this.
How can I do that with this current generic DialogProvider?