fix: code snippet not copying when url is present

tijlleenders · Nov 12, 2024 · 311d1e3 · 311d1e3
1 parent 5b0ed4b
commit 311d1e3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/src/components/GoalsComponents/MyGoal/MyGoal.tsx b/src/components/GoalsComponents/MyGoal/MyGoal.tsx
@@ -55,9 +55,10 @@ const MyGoal: React.FC<MyGoalProps> = ({ goal, dragAttributes, dragListeners })
     e.stopPropagation();
 
     const url = extractLinks(goal.title);
-    if (url) {
+    if (url && !isGoalCode(goal.title)) {
       const finalUrl = url.startsWith("http://") || url.startsWith("https://") ? url : `https://${url}`;
       window.open(finalUrl, "_blank");
+      return;
     }
     if (isGoalCode(goal.title)) {
       copyCode(goal.title);

diff --git a/src/components/GoalsComponents/MyGoal/components/GoalTitle.tsx b/src/components/GoalsComponents/MyGoal/components/GoalTitle.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { removeBackTicks, replaceUrlsWithText } from "@src/utils/patterns";
+import { removeBackTicks, replaceUrlsWithText, isGoalCode, summarizeUrl } from "@src/utils/patterns";
 import { useTranslation } from "react-i18next";
 import { GoalItem } from "@src/models/GoalItem";
+import useGoalActions from "@src/hooks/useGoalActions";
 import { useTelHandler, useUrlHandler } from "../GoalTitleHandlers";
 
 interface GoalTitleProps {
@@ -11,24 +12,36 @@ interface GoalTitleProps {
 
 const GoalTitle = ({ goal, isImpossible }: GoalTitleProps) => {
   const { t } = useTranslation();
+  const { copyCode } = useGoalActions();
   const { id, title } = goal;
+  const isCodeSnippet = isGoalCode(title);
   const { urlsWithIndexes, replacedString } = replaceUrlsWithText(t(title));
   const textParts = replacedString.split(/(zURL-\d+)/g);
 
+  const handleClick = () => {
+    if (isCodeSnippet) {
+      copyCode(title);
+    }
+  };
+
   return (
-    <div className="goal-title">
+    <div aria-hidden className="goal-title" onClick={isCodeSnippet ? handleClick : undefined}>
       {isImpossible && "! "}
       {textParts.map((part) => {
-        part = removeBackTicks(part); // if it contains backticks, strip it
-        const match = part.match(/zURL-(\d+)/);
+        const cleanPart = removeBackTicks(part);
+        const match = cleanPart.match(/zURL-(\d+)/);
         if (match) {
           const urlIndex = parseInt(match[1], 10);
           const url = urlsWithIndexes[urlIndex];
+          const TelHandlerComponent = useTelHandler(url);
+          const UrlHandlerComponent = useUrlHandler(url);
+          const displayText = summarizeUrl(url);
           if (url.startsWith("tel:")) {
-            const TelHandlerComponent = useTelHandler(url);
             return <TelHandlerComponent key={`${id}-tel-${urlIndex}`} />;
           }
-          const UrlHandlerComponent = useUrlHandler(url);
+          if (isCodeSnippet) {
+            return <span key={`${id}-url-${urlIndex}`}>{displayText}</span>;
+          }
           return <UrlHandlerComponent key={`${id}-url-${urlIndex}`} />;
         }
         return <span key={`${id}-text-${part}`}>{part}</span>;