menu item creation moved to getPinConversationMenuItem

ts/components/session/menu/ConversationListItemContextMenu.tsx

@@ -15,7 +15,7 @@ import {
   getInviteContactMenuItem,
   getLeaveGroupMenuItem,
   getMarkAllReadMenuItem,
-  MenuItemPinConversation,
+  getPinConversationMenuItem,
 } from './Menu';
 
 export type PropsContextConversationItem = {
@@ -46,15 +46,11 @@ export const ConversationListItemContextMenu = (props: PropsContextConversationI
 
   const isGroup = type === 'group';
   const isMessagesSection = useSelector(getFocusedSection) === SectionType.Message;
-  const pinMenuItem =
-    isMessagesSection && window.lokiFeatureFlags.enablePinConversations ? (
-      <MenuItemPinConversation conversationId={conversationId} />
-    ) : null;
 
   return (
     <>
       <Menu id={triggerId} animation={animation.fade}>
-        {pinMenuItem}
+        {getPinConversationMenuItem(isMessagesSection, conversationId)}
         {getBlockMenuItem(isMe, type === ConversationTypeEnum.PRIVATE, isBlocked, conversationId)}
         {getCopyMenuItem(isPublic, isGroup, conversationId)}
         {getMarkAllReadMenuItem(conversationId)}

ts/components/session/menu/Menu.tsx

@@ -130,28 +130,32 @@ export interface PinConversationMenuItemProps {
   conversationId: string;
 }
 
-export const MenuItemPinConversation = (
+export const getPinConversationMenuItem = (
-  props: PinConversationMenuItemProps
+  isMessagesSection: boolean,
+  conversationId: string
 ): JSX.Element | null => {
-  const { conversationId } = props;
+  if (isMessagesSection && window.lokiFeatureFlags.enablePinConversations) {
-  const conversation = getConversationController().get(conversationId);
+    const conversation = getConversationController().get(conversationId);
-  const isPinned = conversation.isPinned();
+    const isPinned = conversation.isPinned();
-  const nbOfAlreadyPinnedConvos = useSelector(getNumberOfPinnedConversations);
+    const nbOfAlreadyPinnedConvos = useSelector(getNumberOfPinnedConversations);
-
+
-  const togglePinConversation = async () => {
+    const togglePinConversation = async () => {
-    if ((!isPinned && nbOfAlreadyPinnedConvos < maxNumberOfPinnedConversations) || isPinned) {
+      if ((!isPinned && nbOfAlreadyPinnedConvos < maxNumberOfPinnedConversations) || isPinned) {
-      await conversation.setIsPinned(!isPinned);
+        await conversation.setIsPinned(!isPinned);
-    } else {
+      } else {
-      ToastUtils.pushToastWarning(
+        ToastUtils.pushToastWarning(
-        'pinConversationLimitToast',
+          'pinConversationLimitToast',
-        window.i18n('pinConversationLimitTitle'),
+          window.i18n('pinConversationLimitTitle'),
-        window.i18n('pinConversationLimitToastDescription', maxNumberOfPinnedConversations)
+          window.i18n('pinConversationLimitToastDescription', maxNumberOfPinnedConversations)
-      );
+        );
-    }
+      }
-  };
+    };
 
-  const menuText = isPinned ? window.i18n('unpinConversation') : window.i18n('pinConversation');
+    const menuText = isPinned ? window.i18n('unpinConversation') : window.i18n('pinConversation');
-  return <Item onClick={togglePinConversation}>{menuText}</Item>;
+    return <Item onClick={togglePinConversation}>{menuText}</Item>;
+  } else {
+    return null;
+  }
 };
 
 export function getDeleteContactMenuItem(