diff --git a/packages/react/src/components/Message/Message.js b/packages/react/src/components/Message/Message.js index f07cc9727..297418d1e 100644 --- a/packages/react/src/components/Message/Message.js +++ b/packages/react/src/components/Message/Message.js @@ -1,4 +1,4 @@ -import React, { memo, useContext, useMemo } from 'react'; +import React, { memo, useContext, useMemo, useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { format } from 'date-fns'; import { css } from '@emotion/react'; @@ -20,6 +20,9 @@ import { MessageDivider } from './MessageDivider'; import { useToastBarDispatch } from '../../hooks/useToastBarDispatch'; import MessageAvatarContainer from './MessageAvatarContainer'; import MessageBodyContainer from './MessageBodyContainer'; +import { Modal } from '../Modal'; +import { Icon } from '../Icon'; +import { Button } from '../Button'; const MessageCss = css` display: flex; @@ -71,6 +74,20 @@ const Message = ({ setEditMessage: state.setEditMessage, })); const openThread = useMessageStore((state) => state.openThread); + const [pinMessageConfirmed, setPinMessageConfirmed] = useState(false); + const [confirmationModal, setConfirmationModal] = useState(false); + + const openConfirmationModal = () => { + setConfirmationModal(true); + }; + const closeConfirmationModal = () => { + setConfirmationModal(false); + }; + + const handleConfirmPinning = () => { + setPinMessageConfirmed(true); + closeConfirmationModal(); + }; const handleStarMessage = async (msg) => { const isStarred = @@ -92,6 +109,12 @@ const Message = ({ const handlePinMessage = async (msg) => { const isPinned = msg.pinned; + if (!isPinned && !pinMessageConfirmed) { + openConfirmationModal(); + return; + } + setPinMessageConfirmed(false); + const pinOrUnpin = isPinned ? await RCInstance.unpinMessage(msg._id) : await RCInstance.pinMessage(msg._id); @@ -108,6 +131,10 @@ const Message = ({ } }; + useEffect(() => { + if (pinMessageConfirmed) handlePinMessage(message); + }, [pinMessageConfirmed]); + const handleDeleteMessage = async (msg) => { const res = await RCInstance.deleteMessage(msg._id); @@ -248,6 +275,85 @@ const Message = ({ {format(new Date(message.ts), 'MMMM d, yyyy')} ) : null} + {confirmationModal && ( + + + + + + Pin Message + + + + + {' '} + Are you sure you want to pin this message?{' '} + + + {/* Add the isPinned prop after that gets merged */} + + {showAvatar && ( + + )} + + + + {message.attachments && message.attachments.length > 0 + ? message.file.name + : message.msg} + + + + + + + Pinned messages are visible to everyone + + Starred messages are only visible to you + + + + + + + + )} ); };