add logic to fetch common paths

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

@@ -168,13 +168,6 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
       !isFeedItemUserMetadataFetched ||
       !commonId;
     const cardTitle = discussion?.title;
-    const linkedCommonIds = discussion?.linkedCommonIds || [];
-    const isLinked = Boolean(
-      commonId &&
-        linkedCommonIds.length > 0 &&
-        (linkedCommonIds.includes(commonId) ||
-          discussion?.commonId === commonId),
-    );
 
     const handleOpenChat = useCallback(() => {
       if (discussion) {
@@ -359,7 +352,8 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
             isFeedItemUserMetadataFetched &&
             feedItemUserMetadata?.hasUnseenMention
           }
-          isLinked={isLinked}
+          originalCommonIdForLinking={discussion?.commonId}
+          linkedCommonIds={discussion?.linkedCommonIds}
         >
           {renderContent()}
         </FeedCard>

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

@@ -48,7 +48,8 @@ type FeedCardProps = PropsWithChildren<{
   hasImages?: boolean;
   hasUnseenMention?: boolean;
   notion?: CommonNotion;
-  isLinked?: boolean;
+  originalCommonIdForLinking?: string;
+  linkedCommonIds?: string[];
 }>;
 
 const MOBILE_HEADER_HEIGHT = 52;
@@ -90,7 +91,8 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
     hasImages,
     hasFiles,
     notion,
-    isLinked,
+    originalCommonIdForLinking,
+    linkedCommonIds,
   } = props;
   const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const isTabletView = useIsTabletView();
@@ -215,7 +217,8 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
             hasImages,
             hasUnseenMention,
             notion,
-            isLinked,
+            originalCommonIdForLinking,
+            linkedCommonIds,
           })}
         </div>
       )}

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

@@ -20,6 +20,7 @@ import styles from "./FeedItemBaseContent.module.scss";
 export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
   const {
     className,
+    commonId,
     titleWrapperClassName,
     lastActivity,
     unreadMessages,
@@ -42,12 +43,20 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
     shouldHideBottomContent = false,
     hasUnseenMention,
     notion,
-    isLinked,
+    originalCommonIdForLinking,
+    linkedCommonIds,
   } = props;
   const contextMenuRef = useRef<ContextMenuRef>(null);
   const [isLongPressing, setIsLongPressing] = useState(false);
   const [isLongPressed, setIsLongPressed] = useState(false);
   const isContextMenuEnabled = Boolean(menuItems && menuItems.length > 0);
+  const isLinked = Boolean(
+    commonId &&
+      linkedCommonIds &&
+      linkedCommonIds.length > 0 &&
+      (linkedCommonIds.includes(commonId) ||
+        originalCommonIdForLinking === commonId),
+  );
 
   // Here we get either MouseEven, or TouchEven, but I was struggling with importing them from react
   // and use here to have correct types.
@@ -137,7 +146,13 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
                 </TooltipContent>
               </Tooltip>
             )}
-            {isLinked && <LinkedItemMark />}
+            {isLinked && (
+              <LinkedItemMark
+                currentCommonId={commonId}
+                originalCommonId={originalCommonIdForLinking}
+                linkedCommonIds={linkedCommonIds}
+              />
+            )}
           </div>
           <p
             className={classNames(styles.text, styles.lastActivity, {

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

@@ -1,22 +1,47 @@
-import React, { FC, MouseEventHandler, useState } from "react";
+import React, { FC, MouseEventHandler, useEffect, useState } from "react";
 import { ButtonIcon } from "@/shared/components";
 import { Link4Icon } from "@/shared/icons";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui-kit";
+import { useCommonPaths } from "./hooks";
 import styles from "./LinkedItemMark.module.scss";
 
 interface LinkedItemMarkProps {
-  a?: boolean;
+  currentCommonId?: string;
+  originalCommonId?: string;
+  linkedCommonIds?: string[];
 }
 
 const LinkedItemMark: FC<LinkedItemMarkProps> = (props) => {
-  const { a } = props;
+  const {
+    currentCommonId,
+    originalCommonId = "",
+    linkedCommonIds = [],
+  } = props;
   const [isOpen, setIsOpen] = useState(false);
+  const {
+    data: commonPaths,
+    loading,
+    fetched,
+    fetchCommonPaths,
+  } = useCommonPaths();
 
   const toggleTooltip: MouseEventHandler = (event) => {
     event.stopPropagation();
     setIsOpen((v) => !v);
   };
 
+  useEffect(() => {
+    if (!isOpen || loading || fetched) {
+      return;
+    }
+
+    const commonIds = linkedCommonIds
+      .concat(originalCommonId)
+      .filter((commonId) => commonId && commonId !== currentCommonId);
+
+    fetchCommonPaths(commonIds);
+  }, [isOpen]);
+
   return (
     <Tooltip open={isOpen} onOpenChange={setIsOpen} placement="right">
       <TooltipTrigger onClick={toggleTooltip} asChild>

src/pages/common/components/FeedCard/components/LinkedItemMark/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useCommonPaths";

src/pages/common/components/FeedCard/components/LinkedItemMark/hooks/useCommonPaths.ts

@@ -0,0 +1,49 @@
+import { CommonService } from "@/services";
+import { useIsMounted, useLoadingState } from "@/shared/hooks";
+import { LoadingState } from "@/shared/interfaces";
+import { Common } from "@/shared/models";
+
+type Data = Common[][];
+
+interface Return extends LoadingState<Data> {
+  fetchCommonPaths: (commonIdsForPaths: string[]) => void;
+}
+
+export const useCommonPaths = (): Return => {
+  const isMounted = useIsMounted();
+  const [state, setState] = useLoadingState<Data>([]);
+
+  const fetchCommonPaths = async (commonIdsForPaths: string[]) => {
+    setState({
+      loading: true,
+      fetched: false,
+      data: [],
+    });
+
+    let commons: Data = [];
+
+    try {
+      commons = await Promise.all(
+        commonIdsForPaths.map((commonId) =>
+          CommonService.getCommonAndParents(commonId),
+        ),
+      );
+      commons = commons.filter((path) => path.length > 0);
+    } catch (err) {
+      commons = [];
+    } finally {
+      if (isMounted()) {
+        setState({
+          loading: false,
+          fetched: true,
+          data: commons,
+        });
+      }
+    }
+  };
+
+  return {
+    ...state,
+    fetchCommonPaths,
+  };
+};

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

@@ -47,7 +47,8 @@ export interface FeedItemBaseContentProps {
   dmUserId?: string;
   hasUnseenMention?: boolean;
   notion?: CommonNotion;
-  isLinked?: boolean;
+  originalCommonIdForLinking?: string;
+  linkedCommonIds?: string[];
 }
 
 export interface GetLastMessageOptions {

src/services/Common.ts

@@ -323,6 +323,24 @@ class CommonService {
     return finalCommons;
   };
 
+  public getCommonAndParents = async (
+    commonId: string,
+    cached = false,
+  ): Promise<Common[]> => {
+    const common = await this.getCommonById(commonId, cached);
+
+    if (!common) {
+      return [];
+    }
+
+    const parentCommons = await this.getAllParentCommonsForCommon(
+      common,
+      cached,
+    );
+
+    return [...parentCommons, common];
+  };
+
   public getParentCommonForCommonId = async (
     commonId: string,
   ): Promise<Common | null> => {