Feat/#341 Delete Confirmation Modal (#342)

* added-babel-config * mods * add-required-components * implement-modal/store * modal-mods * delete-modal-implement * edits * edits2 * edits3 * reverse-mods * final-modal-implementation * remove-comments * add-trash-icon * handleDeleteMessage-mods * useState-mods * discard-toastStore * remove-useContext() * show message preview in delete modal Signed-off-by: Abhinav Kumar <[email protected]> * added changesets Signed-off-by: Abhinav Kumar <[email protected]> --------- Signed-off-by: Abhinav Kumar <[email protected]> Co-authored-by: Abhinav Kumar <[email protected]>
RocketChat · Dec 13, 2023 · 100c5f7 · 100c5f7
1 parent f88dc90
commit 100c5f7
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 71 deletions.
diff --git a/.changeset/wicked-cats-try.md b/.changeset/wicked-cats-try.md
@@ -0,0 +1,5 @@
+---
+"@embeddedchat/react": patch
+---
+
+Improve: Added confirmation modal on deleting message
diff --git a/packages/react/src/components/Message/Message.js b/packages/react/src/components/Message/Message.js
@@ -108,8 +108,8 @@ const Message = ({
     }
   };
 
-  const handleDeleteMessage = async (msg) => {
-    const res = await RCInstance.deleteMessage(msg._id);
+  const handleDeleteMessage = async (message) => {
+    const res = await RCInstance.deleteMessage(message._id);
 
     if (res.success) {
       dispatchToastMessage({
@@ -222,8 +222,8 @@ const Message = ({
               message={message}
               isEditing={editMessage._id === message._id}
               authenticatedUserId={authenticatedUserId}
-              handleDeleteMessage={handleDeleteMessage}
               handleOpenThread={handleOpenThread}
+              handleDeleteMessage={handleDeleteMessage}
               handleStarMessage={handleStarMessage}
               handlePinMessage={handlePinMessage}
               handleEditMessage={() => {

diff --git a/packages/react/src/components/Message/MessageToolbox.js b/packages/react/src/components/Message/MessageToolbox.js
@@ -6,6 +6,10 @@ import { Box } from '../Box';
 import { appendClassNames } from '../../lib/appendClassNames';
 import { ActionButton } from '../ActionButton';
 import { EmojiPicker } from '../EmojiPicker';
+import { Modal } from '../Modal';
+import { Icon } from '../Icon';
+import { Button } from '../Button';
+import { parseEmoji } from '../../lib/emoji';
 
 const MessageToolboxWrapperCss = css`
   display: none;
@@ -41,9 +45,9 @@ export const MessageToolbox = ({
   authenticatedUserId,
   handleOpenThread,
   handleEmojiClick,
-  handleDeleteMessage,
   handlePinMessage,
   handleStarMessage,
+  handleDeleteMessage,
   handlerReportMessage,
   handleEditMessage,
   isEditing = false,
@@ -54,88 +58,136 @@ export const MessageToolbox = ({
     className,
     style
   );
+
   const [isEmojiOpen, setEmojiOpen] = useState(false);
+
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  const handleOnClose = () => {
+    setShowDeleteModal(false);
+  };
+
+  const handleClickDelete = () => {
+    setShowDeleteModal(true);
+  };
+
   return (
-    <Box css={MessageToolboxWrapperCss}>
-      <Box
-        css={MessageToolboxCss}
-        className={appendClassNames('ec-message-toolbox', classNames)}
-        style={styleOverrides}
-        {...props}
-      >
-        {!isThreadMessage ? (
+    <>
+      <Box css={MessageToolboxWrapperCss}>
+        <Box
+          css={MessageToolboxCss}
+          className={appendClassNames('ec-message-toolbox', classNames)}
+          style={styleOverrides}
+          {...props}
+        >
+          {!isThreadMessage ? (
+            <ActionButton
+              ghost
+              size="small"
+              icon="thread"
+              onClick={handleOpenThread(message)}
+            />
+          ) : null}
           <ActionButton
             ghost
             size="small"
-            icon="thread"
-            onClick={handleOpenThread(message)}
+            icon={`${
+              message.starred &&
+              message.starred.find((u) => u._id === authenticatedUserId)
+                ? 'star-filled'
+                : 'star'
+            }`}
+            onClick={() => handleStarMessage(message)}
           />
-        ) : null}
-        <ActionButton
-          ghost
-          size="small"
-          icon={`${
-            message.starred &&
-            message.starred.find((u) => u._id === authenticatedUserId)
-              ? 'star-filled'
-              : 'star'
-          }`}
-          onClick={() => handleStarMessage(message)}
-        />
-        <ActionButton
-          ghost
-          size="small"
-          icon="emoji"
-          onClick={() => setEmojiOpen(true)}
-        />
-        <Popup
-          modal
-          open={isEmojiOpen}
-          onClose={() => setEmojiOpen(false)}
-          closeOnEscape
-          position="left center"
-        >
-          <EmojiPicker
-            handleEmojiClick={(emoji) => {
-              setEmojiOpen(false);
-              handleEmojiClick(emoji, message, true);
-            }}
-          />
-        </Popup>
-        {!isThreadMessage && (
           <ActionButton
             ghost
             size="small"
-            icon="pin"
-            onClick={() => handlePinMessage(message)}
+            icon="emoji"
+            onClick={() => setEmojiOpen(true)}
           />
-        )}
-        {message.u._id === authenticatedUserId && (
-          <>
-            <ActionButton
-              ghost={!isEditing}
-              color={isEditing ? 'secondary' : 'default'}
-              size="small"
-              icon="edit"
-              onClick={() => handleEditMessage(message)}
+          <Popup
+            modal
+            open={isEmojiOpen}
+            onClose={() => setEmojiOpen(false)}
+            closeOnEscape
+            position="left center"
+          >
+            <EmojiPicker
+              handleEmojiClick={(emoji) => {
+                setEmojiOpen(false);
+                handleEmojiClick(emoji, message, true);
+              }}
             />
+          </Popup>
+          {!isThreadMessage && (
             <ActionButton
               ghost
               size="small"
-              icon="trash"
-              color="error"
-              onClick={() => handleDeleteMessage(message)}
+              icon="pin"
+              onClick={() => handlePinMessage(message)}
             />
-          </>
-        )}
-        <ActionButton
-          ghost
-          size="small"
-          icon="report"
-          color="error"
-          onClick={() => handlerReportMessage(message)}
-        />
+          )}
+          {message.u._id === authenticatedUserId && (
+            <>
+              <ActionButton
+                ghost={!isEditing}
+                color={isEditing ? 'secondary' : 'default'}
+                size="small"
+                icon="edit"
+                onClick={() => handleEditMessage(message)}
+              />
+              <ActionButton
+                ghost
+                size="small"
+                icon="trash"
+                color="error"
+                onClick={() => handleClickDelete(message)}
+              />
+            </>
+          )}
+          <ActionButton
+            ghost
+            size="small"
+            icon="report"
+            color="error"
+            onClick={() => handlerReportMessage(message)}
+          />
+        </Box>
       </Box>
-    </Box>
+      {showDeleteModal && (
+        <Modal>
+          <Modal.Header>
+            <Modal.Title>
+              <Icon name="trash" size="1.25rem" /> Delete this message?
+            </Modal.Title>
+            <Modal.Close onClick={handleOnClose} />
+          </Modal.Header>
+          <Modal.Content
+            style={{
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              padding: '0 0.5rem 0.5rem',
+            }}
+          >
+            {parseEmoji(message.msg)}
+          </Modal.Content>
+          <Modal.Footer>
+            <Button color="secondary" onClick={handleOnClose}>
+              Cancel
+            </Button>
+            <Button
+              color="error"
+              onClick={() => {
+                handleDeleteMessage(message);
+                handleOnClose();
+              }}
+            >
+              Delete message
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      )}
+    </>
   );
 };