refactor: update dialog z-index values for improved stacking context …

…and modify ActionsMenu props for better clarity
sky10p · Dec 26, 2024 · f2948bd · f2948bd
1 parent 7eb64e2
commit f2948bd
Show file tree

Hide file tree

Showing 12 changed files with 173 additions and 101 deletions.
diff --git a/packages/frontend/src/components/application/NavbarContainer/NavbarContainer.tsx b/packages/frontend/src/components/application/NavbarContainer/NavbarContainer.tsx
@@ -21,7 +21,7 @@ import { API_URL } from "../../../repository/constants";
 const NavbarContainer: React.FC = () => {
   const { open, setOpen, repertoires, updateRepertoires } = useNavbarContext();
   const { showConfirmDialog, showTextDialog } = useDialogContext();
-  const { showMenu } = useMenuContext();
+  const { toggleMenu } = useMenuContext();
   const navigate = useNavigate();
   const { pathname } = useLocation();
   useEffect(() => {
@@ -81,7 +81,7 @@ const NavbarContainer: React.FC = () => {
     name: repertoire.name,
     url: `/repertoire/${repertoire._id}`,
     onActionClick: (event) =>
-      showMenu(event.currentTarget, [
+      toggleMenu(event.currentTarget, [
         {
           name: "Move to Up",
           action: () => handleOrderUp(repertoire),

diff --git a/packages/frontend/src/components/design/ActionsMenu/ActionsMenu.tsx b/packages/frontend/src/components/design/ActionsMenu/ActionsMenu.tsx
@@ -2,15 +2,15 @@ import React, { useState, useEffect, useRef, useLayoutEffect } from "react";
 
 interface ActionsMenuProps {
     anchorEl: HTMLElement | null;
-    setAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    closeMenu: () => void;
     items: {name: string, action: () => void}[];
 }
 
 
-export const ActionsMenu: React.FC<ActionsMenuProps> = ({anchorEl, setAnchorEl, items}) => {
+export const ActionsMenu: React.FC<ActionsMenuProps> = ({anchorEl, closeMenu, items}) => {
     const open = Boolean(anchorEl);
     const handleClose = () => {
-        setAnchorEl(null);
+        closeMenu();
     };
 
     const handleClick = (event: React.MouseEvent<HTMLElement>, action: () => void) => {
@@ -58,7 +58,12 @@ export const ActionsMenu: React.FC<ActionsMenuProps> = ({anchorEl, setAnchorEl,
 
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
-            if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+            if (
+                menuRef.current &&
+                !menuRef.current.contains(event.target as Node) &&
+                anchorEl &&
+                !anchorEl.contains(event.target as Node)
+            ) {
                 handleClose();
             }
         };

diff --git a/packages/frontend/src/components/design/dialogs/ConfirmDialog.tsx b/packages/frontend/src/components/design/dialogs/ConfirmDialog.tsx
@@ -12,10 +12,10 @@ interface TextDialogProps {
 export const ConfirmDialog: React.FC<TextDialogProps> = ({open, onConfirm, onClose, title, contentText: contextText}) => {
 
     return (
-        <Dialog open={open} onClose={() => onClose(true)} className="fixed z-10 inset-0 overflow-y-auto">
+        <Dialog open={open} onClose={() => onClose(true)} className="fixed z-50 inset-0 overflow-y-auto">
             <DialogBackdrop className="fixed inset-0 bg-black opacity-30" />
             <div className="fixed inset-0 flex items-center justify-center p-4">
-                <DialogPanel className="bg-background rounded max-w-md mx-auto p-6 z-20 max-h-screen overflow-auto">
+                <DialogPanel className="bg-background rounded max-w-md mx-auto p-6 z-50 max-h-screen overflow-auto">
                     <DialogTitle className="text-lg font-bold text-textLight">{title}</DialogTitle>
                     <Description className="mt-2 text-textLight mb-4">
                         {contextText}

diff --git a/packages/frontend/src/components/design/dialogs/NumberDialog.tsx b/packages/frontend/src/components/design/dialogs/NumberDialog.tsx
@@ -32,10 +32,10 @@ export const NumberDialog: React.FC<NumberDialogProps> = ({ open, min, max, init
     const isValidNumber = (num: number) => num >= min && num <= max;
 
     return (
-        <Dialog open={open} onClose={() => onClose(true)} className="fixed z-10 inset-0 overflow-y-auto"> {/* changed */}
+        <Dialog open={open} onClose={() => onClose(true)} className="fixed z-50 inset-0 overflow-y-auto"> {/* changed */}
             <DialogBackdrop className="fixed inset-0 bg-black opacity-30" />
             <div className="fixed inset-0 flex items-center justify-center p-4">
-                <DialogPanel className="bg-background rounded max-w-md mx-auto p-6 z-20 max-h-screen overflow-auto">
+                <DialogPanel className="bg-background rounded max-w-md mx-auto p-6 z-50 max-h-screen overflow-auto"> {/* changed */}
                     <DialogTitle className="text-lg font-bold text-textLight">{title}</DialogTitle>
                     <Description className="mt-2 text-textLight mb-4">
                         {contentText}

diff --git a/packages/frontend/src/components/design/dialogs/RepertoireDialog.tsx b/packages/frontend/src/components/design/dialogs/RepertoireDialog.tsx
@@ -29,10 +29,10 @@ const RepertoireDialog: React.FC<RepertoireDialogProps> = ({ open, title, conten
   };
 
   return (
-    <Dialog open={open} onClose={() => onClose(true)} className="fixed z-10 inset-0 overflow-y-auto"> {/* changed */}
+    <Dialog open={open} onClose={() => onClose(true)} className="fixed z-50 inset-0 overflow-y-auto"> {/* changed */}
       <DialogBackdrop className="fixed inset-0 bg-black opacity-30" />
       <div className="fixed inset-0 flex items-center justify-center p-4">
-        <DialogPanel className="bg-background rounded max-w-md mx-auto p-6 z-20 max-h-screen overflow-auto">
+        <DialogPanel className="bg-background rounded max-w-md mx-auto p-6 z-50 max-h-screen overflow-auto"> {/* changed */}
           <DialogTitle className="text-lg font-bold text-textLight">{title}</DialogTitle>
           <Description className="mt-2 text-textLight mb-4">
             {contentText}

diff --git a/packages/frontend/src/components/design/dialogs/SelectNextMoveDialog.tsx b/packages/frontend/src/components/design/dialogs/SelectNextMoveDialog.tsx
@@ -27,9 +27,9 @@ const SelectNextMoveDialog: React.FC<SelectNextMoveDialogProps> = ({
   };
 
   return (
-    <Dialog open={open} onClose={() => onClose(true)} className="fixed z-10 inset-0 overflow-y-auto"> {/* changed */}
+    <Dialog open={open} onClose={() => onClose(true)} className="fixed z-50 inset-0 overflow-y-auto"> {/* changed */}
       <div className="fixed inset-0 flex items-center justify-center p-4">
-        <DialogPanel className="bg-background rounded max-w-md mx-auto p-6 z-20 max-h-screen overflow-auto">
+        <DialogPanel className="bg-background rounded max-w-md mx-auto p-6 z-50 max-h-screen overflow-auto"> {/* changed */}
           <DialogTitle className="text-lg font-bold text-textLight">{title}</DialogTitle>
           <div className="mt-2 text-textLight mb-4">
             {contentText}

diff --git a/packages/frontend/src/components/design/dialogs/SelectTrainVariantsDialog.tsx b/packages/frontend/src/components/design/dialogs/SelectTrainVariantsDialog.tsx
@@ -176,11 +176,11 @@ const SelectTrainVariantsDialog: React.FC<SelectTrainVariantsDialogProps> = ({
     <Dialog
       open={open}
       onClose={() => handleClose(true)} // changed
-      className="fixed z-10 inset-0 overflow-y-auto"
+      className="fixed z-50 inset-0 overflow-y-auto"
     >
       <DialogBackdrop className="fixed inset-0 bg-black opacity-30" />
       <div className="fixed inset-0 flex items-center justify-center p-4">
-        <DialogPanel className="bg-background rounded w-screen md:w-auto xl:max-w-5xl mx-auto p-6 z-20 max-h-screen overflow-auto">
+        <DialogPanel className="bg-background rounded w-screen md:w-auto xl:max-w-5xl mx-auto p-6 z-50 max-h-screen overflow-auto">
           <DialogTitle className="text-xl font-bold text-textLight">
             {title}
           </DialogTitle>

diff --git a/packages/frontend/src/components/design/dialogs/SelectVariantsDialog.tsx b/packages/frontend/src/components/design/dialogs/SelectVariantsDialog.tsx
@@ -152,11 +152,11 @@ const SelectVariantsDialog: React.FC<SelectVariantsDialogProps> = ({
     <Dialog
       open={open}
       onClose={() => handleClose(true)}
-      className="fixed z-10 inset-0 overflow-y-auto"
+      className="fixed z-50 inset-0 overflow-y-auto"
     >
       <DialogBackdrop className="fixed inset-0 bg-black opacity-30" />
       <div className="fixed inset-0 flex items-center justify-center p-4">
-        <DialogPanel className="bg-background rounded max-w-2xl mx-auto p-6 z-20 max-h-screen overflow-auto">
+        <DialogPanel className="bg-background rounded max-w-2xl mx-auto p-6 z-50 max-h-screen overflow-auto">
           <DialogTitle className="text-xl font-bold text-textLight">
             {title}
           </DialogTitle>
@@ -172,7 +172,6 @@ const SelectVariantsDialog: React.FC<SelectVariantsDialogProps> = ({
           />
           {multiple && (
             <div className="mb-4">
-
               <UiCheckbox
                 label="Select All"
                 checked={isAllSelected}
@@ -187,8 +186,12 @@ const SelectVariantsDialog: React.FC<SelectVariantsDialogProps> = ({
               <div key={groupName} className="mb-4">
                 <div className="flex items-center">
                   {multiple && (
-
-                    <UiCheckbox checked={isGroupSelected(groupName)} indeterminate={isSomeOfGroupSelected(groupName)} onChange={() => handleSelectAllGroup(groupName)} className="ml-2 text-textLight" />
+                    <UiCheckbox
+                      checked={isGroupSelected(groupName)}
+                      indeterminate={isSomeOfGroupSelected(groupName)}
+                      onChange={() => handleSelectAllGroup(groupName)}
+                      className="ml-2 text-textLight"
+                    />
                   )}
                   <h3 className="ml-2 text-lg font-semibold text-textLight">
                     {groupName}

diff --git a/packages/frontend/src/contexts/AppContext.tsx b/packages/frontend/src/contexts/AppContext.tsx
@@ -13,11 +13,11 @@ export const AppContext: React.FC<{ children: React.ReactNode }> = ({
     <AlertContextProvider>
       <DialogContextProvider>
         <MenuContextProvider>
-        <NavbarContextProvider>
-          <HeaderContextProvider>
-            <FooterContextProvider>{children}</FooterContextProvider>
-          </HeaderContextProvider>
-        </NavbarContextProvider>
+          <NavbarContextProvider>
+            <HeaderContextProvider>
+              <FooterContextProvider>{children}</FooterContextProvider>
+            </HeaderContextProvider>
+          </NavbarContextProvider>
         </MenuContextProvider>
       </DialogContextProvider>
     </AlertContextProvider>

diff --git a/packages/frontend/src/contexts/DialogContext.tsx b/packages/frontend/src/contexts/DialogContext.tsx
@@ -313,54 +313,66 @@ export const DialogContextProvider = ({
       }}
     >
       {children}
-      <TextDialog
-        open={openTextDialog}
-        initialValue=""
-        onClose={handleDialogClose}
-        contentText={contentText}
-        onTextConfirm={handleTextConfirm}
-        title={title}
-      ></TextDialog>
-      <ConfirmDialog
-        open={openConfirmDialog}
-        onClose={handleDialogClose}
-        contentText={contentText}
-        onConfirm={handleConfirm}
-        title={title}
-      ></ConfirmDialog>
-      <SelectTrainVariantsDialog
-        open={openTrainVariantsDialog}
-        contentText={contentText}
-        trainVariants={trainVariants}
-        onClose={handleDialogClose}
-        onConfirm={handleTrainVariantsConfirm}
-        title={title}
-        repertoireId={repertoireId}
-      ></SelectTrainVariantsDialog>
-      <SelectNextMoveDialog
-        open={openSelectNextMoveDialog}
-        contentText={contentText}
-        nextMovements={nextMovements}
-        onClose={handleDialogClose}
-        onConfirm={handleNextMoveConfirm}
-        title={title}
-      ></SelectNextMoveDialog>
-      <RepertoireDialog
-        open={openRepertoireDialog}
-        contentText={contentText}
-        repertoires={repertoires}
-        onClose={handleDialogClose}
-        onConfirm={handleRepertoireConfirm}
-        title={title}
-      ></RepertoireDialog>
-      <SelectVariantsDialog
-        open={openSelectVariantsDialog}
-        contentText={contentText}
-        variants={variants}
-        onClose={handleDialogClose}
-        onConfirm={handleVariantsConfirm}
-        title={title}
-      ></SelectVariantsDialog>
+      {openTextDialog && (
+        <TextDialog
+          open={openTextDialog}
+          initialValue=""
+          onClose={handleDialogClose}
+          contentText={contentText}
+          onTextConfirm={handleTextConfirm}
+          title={title}
+        />
+      )}
+      {openConfirmDialog && (
+        <ConfirmDialog
+          open={openConfirmDialog}
+          onClose={handleDialogClose}
+          contentText={contentText}
+          onConfirm={handleConfirm}
+          title={title}
+        />
+      )}
+      {openTrainVariantsDialog && (
+        <SelectTrainVariantsDialog
+          open={openTrainVariantsDialog}
+          contentText={contentText}
+          trainVariants={trainVariants}
+          onClose={handleDialogClose}
+          onConfirm={handleTrainVariantsConfirm}
+          title={title}
+          repertoireId={repertoireId}
+        />
+      )}
+      {openSelectNextMoveDialog && (
+        <SelectNextMoveDialog
+          open={openSelectNextMoveDialog}
+          contentText={contentText}
+          nextMovements={nextMovements}
+          onClose={handleDialogClose}
+          onConfirm={handleNextMoveConfirm}
+          title={title}
+        />
+      )}
+      {openRepertoireDialog && (
+        <RepertoireDialog
+          open={openRepertoireDialog}
+          contentText={contentText}
+          repertoires={repertoires}
+          onClose={handleDialogClose}
+          onConfirm={handleRepertoireConfirm}
+          title={title}
+        />
+      )}
+      {openSelectVariantsDialog && (
+        <SelectVariantsDialog
+          open={openSelectVariantsDialog}
+          contentText={contentText}
+          variants={variants}
+          onClose={handleDialogClose}
+          onConfirm={handleVariantsConfirm}
+          title={title}
+        />
+      )}
       {numberDialogProps && (
         <NumberDialog
           open={openNumberDialog}

diff --git a/packages/frontend/src/contexts/MenuContext.tsx b/packages/frontend/src/contexts/MenuContext.tsx
@@ -1,8 +1,11 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { ActionsMenu } from "../components/design/ActionsMenu/ActionsMenu";
 
 interface MenuContextProps {
+  open: boolean;
   showMenu: (anchorEl: HTMLElement | null, items: {name: string, action: () => void}[]) => void;
+  closeMenu: () => void;
+  toggleMenu: (anchorEl: HTMLElement | null, items: {name: string, action: () => void}[]) => void;
 }
 
 export const MenuContext = React.createContext<MenuContextProps | null>(null);
@@ -21,21 +24,81 @@ interface MenuContextProviderProps {
     children: React.ReactNode;
 }
 
+interface MenuState {
+    anchorEl: HTMLElement | null;
+    open: boolean;
+    items: { name: string; action: () => void }[];
+}
+
+type MenuAction =
+    | { type: 'SHOW_MENU'; payload: { anchorEl: HTMLElement | null; items: { name: string; action: () => void }[] } }
+    | { type: 'CLOSE_MENU' };
+
+const initialState: MenuState = {
+    anchorEl: null,
+    open: false,
+    items: [],
+};
+
+const reducer = (state: MenuState, action: MenuAction): MenuState => {
+    switch (action.type) {
+        case 'SHOW_MENU':
+            return {
+                anchorEl: action.payload.anchorEl,
+                open: true,
+                items: action.payload.items,
+            };
+        case 'CLOSE_MENU':
+            return {
+                ...state,
+                open: false,
+                anchorEl: null,
+                items: [],
+            };
+        default:
+            return state;
+    }
+};
+
 export const MenuContextProvider: React.FC<MenuContextProviderProps> = ({
     children,
 }) => {
-    const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
-    const [items, setItems] = React.useState<{name: string, action: () => void}[]>([]);
+    const [state, dispatch] = React.useReducer(reducer, initialState);
+
+    const showMenu = useCallback((anchorEl: HTMLElement | null, items: { name: string; action: () => void }[]) => {
+        dispatch({ type: 'SHOW_MENU', payload: { anchorEl, items } });
+    }, []);
+
+
+    const closeMenu = useCallback(() => {
+        dispatch({ type: 'CLOSE_MENU' });
+    }, []);
 
-    const showMenu = (anchorEl: HTMLElement | null, items: {name: string, action: () => void}[]) => {
-        setAnchorEl(anchorEl);
-        setItems(items);
-    };
+    const toggleMenu = useCallback((anchorEl: HTMLElement | null, items: { name: string; action: () => void }[]) => {
+        if (state.open) {
+            dispatch({ type: 'CLOSE_MENU' });
+        } else {
+            dispatch({ type: 'SHOW_MENU', payload: { anchorEl, items } });
+        }
+    }, [state.open]);
 
     return (
-        <MenuContext.Provider value={{ showMenu }}>
+        <MenuContext.Provider
+            value={{
+                open: state.open,
+                showMenu,
+                closeMenu,
+                toggleMenu,
+            }}
+        >
             {children}
-            <ActionsMenu anchorEl={anchorEl} setAnchorEl={setAnchorEl} items={items}/>
+            {state.open && (
+                <ActionsMenu
+                    anchorEl={state.anchorEl}
+                    closeMenu={closeMenu}
+                    items={state.items}
+                />
+            )}
         </MenuContext.Provider>
     );
 };