Virtual List for FeedItems

src/pages/common/components/ChatComponent/ChatComponent.tsx

@@ -114,7 +114,7 @@ interface ChatComponentInterface {
   directParent?: DirectParent | null;
   renderChatInput?: () => ReactNode;
   onUserClick?: (userId: string) => void;
-  onStreamMentionClick?: (feedItemId: string) => void;
+  onStreamMentionClick?: ((feedItemId: string, options?: { commonId?: string; messageId?: string }) => void) | ((data: InternalLinkData) => void);
   onFeedItemClick?: (feedItemId: string) => void;
   onInternalLinkClick?: (data: InternalLinkData) => void;
 }

src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx

@@ -68,7 +68,7 @@ interface ChatContentInterface {
   onMessageDelete?: (messageId: string) => void;
   directParent?: DirectParent | null;
   onUserClick?: (userId: string) => void;
-  onStreamMentionClick?: (link: string) => void;
+  onStreamMentionClick?: ((feedItemId: string, options?: { commonId?: string; messageId?: string }) => void) | ((data: InternalLinkData) => void);
   onFeedItemClick?: (feedItemId: string) => void;
   onInternalLinkClick?: (data: InternalLinkData) => void;
   isEmpty?: boolean;

src/pages/common/components/ChatComponent/hooks/useDiscussionChatAdapter.ts

@@ -13,7 +13,7 @@ import { InternalLinkData } from "@/shared/utils";
 interface Options {
   hasPermissionToHide: boolean;
   onUserClick?: (userId: string) => void;
-  onStreamMentionClick?: (feedItemId: string) => void;
+  onStreamMentionClick?: ((feedItemId: string, options?: { commonId?: string; messageId?: string }) => void) | ((data: InternalLinkData) => void);
   onFeedItemClick?: (feedItemId: string) => void;
   onInternalLinkClick?: (data: InternalLinkData) => void;
   directParent?: DirectParent | null;

src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx

@@ -1,12 +1,3 @@
-// import { scan } from 'react-scan'; // import this BEFORE react
-
-// if (typeof window !== 'undefined') {
-//   scan({
-//     enabled: true,
-//     log: true, // logs render info to console (default: false)
-//   });
-// }
-
 import React, {
   forwardRef,
   useCallback,
@@ -86,6 +77,7 @@ interface DiscussionFeedCardProps {
   onUserClick?: (userId: string) => void;
   onFeedItemClick: (feedItemId: string) => void;
   onInternalLinkClick: (data: InternalLinkData) => void;
+  onExpand?: (isExpanded: boolean) => void;
   isOptimisticallyCreated?: boolean;
 }
 
@@ -125,6 +117,7 @@ function DiscussionFeedCard(props, ref) {
     onFeedItemClick,
     onInternalLinkClick,
     isOptimisticallyCreated,
+    onExpand,
   } = props;
   const {
     isShowing: isReportModalOpen,
@@ -412,6 +405,7 @@ function DiscussionFeedCard(props, ref) {
         unreadMessages={feedItemUserMetadata?.count || 0}
         isActive={isActive}
         isExpanded={isExpanded}
+        onExpand={onExpand}
         onClick={handleOpenChat}
         title={cardTitle}
         lastMessage={lastMessage}

src/pages/common/components/FeedCard/FeedCard.tsx

@@ -60,6 +60,7 @@ type FeedCardProps = PropsWithChildren<{
   notion?: CommonNotion;
   originalCommonIdForLinking?: string;
   linkedCommonIds?: string[];
+  onExpand?: (isExpanded: boolean) => void;
 }>;
 
 const FeedCard = (props, ref) => {
@@ -96,6 +97,7 @@ const FeedCard = (props, ref) => {
     notion,
     originalCommonIdForLinking,
     linkedCommonIds,
+    onExpand,
   } = props;
   const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const isTabletView = useIsTabletView();
@@ -105,6 +107,13 @@ const FeedCard = (props, ref) => {
   const { getCollapseProps, getToggleProps } = useCollapse({
     isExpanded: isContentVisible,
     duration: COLLAPSE_DURATION,
+    onTransitionStateChange: (state) => {
+      if(state === "expandEnd") {
+        onExpand && onExpand(true);
+      } else if (state === "collapseEnd") {
+        onExpand && onExpand(false);
+      }
+    }
   });
   const containerRef = useRef<HTMLDivElement>(null);
 

src/pages/common/components/FeedItem/FeedItem.tsx

@@ -57,6 +57,7 @@ interface FeedItemProps {
   onFeedItemUpdate?: (item: CommonFeed, isRemoved: boolean) => void;
   getNonAllowedItems?: GetNonAllowedItemsOptions;
   isOptimisticallyCreated?: boolean;
+  onExpand?: (isExpanded: boolean) => void;
 }
 
 const FeedItem = forwardRef<FeedItemRef, FeedItemProps>((props, ref) => {
@@ -88,6 +89,7 @@ const FeedItem = forwardRef<FeedItemRef, FeedItemProps>((props, ref) => {
     onFeedItemUpdate: outerOnFeedItemUpdate,
     getNonAllowedItems: outerGetNonAllowedItems,
     isOptimisticallyCreated = false,
+    onExpand,
   } = props;
   const {
     onFeedItemUpdate,
@@ -177,6 +179,7 @@ const FeedItem = forwardRef<FeedItemRef, FeedItemProps>((props, ref) => {
       onStreamMentionClick: onFeedItemClick, 
       onFeedItemClick,
       onInternalLinkClick,
+      onExpand
     }),
     [
       ref,
@@ -206,6 +209,7 @@ const FeedItem = forwardRef<FeedItemRef, FeedItemProps>((props, ref) => {
       handleUserClick,
       onFeedItemClick,
       onInternalLinkClick,
+      onExpand
     ],
   );
 

src/pages/common/components/OptimisticFeedCard/OptimisticFeedCard.tsx

@@ -63,6 +63,7 @@ interface OptimisticFeedCardProps {
   onUserClick?: (userId: string) => void;
   onFeedItemClick: (feedItemId: string) => void;
   onInternalLinkClick: (data: InternalLinkData) => void;
+  onExpand?: (isExpanded: boolean) => void;
   type: CommonFeedType;
 }
 
@@ -94,6 +95,7 @@ const OptimisticFeedCard = forwardRef<
     onUserClick,
     onFeedItemClick,
     onInternalLinkClick,
+    onExpand,
   } = props;
 
   const isHome = false;
@@ -234,6 +236,7 @@ const OptimisticFeedCard = forwardRef<
       unreadMessages={feedItemUserMetadata?.count || 0}
       isActive={isActive}
       isExpanded={isExpanded}
+      onExpand={onExpand}
       onClick={handleOpenChat}
       title={cardTitle}
       lastMessage={getLastMessage({ lastMessage: discussion?.lastMessageContent, isProject: false, commonName, commonFeedType: CommonFeedType.Discussion})}

src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx

@@ -71,6 +71,7 @@ interface ProposalFeedCardProps {
   onUserClick?: (userId: string) => void;
   onFeedItemClick: (feedItemId: string) => void;
   onInternalLinkClick: (data: InternalLinkData) => void;
+  onExpand?: (isExpanded: boolean) => void;
 }
 
 const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
@@ -98,6 +99,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
       onUserClick,
       onFeedItemClick,
       onInternalLinkClick,
+      onExpand,
     } = props;
     const user = useSelector(selectUser());
     const userId = user?.uid;
@@ -411,6 +413,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
           lastActivity={item.updatedAt.seconds * 1000}
           isActive={isActive}
           isExpanded={isExpanded}
+          onExpand={onExpand}
           unreadMessages={feedItemUserMetadata?.count || 0}
           title={cardTitle}
           lastMessage={lastMessage}

src/pages/commonFeed/CommonFeed.tsx

@@ -167,9 +167,6 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     if (commonPinnedFeedItems) {
       items.push(...commonPinnedFeedItems.map((item) => item.itemId));
     }
-    if (sharedFeedItemId) {
-      items.push(sharedFeedItemId);
-    }
     return Array.from(new Set(items));
   }, [sharedFeedItemId, pinnedItemIds, commonPinnedFeedItems]);
   const {
@@ -222,9 +219,6 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     if (filteredPinnedItems.length > 0) {
       items.push(...filteredPinnedItems);
     }
-    if (sharedFeedItem) {
-      items.push(sharedFeedItem);
-    }
 
     return items;
   }, [sharedFeedItem, sharedFeedItemId, commonPinnedFeedItems]);
@@ -257,6 +251,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     fetchUserRelatedData();
   };
 
+
   const fetchMoreCommonFeedItems = useCallback(
     (feedItemId?: string) => {
       if (hasMoreCommonFeedItems && !isSearchingFeedItems) {
@@ -716,4 +711,4 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
   );
 };
 
-export default React.memo(CommonFeedComponent);
+export default CommonFeedComponent;