display common paths in tooltip

daostack · Dec 19, 2023 · b8a0e13 · b8a0e13
1 parent ce1972e
commit b8a0e13
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 4 deletions.
diff --git a/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.module.scss b/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.module.scss
@@ -10,8 +10,10 @@
 }
 
 .tooltipContent {
-  max-width: 20rem;
+  max-width: 30rem;
   z-index: 3;
+  display: flex;
+  flex-direction: column;
 }
 
 .contentTitle {
@@ -20,3 +22,48 @@
   font-size: 0.75rem;
   color: $c-gray-40;
 }
+
+.loader {
+  margin: 0 auto;
+}
+
+.link {
+  width: 100%;
+  margin-bottom: 0.625rem;
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  text-decoration: none;
+
+  &:hover {
+    color: $c-pink-primary;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.linkLeft,
+.linkRight {
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.linkLeft {
+  display: flex;
+  align-items: center;
+  text-overflow: ellipsis;
+}
+
+.linkRight {
+  flex-shrink: 0;
+}
+
+.ellipsis {
+  flex-shrink: 0;
+}
+
+.arrowIcon {
+  flex-shrink: 0;
+}
diff --git a/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.tsx b/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.tsx
@@ -1,7 +1,21 @@
-import React, { FC, MouseEventHandler, useEffect, useState } from "react";
+import React, {
+  FC,
+  MouseEventHandler,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
+import { NavLink } from "react-router-dom";
 import { ButtonIcon } from "@/shared/components";
-import { Link4Icon } from "@/shared/icons";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui-kit";
+import { useRoutesContext } from "@/shared/contexts";
+import { RightArrowThinIcon, Link4Icon } from "@/shared/icons";
+import { Common } from "@/shared/models";
+import {
+  Loader,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/shared/ui-kit";
 import { useCommonPaths } from "./hooks";
 import styles from "./LinkedItemMark.module.scss";
 
@@ -24,6 +38,7 @@ const LinkedItemMark: FC<LinkedItemMarkProps> = (props) => {
     fetched,
     fetchCommonPaths,
   } = useCommonPaths();
+  const { getCommonPagePath } = useRoutesContext();
 
   const toggleTooltip: MouseEventHandler = (event) => {
     event.stopPropagation();
@@ -42,6 +57,43 @@ const LinkedItemMark: FC<LinkedItemMarkProps> = (props) => {
     fetchCommonPaths(commonIds);
   }, [isOpen]);
 
+  const renderFullPath = (commons: Common[]): ReactElement => {
+    return (
+      <div className={styles.linkLeft}>
+        {commons.map((common, commonIndex) => (
+          <React.Fragment key={common.id}>
+            {common.name}
+            {commonIndex !== commons.length - 1 && (
+              <RightArrowThinIcon className={styles.arrowIcon} />
+            )}
+          </React.Fragment>
+        ))}
+      </div>
+    );
+  };
+
+  const renderCutPath = (commons: Common[]): ReactElement => {
+    const lastCommon = commons[commons.length - 1];
+    const parentCommons = commons.slice(0, -1);
+
+    return (
+      <>
+        <div className={styles.linkLeft}>
+          {parentCommons.map((common, commonIndex) => (
+            <React.Fragment key={common.id}>
+              {common.name}
+              {commonIndex !== commons.length - 1 && (
+                <RightArrowThinIcon className={styles.arrowIcon} />
+              )}
+            </React.Fragment>
+          ))}
+        </div>
+        <div className={styles.ellipsis}>…</div>
+        <div className={styles.linkRight}>{lastCommon?.name}</div>
+      </>
+    );
+  };
+
   return (
     <Tooltip open={isOpen} onOpenChange={setIsOpen} placement="right">
       <TooltipTrigger onClick={toggleTooltip} asChild>
@@ -51,6 +103,23 @@ const LinkedItemMark: FC<LinkedItemMarkProps> = (props) => {
       </TooltipTrigger>
       <TooltipContent className={styles.tooltipContent}>
         <span className={styles.contentTitle}>Also appears in:</span>
+        {loading && <Loader className={styles.loader} />}
+        {!loading &&
+          commonPaths.map((commons, index) => {
+            const lastCommon = commons[commons.length - 1];
+            const key = lastCommon?.id || String(index);
+
+            return (
+              <NavLink
+                key={key}
+                className={styles.link}
+                to={getCommonPagePath(lastCommon?.id || "")}
+                title={lastCommon?.name}
+              >
+                {renderCutPath(commons)}
+              </NavLink>
+            );
+          })}
       </TooltipContent>
     </Tooltip>
   );