From 45107de72e678a8bdcd5f5edfcd142b23a89aa7c Mon Sep 17 00:00:00 2001
From: Dunsin <78784850+Dun-sin@users.noreply.github.com>
Date: Wed, 26 Oct 2022 20:57:16 +0100
Subject: [PATCH] feat: add custom dialog (#230)

* feat: add confirmation dialog (#209)

* chore: add dialog component

* chore: update logout and chat close dialog popup

* fix mobile view

* update dialog component to be more reliable

* update dialog usage
---
 client/index.html                      |   1 +
 client/src/components/Anonymous.jsx    | 257 ++++++++++----------
 client/src/components/BuddyMatcher.jsx | 317 +++++++++++++------------
 client/src/components/Dialog.jsx       |  75 ++++++
 client/src/components/NavBar.jsx       |  41 ++--
 client/src/context/DialogContext.jsx   |  39 +++
 client/src/index.jsx                   |   7 +-
 client/src/pages/Start.jsx             |   1 -
 client/src/styles/dialog.css           |  17 ++
 9 files changed, 452 insertions(+), 303 deletions(-)
 create mode 100644 client/src/components/Dialog.jsx
 create mode 100644 client/src/context/DialogContext.jsx
 create mode 100644 client/src/styles/dialog.css
diff --git a/client/index.html b/client/index.html
index 5a75eb43..c1680498 100644
--- a/client/index.html
+++ b/client/index.html
@@ -27,6 +27,7 @@
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root"></div>
+        <div id="portal"></div>
         <script type="module" src="/src/index.jsx"></script>
         <!--
       This HTML file is a template.
diff --git a/client/src/components/Anonymous.jsx b/client/src/components/Anonymous.jsx
index a21a91de..ff3bdf4a 100644
--- a/client/src/components/Anonymous.jsx
+++ b/client/src/components/Anonymous.jsx
@@ -13,154 +13,161 @@ import { BiArrowBack, BiDotsVerticalRounded } from 'react-icons/bi';
 import { SocketContext } from 'src/context/Context';
 import { useChat } from 'src/context/ChatContext';
 import { useApp } from 'src/context/AppContext';
+import { useDialog } from 'src/context/DialogContext';
 
 // Components
 import Chat from 'components/Chat';
 import { createClassesFromArray } from 'src/lib/utils';
 
+
 const centerItems = `flex items-center justify-center`;
 
 const Anonymous = ({ onChatClosed }) => {
-    const { app, endSearch } = useApp();
-    const { currentChatId } = app;
-    const currentChatIdRef = useRef(currentChatId);
-    const [isTyping, setIsTyping] = useState(false);
-    const [autoSearchAfterClose, setAutoSearchAfterClose] = useState(false);
-    const autoSearchRef = useRef();
-    autoSearchRef.current = autoSearchAfterClose;
-
-    const navigate = useNavigate();
-    const socket = useContext(SocketContext);
-    const { closeChat } = useChat();
-
-    socket.on('display', ({ isTyping, chatId }) => {
-        // eslint-disable-next-line curly
-        if (chatId !== currentChatId) return;
-        isTyping ? setIsTyping(true) : setIsTyping(false);
-    });
-
-    const handleClose = (autoSearch = false) => {
-        if (!confirm('Are you sure you want to close this chat?')) {
-            return;
+  const { app, endSearch } = useApp();
+  const { currentChatId } = app;
+  const currentChatIdRef = useRef(currentChatId);
+  const [isTyping, setIsTyping] = useState(false);
+  const [autoSearchAfterClose, setAutoSearchAfterClose] = useState(false);
+  const autoSearchRef = useRef();
+  autoSearchRef.current = autoSearchAfterClose;
+
+  const navigate = useNavigate();
+  const socket = useContext(SocketContext);
+  const { closeChat } = useChat();
+  const { setDialog } = useDialog();
+
+  socket.on('display', ({ isTyping, chatId }) => {
+    // eslint-disable-next-line curly
+    if (chatId !== currentChatId) return;
+    isTyping ? setIsTyping(true) : setIsTyping(false);
+  });
+
+  const closeChatHandler = (autoSearch = false) => {
+    const currentChatId = currentChatIdRef.current;
+
+    if (!currentChatId) {
+      navigate('/');
+      return;
+    }
+
+    setAutoSearchAfterClose(autoSearch);
+
+    socket
+      .timeout(30000)
+      .emit('close', currentChatId, (err, chatClosed) => {
+        if (err) {
+          alert('An error occured whiles closing chat.');
+          console.log(err);
+
+          setAutoSearchAfterClose(false);
+          return;
         }
 
-        const currentChatId = currentChatIdRef.current;
-
-        if (!currentChatId) {
-            navigate('/');
-            return;
+        if (chatClosed) {
+          closeChat(currentChatId);
         }
 
-        setAutoSearchAfterClose(autoSearch);
+        endSearch()
 
-        socket
-            .timeout(30000)
-            .emit('close', currentChatId, (err, chatClosed) => {
-                if (err) {
-                    alert('An error occured whiles closing chat.');
-                    console.log(err);
+        if (chatClosed && autoSearchRef.current) {
+          if (onChatClosed) {
+            onChatClosed();
+          }
 
-                    setAutoSearchAfterClose(false);
-                    return;
-                }
-
-                if (chatClosed) {
-                    closeChat(currentChatId);
-                }
-
-                endSearch()
+          setAutoSearchAfterClose(false);
+        } else {
+          navigate('/');
+        }
+      });
+  };
 
-                if (chatClosed && autoSearchRef.current) {
-                    if (onChatClosed) {
-                        onChatClosed();
-                    }
+  const MenuToggle = (props, ref) => {
+    return (
+      <IconButton
+        {...props}
+        ref={ref}
+        icon={<Icon as={BiDotsVerticalRounded} />}
+        appearance="subtle"
+        circle
+      />
+    );
+  };
 
-                    setAutoSearchAfterClose(false);
-                } else {
-                    navigate('/');
-                }
-            });
-    };
+  const handleClose = (autoSearch = false) => {
+    setDialog({
+      isOpen: true,
+      text: 'Are you sure you want to close this chat?',
+      handler: () => closeChatHandler(autoSearch),
+    });
 
-    const MenuToggle = (props, ref) => {
-        return (
+  }
+  return (
+    <div
+      className={createClassesFromArray([
+        centerItems,
+        'bg-primary',
+        'md:min-w-[calc(100%-108px)]',
+        'min-w-full',
+        'flex-col',
+        'h-screen',
+        'text-white',
+      ])}
+    >
+      <div className="flex items-center justify-between border-b-[2px] px-5 border-secondary h-[100px] w-[100%]">
+        <div className="md:hidden">
+          <Whisper
+            placement="auto"
+            controlId="control-id-hover"
+            trigger="hover"
+            speaker={<Tooltip>Home</Tooltip>}
+          >
             <IconButton
-                {...props}
-                ref={ref}
-                icon={<Icon as={BiDotsVerticalRounded} />}
-                appearance="subtle"
-                circle
+              onClick={() => navigate('/')}
+              appearance="subtle"
+              className="bg-primary "
+              icon={<Icon as={BiArrowBack} />}
+              circle
             />
-        );
-    };
+          </Whisper>
+        </div>
+        <div>
+          <h2 className="text-[1em] font-semibold">Anonymous User</h2>
+          {isTyping && <p className="mt-[-15px]">Typing</p>}
+        </div>
 
-    return (
-        <div
-            className={createClassesFromArray([
-                centerItems,
-                'bg-primary',
-                'md:min-w-[calc(100%-108px)]',
-                'min-w-full',
-                'flex-col',
-                'h-screen',
-                'text-white',
-            ])}
+        <Dropdown
+          placement="leftStart"
+          style={{ zIndex: 3 }}
+          renderToggle={MenuToggle}
+          noCaret
         >
-            <div className="flex items-center justify-between border-b-[2px] px-5 border-secondary h-[100px] w-[100%]">
-                <div className="md:hidden">
-                    <Whisper
-                        placement="auto"
-                        controlId="control-id-hover"
-                        trigger="hover"
-                        speaker={<Tooltip>Home</Tooltip>}
-                    >
-                        <IconButton
-                            onClick={() => navigate('/')}
-                            appearance="subtle"
-                            className="bg-primary "
-                            icon={<Icon as={BiArrowBack} />}
-                            circle
-                        />
-                    </Whisper>
-                </div>
-                <div>
-                    <h2 className="text-[1em] font-semibold">Anonymous User</h2>
-                    {isTyping && <p className="mt-[-15px]">Typing</p>}
-                </div>
-
-                <Dropdown
-                    placement="leftStart"
-                    style={{ zIndex: 3 }}
-                    renderToggle={MenuToggle}
-                    noCaret
-                >
-                    <Dropdown.Item onClick={() => handleClose()}>
-                        Close Chat
-                    </Dropdown.Item>
-
-                    {/* TODO: Use a checkbox in modal dialog instead */}
-                    <Dropdown.Item onClick={() => handleClose(true)}>
-                        Find a new buddy
-                    </Dropdown.Item>
-                </Dropdown>
-            </div>
-            <div
-                className={createClassesFromArray([
-                    centerItems,
-                    'flex-col',
-                    'w-[90%]',
-                    'h-[calc(100%-100px)]',
-                    'mt-auto',
-                ])}
-            >
-                <Chat />
-            </div>
-        </div>
-    );
+          <Dropdown.Item onClick={() => handleClose()}>
+            Close Chat
+          </Dropdown.Item>
+
+          {/* TODO: Use a checkbox in modal dialog instead */}
+          <Dropdown.Item onClick={() => handleClose(true)}>
+            Find a new buddy
+          </Dropdown.Item>
+        </Dropdown>
+      </div>
+      <div
+        className={createClassesFromArray([
+          centerItems,
+          'flex-col',
+          'w-[90%]',
+          'h-[calc(100%-100px)]',
+          'mt-auto',
+        ])}
+      >
+        <Chat />
+      </div>
+    </div>
+  );
 };
 
 export default Anonymous;
 
 Anonymous.propTypes = {
-    onChatClosed: PropTypes.func,
-};
+  onChatClosed: PropTypes.func,
+};
\ No newline at end of file
diff --git a/client/src/components/BuddyMatcher.jsx b/client/src/components/BuddyMatcher.jsx
index a23fb0b2..4ec057d8 100644
--- a/client/src/components/BuddyMatcher.jsx
+++ b/client/src/components/BuddyMatcher.jsx
@@ -11,166 +11,167 @@ import { useApp } from 'src/context/AppContext';
 
 const stoppingSearchLoadingText = <p>Stopping the search</p>;
 const BuddyMatcher = () => {
-    const { playNotification } = useNotification();
-    const navigate = useNavigate();
-    const { auth } = useAuth();
-    const { createChat, closeChat, closeAllChats } = useChat();
-    const { startSearch, endSearch, app } = useApp();
-
-    const [isStoppingSearch, setIsStoppingSearch] = useState(false);
-    const socket = useContext(SocketContext);
-
-    const userID = auth.loginId;
-    const defaultLoadingText = <p>Looking for a random buddy</p>;
-    const [loadingText, setLoadingText] = useState(defaultLoadingText);
-    let timeout = null;
-
-    const startNewSearch = () => {
-        startSearch();
-        setLoadingText(defaultLoadingText);
-        socket.emit('join', { loginId: auth.loginId, email: auth.email });
-    };
-
-    const handleStopSearch = () => {
-        socket.emit('stop_search', {
-            loginId: auth.loginId,
-            email: auth.email,
-        });
-        setIsStoppingSearch(true);
-    };
+  const { playNotification } = useNotification();
+  const navigate = useNavigate();
+  const { auth } = useAuth();
+  const { createChat, closeChat, closeAllChats } = useChat();
+  const { startSearch, endSearch, app } = useApp();
+
+  const [isStoppingSearch, setIsStoppingSearch] = useState(false);
+  const socket = useContext(SocketContext);
+
+  const userID = auth.loginId;
+  const defaultLoadingText = <p>Looking for a random buddy</p>;
+  const [loadingText, setLoadingText] = useState(defaultLoadingText);
+  let timeout = null;
+
+  const startNewSearch = () => {
+    startSearch();
+    setLoadingText(defaultLoadingText);
+    socket.emit('join', { loginId: auth.loginId, email: auth.email });
+  };
+
+  const handleStopSearch = () => {
+    socket.emit('stop_search', {
+      loginId: auth.loginId,
+      email: auth.email,
+    });
+    setIsStoppingSearch(true);
+  };
+
+  useEffect(() => {
+
+    setLoadingText(
+      isStoppingSearch ? stoppingSearchLoadingText : defaultLoadingText
+    );
+  }, [isStoppingSearch]);
 
-    useEffect(() => {
+  useEffect(() => {
+    if (loadingText === defaultLoadingText) {
+      timeout = setTimeout(() => {
         setLoadingText(
-            isStoppingSearch ? stoppingSearchLoadingText : defaultLoadingText
+          <>
+            <p>
+              Taking too long? <br className="md:hidden" />
+              No <span className="hidden sm:inline">
+                chat
+              </span>{' '}
+              buddy is currently available :({' '}
+            </p>
+            <p>
+              <a
+                href="https://ctt.ac/US0h0"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Tweet
+              </a>{' '}
+              about this app and get more people to use it!
+            </p>
+          </>
         );
-    }, [isStoppingSearch]);
-
-    useEffect(() => {
-        if (loadingText === defaultLoadingText) {
-            timeout = setTimeout(() => {
-                setLoadingText(
-                    <>
-                        <p>
-                            Taking too long? <br className="md:hidden" />
-                            No <span className="hidden sm:inline">
-                                chat
-                            </span>{' '}
-                            buddy is currently available :({' '}
-                        </p>
-                        <p>
-                            <a
-                                href="https://ctt.ac/US0h0"
-                                target="_blank"
-                                rel="noreferrer"
-                            >
-                                Tweet
-                            </a>{' '}
-                            about this app and get more people to use it!
-                        </p>
-                    </>
-                );
-            }, 15000);
-        }
-
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, [loadingText]);
-
-    useEffect(() => {
-        if (!app.currentChatId) {
-            startSearch();
-        }
-
-        if (!socket.connected) {
-            socket.connect();
-        }
-
-        socket.on('close', (chatId) => {
-            endSearch();
-            closeChat(chatId);
-            playNotification('chatClosed');
-
-            if (
-                !confirm(
-                    'This chat is closed! Would you like to search for a new buddy?'
-                )
-            ) {
-                navigate('/');
-                return;
-            }
-
-            startNewSearch();
-        });
-
-        // This is necessary else chat won't be restored after re-connections
-        socket.on('connect', () => {
-            // Here server will be informed that user is searching for
-            // another user
-            socket.emit('join', { loginId: auth.loginId, email: auth.email });
-        });
-        socket.connected && socket.emit('adding', { userID });
-        socket.emit('createRoom', `${userID}-in-search`);
-        // From here will get the info from server that user has joined the room
-
-        socket.on('joined', ({ roomId, userIds }) => {
-            playNotification('buddyPaired');
-
-            createChat(roomId, userIds);
-            endSearch(roomId);
-        });
-
-        socket.on('chat_restore', ({ chats, currentChatId }) => {
-            Object.values(chats).forEach((chat) => {
-                createChat(
-                    chat.id,
-                    chat.userIds,
-                    chat.messages,
-                    chat.createdAt
-                );
-            });
-            endSearch(currentChatId);
-        });
-
-        socket.on('inactive', () => {
-            closeAllChats();
-        });
-
-        socket.on('stop_search_success', () => {
-            setIsStoppingSearch(false);
-            endSearch();
-            navigate('/');
-        });
-
-        return () => {
-            socket
-                .off('connect')
-                .off('joined')
-                .off('chat_restore')
-                .off('close')
-                .off('inactive');
-            socket.disconnect();
-        };
-    }, []);
-
-    return app.isSearching ? (
-        <div className="flex w-full justify-center items-center min-h-[calc(100vh-70px)] flex-col bg-primary">
-            <ThreeDots fill="rgb(255 159 28)" />
-            <div className="text-lg text-center text-white">{loadingText}</div>
-            {!isStoppingSearch && (
-                <button
-                    onClick={handleStopSearch}
-                    className={
-                        'hover:no-underline hover:text-white font-medium text-white text-[1.5em] w-[8em] h-[2.3em] mt-4 rounded-[30px] bg-[#FF3A46] flex flex-col items-center justify-center'
-                    }
-                >
-                    Stop
-                </button>
-            )}
-        </div>
-    ) : (
-        <Anonymous onChatClosed={startNewSearch} />
-    );
+      }, 15000);
+    }
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [loadingText]);
+
+  useEffect(() => {
+    if (!app.currentChatId) {
+      startSearch();
+    }
+
+    if (!socket.connected) {
+      socket.connect();
+    }
+
+    socket.on('close', (chatId) => {
+      endSearch();
+      closeChat(chatId);
+      playNotification('chatClosed');
+
+      if (
+        !confirm(
+          'This chat is closed! Would you like to search for a new buddy?'
+        )
+      ) {
+        navigate('/');
+        return;
+      }
+
+      startNewSearch();
+    });
+
+    // This is necessary else chat won't be restored after re-connections
+    socket.on('connect', () => {
+      // Here server will be informed that user is searching for
+      // another user
+      socket.emit('join', { loginId: auth.loginId, email: auth.email });
+    });
+    socket.connected && socket.emit('adding', { userID });
+    socket.emit('createRoom', `${userID}-in-search`);
+    // From here will get the info from server that user has joined the room
+
+    socket.on('joined', ({ roomId, userIds }) => {
+      playNotification('buddyPaired');
+
+      createChat(roomId, userIds);
+      endSearch(roomId);
+    });
+
+    socket.on('chat_restore', ({ chats, currentChatId }) => {
+      Object.values(chats).forEach((chat) => {
+        createChat(
+          chat.id,
+          chat.userIds,
+          chat.messages,
+          chat.createdAt
+        );
+      });
+      endSearch(currentChatId);
+    });
+
+    socket.on('inactive', () => {
+      closeAllChats();
+    });
+
+    socket.on('stop_search_success', () => {
+      setIsStoppingSearch(false);
+      endSearch();
+      navigate('/');
+    });
+
+    return () => {
+      socket
+        .off('connect')
+        .off('joined')
+        .off('chat_restore')
+        .off('close')
+        .off('inactive');
+      socket.disconnect();
+    };
+  }, []);
+
+  return app.isSearching ? (
+    <div className="flex w-full justify-center items-center min-h-[calc(100vh-70px)] flex-col bg-primary">
+      <ThreeDots fill="rgb(255 159 28)" />
+      <div className="text-lg text-center text-white">{loadingText}</div>
+      {!isStoppingSearch && (
+        <button
+          onClick={handleStopSearch}
+          className={
+            'hover:no-underline hover:text-white font-medium text-white text-[1.5em] w-[8em] h-[2.3em] mt-4 rounded-[30px] bg-[#FF3A46] flex flex-col items-center justify-center'
+          }
+        >
+          Stop
+        </button>
+      )}
+    </div>
+  ) : (
+    <Anonymous onChatClosed={startNewSearch} />
+  );
 };
 
-export default BuddyMatcher;
+export default BuddyMatcher;
\ No newline at end of file
diff --git a/client/src/components/Dialog.jsx b/client/src/components/Dialog.jsx
new file mode 100644
index 00000000..dc03a454
--- /dev/null
+++ b/client/src/components/Dialog.jsx
@@ -0,0 +1,75 @@
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { useDialog } from 'src/context/DialogContext';
+
+import 'styles/dialog.css';
+
+const Dialog = ({ ...rest }) => {
+    const { dialog, setDialog } = useDialog();
+    const { isOpen, text, handler, noBtnText, yesBtnText } = dialog;
+
+    const resetDialog = () => {
+        setDialog({ isOpen: false, text: '', handler: null });
+    };
+
+    const handleYesClick = () => {
+        handler?.();
+        resetDialog();
+    };
+
+    const handleNoClick = () => {
+        resetDialog();
+    };
+
+    useEffect(() => {
+        const handleKeydown = (e) => {
+            if (e.key === 'Escape') {
+                resetDialog();
+            }
+        };
+        window.addEventListener('keydown', handleKeydown);
+        return () => window.removeEventListener('keydown', handleKeydown);
+    }, [resetDialog]);
+
+    if (!isOpen) {
+        return null;
+    }
+
+    return ReactDOM.createPortal(
+        <>
+            <div
+                id="overlay"
+                className="dialog-overlay"
+                onClick={resetDialog}
+            />
+            <dialog open={isOpen} {...rest} className="dialog-container">
+                <p className="text-white text-[1rem]">
+                    {text || 'Are you sure?'}
+                </p>
+
+                <div className="flex justify-end gap-2 mt-6">
+                    <button
+                        className="dialog-btn bg-primary"
+                        onClick={handleNoClick}
+                    >
+                        {noBtnText || 'Cancel'}
+                    </button>
+                    <button
+                        className="dialog-btn bg-[#FF9F1C]"
+                        onClick={handleYesClick}
+                    >
+                        {yesBtnText || 'Confirm'}
+                    </button>
+                </div>
+            </dialog>
+        </>,
+        document.getElementById('portal')
+    );
+};
+
+export default Dialog;
+
+Dialog.propTypes = {
+    children: PropTypes.node.isRequired,
+};
diff --git a/client/src/components/NavBar.jsx b/client/src/components/NavBar.jsx
index 16ba46dd..1f744a16 100644
--- a/client/src/components/NavBar.jsx
+++ b/client/src/components/NavBar.jsx
@@ -9,6 +9,7 @@ import { RiUserSearchLine } from 'react-icons/ri';
 import { BiUserCircle, BiLogOut, BiCog } from 'react-icons/bi';
 
 // Store
+import { useDialog } from 'src/context/DialogContext';
 import { useAuth } from 'context/AuthContext';
 import { SocketContext } from 'context/Context';
 
@@ -25,25 +26,29 @@ const NavBar = ({ className }) => {
     const { app } = useApp();
     const socket = useContext(SocketContext);
     const location = useLocation();
+    const { setDialog } = useDialog();
 
     const handleLogout = () => {
-        if (confirm('Are you sure you want to logout?')) {
-            logout();
-
-            // Ensure that logout event is not queued by socket.io in case
-            // socket is disconnected
-            if (socket.disconnected) {
-                socket.volatile.emit('logout', {
-                    email: auth.email,
-                    loginId: auth.loginId,
-                });
-            } else {
-                socket.emit('logout', {
-                    email: auth.email,
-                    loginId: auth.loginId,
-                });
-            }
-        }
+        setDialog({
+            isOpen: true,
+            text: 'Are you sure you want to logout?',
+            noBtnText: 'Cancel',
+            yesBtnText: 'Yes, log me out',
+            handler: () => {
+                logout();
+                if (socket.disconnected) {
+                    socket.volatile.emit('logout', {
+                        email: auth.email,
+                        loginId: auth.loginId,
+                    });
+                } else {
+                    socket.emit('logout', {
+                        email: auth.email,
+                        loginId: auth.loginId,
+                    });
+                }
+            },
+        });
     };
 
     const getLinkStyle = ({ isActive }) => (isActive ? activeStyle : linkStyle);
@@ -139,4 +144,4 @@ NavBar.propTypes = {
     className: PropTypes.string,
 };
 
-export default NavBar;
+export default NavBar;
\ No newline at end of file
diff --git a/client/src/context/DialogContext.jsx b/client/src/context/DialogContext.jsx
new file mode 100644
index 00000000..1e8e8228
--- /dev/null
+++ b/client/src/context/DialogContext.jsx
@@ -0,0 +1,39 @@
+import { createContext, useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+
+const initialState = {
+    isOpen: false,
+    text: '',
+    handler: () => undefined,
+    noBtnText: '',
+    yesBtnText: '',
+};
+
+const DialogContext = createContext({
+    dialog: { ...initialState },
+    // Tried to add typehint but eslint complains so I had to do this.
+    // eslint-disable-next-line no-unused-vars
+    setDialog: (_options = { ...initialState }) => undefined,
+});
+
+export const useDialog = () => useContext(DialogContext);
+
+export function DialogProvider({ children, ...props }) {
+    const [dialog, setDialog] = useState({
+        isOpen: false,
+        text: '',
+        handler: null,
+        noBtnText: '',
+        yesBtnText: '',
+    });
+
+    return (
+        <DialogContext.Provider value={{ dialog, setDialog }} {...props}>
+            {children}
+        </DialogContext.Provider>
+    );
+}
+
+DialogProvider.propTypes = {
+    children: PropTypes.node.isRequired,
+};
diff --git a/client/src/index.jsx b/client/src/index.jsx
index 247a70f3..c501f22e 100644
--- a/client/src/index.jsx
+++ b/client/src/index.jsx
@@ -7,13 +7,18 @@ import { AuthProvider } from './context/AuthContext';
 import { AppProvider } from './context/AppContext';
 import 'rsuite/dist/rsuite.min.css';
 import { socket, SocketContext } from 'context/Context';
+import { DialogProvider } from './context/DialogContext';
+import Dialog from './components/Dialog';
 
 render(
     <AuthProvider>
         <AppProvider>
             <Router>
                 <SocketContext.Provider value={socket}>
-                    <App />
+                    <DialogProvider>
+                        <App />
+                        <Dialog />
+                    </DialogProvider>
                 </SocketContext.Provider>
             </Router>
         </AppProvider>
diff --git a/client/src/pages/Start.jsx b/client/src/pages/Start.jsx
index c546c4a2..50ea01c4 100644
--- a/client/src/pages/Start.jsx
+++ b/client/src/pages/Start.jsx
@@ -2,7 +2,6 @@ import { useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
 import { RiUserSearchLine } from 'react-icons/ri';
-
 import { useApp } from 'src/context/AppContext';
 
 import { createClassesFromArray } from 'src/lib/utils';
diff --git a/client/src/styles/dialog.css b/client/src/styles/dialog.css
new file mode 100644
index 00000000..cd4bb778
--- /dev/null
+++ b/client/src/styles/dialog.css
@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+    .dialog-overlay {
+        @apply z-50 fixed inset-0 bg-black opacity-60;
+    }
+
+    .dialog-container {
+        @apply z-50 rounded-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 m-0 bg-secondary w-[90%] md:w-auto md:max-w-md px-6 py-6;
+    }
+
+    .dialog-btn {
+        @apply hover:opacity-80 text-white px-4 py-2 rounded-lg;
+    }
+}
