diff --git a/packages/react/src/components/Message/Message.js b/packages/react/src/components/Message/Message.js index eb3dcaad7..c5e59b596 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,24 @@ 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); + }; + + useEffect(() => { + if(pinMessageConfirmed) handlePinMessage(message); + }, [pinMessageConfirmed]); + + const handleConfirmPinning = () => { + setPinMessageConfirmed(true); + closeConfirmationModal(); + }; const handleStarMessage = async (msg) => { const isStarred = @@ -92,6 +113,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); @@ -248,6 +275,35 @@ const Message = ({ {format(new Date(message.ts), 'MMMM d, yyyy')} ) : null} + {confirmationModal && ( + + + + + + Pin Message + + + + Are you sure you want to pin this message? + + {`quoted message`} + + + Pinned messages are visible to everyone
+ Starred messages are only visible to you +
+ + + + +
+
+ )} ); };