CW-some-stream-disappear Optimized FeedItem component. FIxed conditio…

…n in FeedLayout
daostack · Aug 1, 2024 · a6577d8 · a6577d8
1 parent e5cfcff
commit a6577d8
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 41 deletions.
diff --git a/src/pages/common/components/FeedItem/FeedItem.tsx b/src/pages/common/components/FeedItem/FeedItem.tsx
@@ -6,10 +6,7 @@ import React, {
   useMemo,
 } from "react";
 import { useFeedItemFollow } from "@/shared/hooks/useCases";
-import {
-  FeedLayoutItemChangeData,
-  SpaceListVisibility,
-} from "@/shared/interfaces";
+import { FeedLayoutItemChangeData } from "@/shared/interfaces";
 import {
   Circles,
   CirclesPermissions,
@@ -20,7 +17,7 @@ import {
   CommonNotion,
   DirectParent,
 } from "@/shared/models";
-import { checkIsItemVisibleForUser, InternalLinkData } from "@/shared/utils";
+import { checkIsItemVisibleForUser } from "@/shared/utils";
 import { useFeedItemSubscription } from "../../hooks";
 import { DiscussionFeedCard } from "../DiscussionFeedCard";
 import { ProposalFeedCard } from "../ProposalFeedCard";
@@ -113,14 +110,20 @@ const FeedItem = forwardRef<FeedItemRef, FeedItemProps>((props, ref) => {
   const getNonAllowedItems =
     outerGetNonAllowedItems || contextGetNonAllowedItems;
 
-  const handleUserClick = useMemo(
-    () => onUserSelect && ((userId: string) => onUserSelect(userId, commonId)),
+  const handleUserClick = useCallback(
+    (userId: string) => {
+      if (onUserSelect) {
+        onUserSelect(userId, commonId);
+      }
+    },
     [onUserSelect, commonId],
   );
 
   const handleActiveItemDataChange = useCallback(
     (data: FeedLayoutItemChangeData) => {
-      onActiveItemDataChange?.(data, commonId);
+      if (onActiveItemDataChange) {
+        onActiveItemDataChange(data, commonId);
+      }
     },
     [onActiveItemDataChange, commonId],
   );
@@ -130,11 +133,15 @@ const FeedItem = forwardRef<FeedItemRef, FeedItemProps>((props, ref) => {
       feedItemFollow.isUserFeedItemFollowDataFetched &&
       !feedItemFollow.userFeedItemFollowData
     ) {
-      onFeedItemUnfollowed?.(item.id);
+      if (onFeedItemUnfollowed) {
+        onFeedItemUnfollowed(item.id);
+      }
     }
   }, [
     feedItemFollow.isUserFeedItemFollowDataFetched,
     feedItemFollow.userFeedItemFollowData,
+    item.id,
+    onFeedItemUnfollowed,
   ]);
 
   if (
@@ -150,35 +157,66 @@ const FeedItem = forwardRef<FeedItemRef, FeedItemProps>((props, ref) => {
     return null;
   }
 
-  const generalProps = {
-    ref,
-    item,
-    commonId,
-    commonName,
-    commonImage,
-    commonNotion,
-    pinnedFeedItems,
-    isActive,
-    isExpanded,
-    isProject,
-    isPinned,
-    governanceCircles,
-    isPreviewMode,
-    getLastMessage,
-    commonMember,
-    getNonAllowedItems,
-    isMobileVersion,
-    onActiveItemDataChange: handleActiveItemDataChange,
-    directParent,
-    rootCommonId,
-    feedItemFollow,
-    onUserSelect,
-    shouldPreLoadMessages,
-    withoutMenu,
-    onUserClick: handleUserClick,
-    onFeedItemClick,
-    onInternalLinkClick,
-  };
+  const generalProps = useMemo(
+    () => ({
+      ref,
+      item,
+      commonId,
+      commonName,
+      commonImage,
+      commonNotion,
+      pinnedFeedItems,
+      isActive,
+      isExpanded,
+      isProject,
+      isPinned,
+      governanceCircles,
+      isPreviewMode,
+      getLastMessage,
+      commonMember,
+      getNonAllowedItems,
+      isMobileVersion,
+      onActiveItemDataChange: handleActiveItemDataChange,
+      directParent,
+      rootCommonId,
+      feedItemFollow,
+      onUserSelect,
+      shouldPreLoadMessages,
+      withoutMenu,
+      onUserClick: handleUserClick,
+      onFeedItemClick,
+      onInternalLinkClick,
+    }),
+    [
+      ref,
+      item,
+      commonId,
+      commonName,
+      commonImage,
+      commonNotion,
+      pinnedFeedItems,
+      isActive,
+      isExpanded,
+      isProject,
+      isPinned,
+      governanceCircles,
+      isPreviewMode,
+      getLastMessage,
+      commonMember,
+      getNonAllowedItems,
+      isMobileVersion,
+      handleActiveItemDataChange,
+      directParent,
+      rootCommonId,
+      feedItemFollow,
+      onUserSelect,
+      shouldPreLoadMessages,
+      withoutMenu,
+      handleUserClick,
+      onFeedItemClick,
+      onInternalLinkClick,
+    ],
+  );
 
   if (item.data.type === CommonFeedType.Discussion) {
     return <DiscussionFeedCard {...generalProps} />;

diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx
@@ -1,14 +1,14 @@
 import React, {
   CSSProperties,
   forwardRef,
-  ForwardRefRenderFunction,
-  ReactNode,
   useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
   useState,
+  ReactNode,
+  ForwardRefRenderFunction,
 } from "react";
 import { useSelector } from "react-redux";
 import { useHistory } from "react-router-dom";
@@ -221,8 +221,9 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
     fetchedCommonMember;
   const userForProfile = useUserForProfile();
   const governance = chatItem?.nestedItemData
-    ? fetchedGovernance
+    ? fetchedGovernance || outerGovernance
     : outerGovernance || fetchedGovernance;
+
   const [splitPaneRef, setSplitPaneRef] = useState<Element | null>(null);
   const maxContentSize =
     settings?.getSplitViewMaxSize?.(windowWidth) ??