From 268dd6812b1976f2041a708fcbfef18442af8901 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Tue, 4 Feb 2025 16:54:28 +0100
Subject: [PATCH] fix(frontend): add dialog extra props

---
 .../dialogs/confirm/ConfirmDialog.tsx          | 14 +++++++++++---
 frontend/src/components/categories/index.tsx   |  6 ++----
 frontend/src/contexts/dialogs.context.tsx      |  4 +++-
 frontend/src/hooks/useDialogs.ts               | 18 ++++++++++++++++--
 frontend/src/types/common/dialogs.types.ts     |  7 ++++++-
 5 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app-components/dialogs/confirm/ConfirmDialog.tsx b/frontend/src/app-components/dialogs/confirm/ConfirmDialog.tsx
index 37985cee..e83d32b7 100644
--- a/frontend/src/app-components/dialogs/confirm/ConfirmDialog.tsx
+++ b/frontend/src/app-components/dialogs/confirm/ConfirmDialog.tsx
@@ -13,7 +13,7 @@ import {
   DialogContent,
   Grid,
 } from "@mui/material";
-import { FC, ReactNode } from "react";
+import { cloneElement, FC, ReactNode } from "react";
 
 import { useTranslate } from "@/hooks/useTranslate";
 import { ConfirmOptions, DialogProps } from "@/types/common/dialogs.types";
@@ -27,12 +27,20 @@ export interface ConfirmDialogPayload extends ConfirmOptions {
 }
 
 export interface ConfirmDialogProps
-  extends DialogProps<ConfirmDialogPayload, boolean> {}
+  extends DialogProps<ConfirmDialogPayload, boolean> {
+  mode?: "selection" | "click";
+  count?: number;
+}
 
 export const ConfirmDialog: FC<ConfirmDialogProps> = ({ payload, ...rest }) => {
   const { t } = useTranslate();
   const cancelButtonProps = useDialogLoadingButton(() => rest.onClose(false));
   const okButtonProps = useDialogLoadingButton(() => rest.onClose(true));
+  // @ts-ignore
+  const messageReactNode = cloneElement(payload.msg, {
+    mode: rest.mode,
+    count: rest.count,
+  });
 
   return (
     <Dialog
@@ -44,7 +52,7 @@ export const ConfirmDialog: FC<ConfirmDialogProps> = ({ payload, ...rest }) => {
       <DialogTitle onClose={() => rest.onClose(false)}>
         {payload.title || t("title.warning")}
       </DialogTitle>
-      <DialogContent>{payload.msg}</DialogContent>
+      <DialogContent>{messageReactNode}</DialogContent>
       <DialogActions>
         <Grid p="0.3rem 1rem" gap="0.5rem" display="flex">
           <Button
diff --git a/frontend/src/components/categories/index.tsx b/frontend/src/components/categories/index.tsx
index cb968b69..ed033d2b 100644
--- a/frontend/src/components/categories/index.tsx
+++ b/frontend/src/components/categories/index.tsx
@@ -161,10 +161,8 @@ export const Categories = () => {
               variant="contained"
               onClick={async () => {
                 const isConfirmed = await dialogs.confirm(
-                  <ConfirmDialogBody
-                    mode="selection"
-                    count={selectedCategories.length}
-                  />,
+                  <ConfirmDialogBody />,
+                  { mode: "selection", count: selectedCategories.length },
                 );
 
                 if (isConfirmed) {
diff --git a/frontend/src/contexts/dialogs.context.tsx b/frontend/src/contexts/dialogs.context.tsx
index 303b0763..7daa9027 100644
--- a/frontend/src/contexts/dialogs.context.tsx
+++ b/frontend/src/contexts/dialogs.context.tsx
@@ -77,6 +77,7 @@ function DialogsProvider(props: DialogProviderProps) {
         payload,
         onClose,
         resolve,
+        msgProps: { count: options.count, mode: options.mode },
       };
 
       setStack((prevStack) => [...prevStack, newEntry]);
@@ -128,7 +129,7 @@ function DialogsProvider(props: DialogProviderProps) {
   return (
     <DialogsContext.Provider value={contextValue}>
       {children}
-      {stack.map(({ key, open, Component, payload, promise }) => (
+      {stack.map(({ key, open, Component, payload, promise, msgProps }) => (
         <Component
           key={key}
           payload={payload}
@@ -136,6 +137,7 @@ function DialogsProvider(props: DialogProviderProps) {
           onClose={async (result) => {
             await closeDialog(promise, result);
           }}
+          {...msgProps}
         />
       ))}
     </DialogsContext.Provider>
diff --git a/frontend/src/hooks/useDialogs.ts b/frontend/src/hooks/useDialogs.ts
index f3afc818..53dd0894 100644
--- a/frontend/src/hooks/useDialogs.ts
+++ b/frontend/src/hooks/useDialogs.ts
@@ -31,8 +31,22 @@ export const useDialogs = (): DialogHook => {
 
   const { open, close } = context;
   const confirm = React.useCallback<OpenConfirmDialog>(
-    async (msg, { onClose, ...options } = {}) =>
-      open(ConfirmDialog, { ...options, msg }, { onClose }),
+    async (msg, { onClose, ...options } = {}) => {
+      const { count, mode, ...rest } = options;
+
+      return open(
+        ConfirmDialog,
+        {
+          ...rest,
+          msg,
+        },
+        {
+          mode,
+          count,
+          onClose,
+        },
+      );
+    },
     [open],
   );
 
diff --git a/frontend/src/types/common/dialogs.types.ts b/frontend/src/types/common/dialogs.types.ts
index 52b88c07..980cb584 100644
--- a/frontend/src/types/common/dialogs.types.ts
+++ b/frontend/src/types/common/dialogs.types.ts
@@ -9,8 +9,12 @@
 import { DialogProps as MuiDialogProps } from "@mui/material";
 import { BaseSyntheticEvent } from "react";
 
+interface ConfirmDialogExtraOptions {
+  mode?: "click" | "selection";
+  count?: number;
+}
 // context
-export interface OpenDialogOptions<R> {
+export interface OpenDialogOptions<R> extends ConfirmDialogExtraOptions {
   /**
    * A function that is called before closing the dialog closes. The dialog
    * stays open as long as the returned promise is not resolved. Use this if
@@ -129,6 +133,7 @@ export interface DialogStackEntry<P, R> {
   payload: P;
   onClose: (result: R) => Promise<void>;
   resolve: (result: R) => void;
+  msgProps: ConfirmDialogExtraOptions;
 }
 
 export interface DialogProviderProps {