feat: add unstar, unpin, copy link, and navigate options in starred a…

…nd pinned files list
RocketChat · Dec 27, 2024 · 658c292 · 658c292
1 parent 94e0faf
commit 658c292
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 17 deletions.
diff --git a/packages/react/src/views/MessageAggregators/PinnedMessages.js b/packages/react/src/views/MessageAggregators/PinnedMessages.js
@@ -1,14 +1,38 @@
-import React from 'react';
-import { useComponentOverrides } from '@embeddedchat/ui-elements';
+import React, { useContext } from 'react';
+import {
+  useComponentOverrides,
+  useToastBarDispatch,
+} from '@embeddedchat/ui-elements';
 import { MessageAggregator } from './common/MessageAggregator';
+import RCContext from '../../context/RCInstance';
 
 const PinnedMessages = () => {
   const { variantOverrides } = useComponentOverrides('PinnedMessages');
   const viewType = variantOverrides.viewType || 'Sidebar';
+  const { RCInstance } = useContext(RCContext);
+  const dispatchToastMessage = useToastBarDispatch();
+
+  const unpin = async (msg) => {
+    const isPinned = msg.pinned;
+    const Unpin = await RCInstance.unpinMessage(msg._id);
+    if (Unpin.error) {
+      dispatchToastMessage({
+        type: 'error',
+        message: 'Error pinning message',
+      });
+    } else {
+      dispatchToastMessage({
+        type: 'success',
+        message: isPinned ? 'Message unpinned' : 'Message pinned',
+      });
+    }
+  };
   return (
     <MessageAggregator
       title="Pinned Messages"
       iconName="pin"
+      unpin={unpin}
+      isPinnedMessageDisplay
       noMessageInfo="No Pinned Messages"
       shouldRender={(msg) => msg.pinned}
       viewType={viewType}

diff --git a/packages/react/src/views/MessageAggregators/StarredMessages.js b/packages/react/src/views/MessageAggregators/StarredMessages.js
@@ -1,7 +1,11 @@
-import React, { useCallback, useEffect } from 'react';
-import { useComponentOverrides } from '@embeddedchat/ui-elements';
+import React, { useCallback, useContext } from 'react';
+import {
+  useComponentOverrides,
+  useToastBarDispatch,
+} from '@embeddedchat/ui-elements';
 import { useStarredMessageStore, useUserStore } from '../../store';
 import { MessageAggregator } from './common/MessageAggregator';
+import RCContext from '../../context/RCInstance';
 
 const StarredMessages = () => {
   const authenticatedUserId = useUserStore((state) => state.userId);
@@ -10,16 +14,33 @@ const StarredMessages = () => {
   const starredMessages = useStarredMessageStore(
     (state) => state.starredMessages
   );
+  const setStarredMessages = useStarredMessageStore(
+    (state) => state.setStarredMessages
+  );
+  const dispatchToastMessage = useToastBarDispatch();
+  const { RCInstance } = useContext(RCContext);
   const shouldRender = useCallback(
     (msg) =>
       msg.starred &&
       msg.starred.some((star) => star._id === authenticatedUserId),
     [authenticatedUserId]
   );
+
+  const unstar = async (msg) => {
+    await RCInstance.unstarMessage(msg._id);
+    dispatchToastMessage({
+      type: 'success',
+      message: 'Message unstarred',
+    });
+    setStarredMessages(starredMessages.filter((str) => str._id !== msg._id));
+  };
+
   return (
     <MessageAggregator
       title="Starred Messages"
       iconName="star"
+      isStarredMessageDisplay
+      unstar={unstar}
       noMessageInfo="No Starred Messages"
       fetchedMessageList={starredMessages}
       shouldRender={shouldRender}

diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
@@ -1,13 +1,16 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useContext } from 'react';
 import { isSameDay, format } from 'date-fns';
 import {
   Box,
+  Menu,
   Sidebar,
   Popup,
   useTheme,
   ActionButton,
   Icon,
+  useToastBarDispatch,
 } from '@embeddedchat/ui-elements';
+import RCContext from '../../../context/RCInstance';
 import { MessageDivider } from '../../Message/MessageDivider';
 import Message from '../../Message/Message';
 import getMessageAggregatorStyles from './MessageAggregator.styles';
@@ -21,6 +24,10 @@ import useSetExclusiveState from '../../../hooks/useSetExclusiveState';
 export const MessageAggregator = ({
   title,
   iconName,
+  isStarredMessageDisplay = false,
+  isPinnedMessageDisplay = false,
+  unstar,
+  unpin,
   noMessageInfo,
   shouldRender,
   fetchedMessageList,
@@ -33,6 +40,7 @@ export const MessageAggregator = ({
   const { theme } = useTheme();
   const styles = getMessageAggregatorStyles(theme);
   const setExclusiveState = useSetExclusiveState();
+  const { RCInstance } = useContext(RCContext);
   const messages = useMessageStore((state) => state.messages);
   const threadMessages = useMessageStore((state) => state.threadMessages) || [];
   const allMessages = useMemo(
@@ -44,6 +52,7 @@ export const MessageAggregator = ({
     fetchedMessageList || searchFiltered || allMessages,
     shouldRender
   );
+  const dispatchToastMessage = useToastBarDispatch();
 
   const setShowSidebar = useSidebarStore((state) => state.setShowSidebar);
   const setJumpToMessage = (msgId) => {
@@ -56,6 +65,28 @@ export const MessageAggregator = ({
     }
   };
 
+  const getMessageLink = async (id) => {
+    const host = await RCInstance.getHost();
+    const res = await RCInstance.channelInfo();
+    return `${host}/channel/${res.room.name}/?msg=${id}`;
+  };
+
+  const copyLink = async (id) => {
+    try {
+      const messageLink = await getMessageLink(id);
+      await navigator.clipboard.writeText(messageLink);
+      dispatchToastMessage({
+        type: 'success',
+        message: 'Message link copied successfully',
+      });
+    } catch (err) {
+      dispatchToastMessage({
+        type: 'error',
+        message: 'Error in copying message link',
+      });
+    }
+  };
+
   const isMessageNewDay = (current, previous) =>
     !previous ||
     shouldRender(previous) ||
@@ -136,18 +167,55 @@ export const MessageAggregator = ({
                       }}
                     />
 
-                    <ActionButton
-                      square
-                      ghost
-                      onClick={() => setJumpToMessage(msg._id)}
-                      css={{
-                        position: 'relative',
-                        zIndex: 10,
-                        marginRight: '5px',
-                      }}
-                    >
-                      <Icon name="arrow-back" size="1.25rem" />
-                    </ActionButton>
+                    {!isStarredMessageDisplay && !isPinnedMessageDisplay && (
+                      <ActionButton
+                        square
+                        ghost
+                        onClick={() => setJumpToMessage(msg._id)}
+                        css={{
+                          position: 'relative',
+                          zIndex: 10,
+                          marginRight: '5px',
+                        }}
+                      >
+                        <Icon name="arrow-back" size="1.25rem" />
+                      </ActionButton>
+                    )}
+                    {(isStarredMessageDisplay || isPinnedMessageDisplay) && (
+                      <Box
+                        style={{
+                          marginRight: '20px',
+                        }}
+                      >
+                        <Menu
+                          isToolTip={false}
+                          options={[
+                            {
+                              id: isStarredMessageDisplay ? 'unpin' : 'unstar',
+                              action: isStarredMessageDisplay
+                                ? () => unstar(msg)
+                                : () => unpin(msg),
+                              label: isStarredMessageDisplay
+                                ? 'Remove star'
+                                : 'Unpin',
+                              icon: isStarredMessageDisplay ? 'star' : 'pin',
+                            },
+                            {
+                              id: 'copyLink',
+                              action: () => copyLink(msg._id),
+                              label: 'Copy link',
+                              icon: 'link',
+                            },
+                            {
+                              id: 'navigate',
+                              action: () => setJumpToMessage(msg._id),
+                              label: 'Navigate',
+                              icon: 'arrow-back',
+                            },
+                          ]}
+                        />
+                      </Box>
+                    )}
                   </Box>
                 )}
               </React.Fragment>

diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js
@@ -9,6 +9,8 @@ const getMessageAggregatorStyles = () => {
       justify-content: initial;
       align-items: initial;
       max-width: 100%;
+      overflow-y: scroll;
+      padding-right: 0;
     `,
 
     noMessageStyles: css`