Merge pull request #2385 from daostack/cw-2124-open-internal-link-in-…

…the-app

open internal links in the app #2124

src/shared/components/Chat/ChatMessage/components/ChatMessageLinkify/utils/parseMessageLink.ts

@@ -7,7 +7,7 @@ export interface ParseMessageLinkData {
   params: Record<string, string>;
 }
 
-export const parseMessageLink = (url: string): ParseMessageLinkData | null => {
+export const parseMessageLink = (url?: string): ParseMessageLinkData | null => {
   if (!url) {
     return null;
   }

src/shared/hooks/useInternalLink.ts

@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+import { useHistory } from "react-router-dom";
+import { InternalLinkData } from "../components";
+import { QueryParamKey, ROUTE_PATHS } from "../constants";
+import { useRoutesContext } from "../contexts";
+import { getParamsFromOneOfRoutes } from "../utils";
+
+const useInternalLink = () => {
+  const { getCommonPagePath } = useRoutesContext();
+  const history = useHistory();
+
+  const onInternalLinkClick = useCallback((data: InternalLinkData) => {
+    const feedPageParams = getParamsFromOneOfRoutes<{ id: string }>(
+      data.pathname,
+      [ROUTE_PATHS.COMMON, ROUTE_PATHS.V04_COMMON],
+    );
+
+    if (!feedPageParams) {
+      return;
+    }
+
+    const itemId = data.params[QueryParamKey.Item];
+    const messageId = data.params[QueryParamKey.Message];
+
+    history.push(
+      getCommonPagePath(feedPageParams.id, {
+        item: itemId,
+        message: messageId,
+      }),
+    );
+  }, []);
+
+  return { onInternalLinkClick };
+};
+
+export default useInternalLink;

src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.module.scss

@@ -2,4 +2,6 @@
 
 .link {
   color: var(--primary-fill);
+  cursor: pointer;
+  text-decoration: underline;
 }

src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.tsx

@@ -1,5 +1,7 @@
 import React, { FC } from "react";
 import classNames from "classnames";
+import { parseMessageLink } from "@/shared/components/Chat/ChatMessage/components/ChatMessageLinkify/utils";
+import useInternalLink from "@/shared/hooks/useInternalLink";
 import { LinkElement } from "../../../../types";
 import { ElementAttributes } from "../../types";
 import { InlineChromiumBugfix } from "../InlineChromiumBugfix";
@@ -12,6 +14,22 @@ interface LinkProps {
 
 const Link: FC<LinkProps> = (props) => {
   const { attributes, element, children } = props;
+  const { onInternalLinkClick } = useInternalLink();
+  const internalLink = parseMessageLink(element.url);
+
+  if (internalLink) {
+    return (
+      <a
+        {...attributes}
+        className={classNames(styles.link, attributes.className)}
+        onClick={() => onInternalLinkClick(internalLink)}
+      >
+        <InlineChromiumBugfix />
+        {children}
+        <InlineChromiumBugfix />
+      </a>
+    );
+  }
 
   return (
     <a