add the modal to confirm pinning message

RocketChat · Feb 7, 2024 · ac1c38d · ac1c38d
1 parent 3fef94b
commit ac1c38d
Showing 1 changed file with 57 additions and 1 deletion.
diff --git 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')}
         </MessageDivider>
       ) : null}
+      {confirmationModal && (
+        <Modal>
+        <Modal css={css`padding: 1em;`} onClose={closeConfirmationModal}>
+          <Modal.Header>
+            <Modal.Title>
+              <Icon name="pin" size="1.25rem" css={css`margin-right: 5px;`}/> 
+              Pin Message
+            </Modal.Title>
+            <Modal.Close onClick={closeConfirmationModal} />
+          </Modal.Header>
+          <Modal.Content css={css`margin: 1em;`}> Are you sure you want to pin this message? </Modal.Content>
+          <Modal.Content css={css`margin: 1em;`}> 
+            {`quoted message`}
+          </Modal.Content>
+          <Modal.Content css={css`margin: 1em;`}> 
+            Pinned messages are visible to everyone <br />
+            Starred messages are only visible to you 
+          </Modal.Content>
+          <Modal.Footer>
+            <Button color="secondary" onClick={closeConfirmationModal}>
+              Cancel
+            </Button>
+            <Button onClick={handleConfirmPinning} color="primary">
+              Yes, Pin Message
+            </Button>
+          </Modal.Footer>
+        </Modal>
+        </Modal>
+      )}
     </>
   );
 };