add unfollowed items removal

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

@@ -12,9 +12,9 @@ import { DeletePrompt, GlobalOverlay, ReportModal } from "@/shared/components";
 import { EntityTypes } from "@/shared/constants";
 import { useModal, useNotification } from "@/shared/hooks";
 import {
+  FeedItemFollowState,
   useCommon,
   useDiscussionById,
-  useFeedItemFollow,
   useFeedItemUserMetadata,
   useUserById,
 } from "@/shared/hooks/useCases";
@@ -63,6 +63,7 @@ interface DiscussionFeedCardProps {
   getNonAllowedItems?: GetNonAllowedItemsOptions;
   onActiveItemDataChange?: (data: FeedLayoutItemChangeData) => void;
   directParent?: DirectParent | null;
+  feedItemFollow: FeedItemFollowState;
   onUserSelect?: (userId: string, commonId?: string) => void;
 }
 
@@ -89,6 +90,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
       getNonAllowedItems,
       onActiveItemDataChange,
       directParent,
+      feedItemFollow,
       onUserSelect,
     } = props;
     const {
@@ -124,10 +126,6 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
       fetchFeedItemUserMetadata,
     } = useFeedItemUserMetadata();
     const { data: common } = useCommon(isHome ? commonId : "");
-    const feedItemFollow = useFeedItemFollow(
-      { feedItemId: item.id, commonId },
-      { withSubscription: true },
-    );
     const menuItems = useMenuItems(
       {
         commonId,

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

@@ -1,4 +1,5 @@
-import React, { forwardRef, memo } from "react";
+import React, { forwardRef, memo, useEffect } from "react";
+import { useFeedItemFollow } from "@/shared/hooks/useCases";
 import { FeedLayoutItemChangeData } from "@/shared/interfaces";
 import {
   Circles,
@@ -64,8 +65,17 @@ const FeedItem = forwardRef<FeedItemRef, FeedItemProps>((props, ref) => {
     onActiveItemDataChange,
     directParent,
   } = props;
-  const { onFeedItemUpdate, getLastMessage, getNonAllowedItems, onUserSelect } =
-    useFeedItemContext();
+  const {
+    onFeedItemUpdate,
+    onFeedItemUnfollowed,
+    getLastMessage,
+    getNonAllowedItems,
+    onUserSelect,
+  } = useFeedItemContext();
+  const feedItemFollow = useFeedItemFollow(
+    { feedItemId: item.id, commonId },
+    { withSubscription: true },
+  );
   useFeedItemSubscription(item.id, commonId, onFeedItemUpdate);
 
   if (
@@ -103,9 +113,22 @@ const FeedItem = forwardRef<FeedItemRef, FeedItemProps>((props, ref) => {
     isMobileVersion,
     onActiveItemDataChange: handleActiveItemDataChange,
     directParent,
+    feedItemFollow,
     onUserSelect,
   };
 
+  useEffect(() => {
+    if (
+      feedItemFollow.isUserFeedItemFollowDataFetched &&
+      !feedItemFollow.userFeedItemFollowData
+    ) {
+      onFeedItemUnfollowed?.(item.id);
+    }
+  }, [
+    feedItemFollow.isUserFeedItemFollowDataFetched,
+    feedItemFollow.userFeedItemFollowData,
+  ]);
+
   if (item.data.type === CommonFeedType.Discussion) {
     return <DiscussionFeedCard {...generalProps} />;
   }

src/pages/common/components/FeedItem/context.ts

@@ -63,6 +63,7 @@ export interface FeedItemContextValue {
   setExpandedFeedItemId?: (feedItemId: string | null) => void;
   renderFeedItemBaseContent?: (props: FeedItemBaseContentProps) => ReactNode;
   onFeedItemUpdate?: (item: CommonFeed, isRemoved: boolean) => void;
+  onFeedItemUnfollowed?: (itemId: string) => void;
   feedCardSettings?: FeedCardSettings;
   getLastMessage: (options: GetLastMessageOptions) => TextEditorValue;
   getNonAllowedItems?: GetNonAllowedItemsOptions;

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

@@ -13,8 +13,8 @@ import { DeletePrompt, GlobalOverlay } from "@/shared/components";
 import { useRoutesContext } from "@/shared/contexts";
 import { useForceUpdate, useModal, useNotification } from "@/shared/hooks";
 import {
+  FeedItemFollowState,
   useDiscussionById,
-  useFeedItemFollow,
   useFeedItemUserMetadata,
   useProposalById,
   useUserById,
@@ -80,6 +80,7 @@ interface ProposalFeedCardProps {
   getLastMessage: (options: GetLastMessageOptions) => TextEditorValue;
   getNonAllowedItems?: GetNonAllowedItemsOptions;
   isMobileVersion?: boolean;
+  feedItemFollow: FeedItemFollowState;
   onActiveItemDataChange?: (data: FeedLayoutItemChangeData) => void;
   onUserSelect?: (userId: string, commonId?: string) => void;
 }
@@ -101,6 +102,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
       getLastMessage,
       getNonAllowedItems,
       isMobileVersion,
+      feedItemFollow,
       onActiveItemDataChange,
       onUserSelect,
     } = props;
@@ -175,10 +177,6 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
       onOpen: onShareModalOpen,
       onClose: onShareModalClose,
     } = useModal(false);
-    const feedItemFollow = useFeedItemFollow(
-      { feedItemId: item.id, commonId },
-      { withSubscription: true },
-    );
     const menuItems = useMenuItems(
       {
         commonId,

src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx

@@ -120,6 +120,7 @@ interface FeedLayoutProps {
   renderFeedItemBaseContent: (props: FeedItemBaseContentProps) => ReactNode;
   renderChatChannelItem?: (props: ChatChannelFeedLayoutItemProps) => ReactNode;
   onFeedItemUpdate?: (item: CommonFeed, isRemoved: boolean) => void;
+  onFeedItemUnfollowed?: (itemId: string) => void;
   getLastMessage: (options: GetLastMessageOptions) => TextEditorValue;
   sharedFeedItemId?: string | null;
   emptyText?: string;
@@ -160,6 +161,7 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
     renderFeedItemBaseContent,
     renderChatChannelItem,
     onFeedItemUpdate,
+    onFeedItemUnfollowed,
     getLastMessage,
     sharedFeedItemId,
     emptyText,
@@ -327,13 +329,15 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
       setExpandedFeedItemId,
       renderFeedItemBaseContent,
       onFeedItemUpdate,
+      onFeedItemUnfollowed,
       getLastMessage,
       getNonAllowedItems,
       onUserSelect: handleUserWithCommonClick,
     }),
     [
       renderFeedItemBaseContent,
       onFeedItemUpdate,
+      onFeedItemUnfollowed,
       getLastMessage,
       getNonAllowedItems,
       handleUserWithCommonClick,

src/pages/inbox/BaseInbox.tsx

@@ -150,6 +150,18 @@ const InboxPage: FC<InboxPageProps> = (props) => {
     [dispatch],
   );
 
+  const handleFeedItemUnfollowed = useCallback(
+    (itemId: string) => {
+      dispatch(
+        inboxActions.updateFeedItem({
+          item: { id: itemId },
+          isRemoved: true,
+        }),
+      );
+    },
+    [dispatch],
+  );
+
   const handleActiveItemChange = useCallback(
     (activeItemId?: string) => {
       dispatch(inboxActions.removeEmptyChatChannelItems(activeItemId));
@@ -267,6 +279,7 @@ const InboxPage: FC<InboxPageProps> = (props) => {
         renderFeedItemBaseContent={renderFeedItemBaseContent}
         renderChatChannelItem={renderChatChannelItem}
         onFeedItemUpdate={handleFeedItemUpdate}
+        onFeedItemUnfollowed={handleFeedItemUnfollowed}
         getLastMessage={getLastMessage}
         emptyText={
           isActiveUnreadInboxItemsQueryParam

src/shared/hooks/useCases/useFeedItemFollow.ts

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { FollowFeedItemAction } from "@/shared/constants";
+import { FeedItemFollow } from "@/shared/models";
 import {
   selectCommonFeedFollows,
   selectFollowFeedItemMutationState,
@@ -15,6 +16,8 @@ export interface FeedItemFollowState {
   isFollowing: boolean;
   isDisabled: boolean;
   onFollowToggle: (action?: FollowFeedItemAction) => void;
+  isUserFeedItemFollowDataFetched: boolean;
+  userFeedItemFollowData: FeedItemFollow | null;
 }
 
 interface Data {
@@ -105,5 +108,7 @@ export function useFeedItemFollow(
     isFollowing,
     isDisabled,
     onFollowToggle,
+    isUserFeedItemFollowDataFetched,
+    userFeedItemFollowData,
   };
 }