Merge pull request #2080 from tijlleenders/vin/2055/code-snippet-not-…

…copying-when-url-is-present code snippet not copying when url is present
tijlleenders · Nov 12, 2024 · 35991a6 · 35991a6
2 parents 6b74222 + c1d77ae
commit 35991a6
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 22 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,38 +1,81 @@
 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 {
   goal: GoalItem;
   isImpossible: boolean;
 }
 
+const UrlComponent = ({
+  url,
+  goalId,
+  urlIndex,
+  isCodeSnippet,
+}: {
+  url: string;
+  goalId: string;
+  urlIndex: number;
+  isCodeSnippet: boolean;
+}) => {
+  const TelHandlerComponent = useTelHandler(url);
+  const UrlHandlerComponent = useUrlHandler(url);
+  const displayText = summarizeUrl(url);
+
+  if (url.startsWith("tel:")) {
+    return <TelHandlerComponent key={`${goalId}-tel-${urlIndex}`} />;
+  }
+  if (isCodeSnippet) {
+    return <span key={`${goalId}-url-${urlIndex}`}>{displayText}</span>;
+  }
+  return <UrlHandlerComponent key={`${goalId}-url-${urlIndex}`} />;
+};
+
 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);
+    }
+  };
+
+  const renderTextPart = (part: string) => {
+    const cleanPart = removeBackTicks(part);
+    console.log(cleanPart);
+    const match = cleanPart.match(/zURL-(\d+)/);
+
+    if (!match) {
+      return <span key={`${id}-text-${part}`}>{cleanPart}</span>;
+    }
+
+    const urlIndex = parseInt(match[1], 10);
+    const url = urlsWithIndexes[urlIndex];
+
+    return (
+      <UrlComponent
+        key={`${id}-url-${urlIndex}`}
+        url={url}
+        goalId={id}
+        urlIndex={urlIndex}
+        isCodeSnippet={isCodeSnippet}
+      />
+    );
+  };
+
   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+)/);
-        if (match) {
-          const urlIndex = parseInt(match[1], 10);
-          const url = urlsWithIndexes[urlIndex];
-          if (url.startsWith("tel:")) {
-            const TelHandlerComponent = useTelHandler(url);
-            return <TelHandlerComponent key={`${id}-tel-${urlIndex}`} />;
-          }
-          const UrlHandlerComponent = useUrlHandler(url);
-          return <UrlHandlerComponent key={`${id}-url-${urlIndex}`} />;
-        }
-        return <span key={`${id}-text-${part}`}>{part}</span>;
-      })}
+      {textParts.map(renderTextPart)}
     </div>
   );
 };

diff --git a/src/pages/GoalsPage/GoalsPage.scss b/src/pages/GoalsPage/GoalsPage.scss
@@ -172,21 +172,32 @@
   0%,
   100% {
     background-color: rgba(255, 215, 0, 0.2);
-    box-shadow: 0 0 2px rgba(255, 215, 0, 0.7), 0 0 5px rgba(255, 215, 0, 0.7), 0 0 2px rgba(255, 215, 0, 0.7);
+    box-shadow:
+      0 0 2px rgba(255, 215, 0, 0.7),
+      0 0 5px rgba(255, 215, 0, 0.7),
+      0 0 2px rgba(255, 215, 0, 0.7);
   }
   15%,
   85% {
     background-color: rgba(255, 215, 0, 0.4);
-    box-shadow: 0 0 2px rgba(255, 215, 0, 0.9), 0 0 5px rgba(255, 215, 0, 0.9), 0 0 2px rgba(255, 215, 0, 0.9);
+    box-shadow:
+      0 0 2px rgba(255, 215, 0, 0.9),
+      0 0 5px rgba(255, 215, 0, 0.9),
+      0 0 2px rgba(255, 215, 0, 0.9);
   }
   30%,
   70% {
     background-color: rgba(255, 215, 0, 0.6);
-    box-shadow: 0 0 2px rgba(255, 215, 0, 0.7), 0 0 5px rgba(255, 215, 0, 0.7), 0 0 2px rgba(255, 215, 0, 0.7);
+    box-shadow:
+      0 0 2px rgba(255, 215, 0, 0.7),
+      0 0 5px rgba(255, 215, 0, 0.7),
+      0 0 2px rgba(255, 215, 0, 0.7);
   }
   50% {
     background-color: rgba(255, 215, 0, 0.8);
-    box-shadow: 0 0 2px rgba(255, 215, 0, 0.7), 0 0 5px rgba(255, 215, 0);
+    box-shadow:
+      0 0 2px rgba(255, 215, 0, 0.7),
+      0 0 5px rgba(255, 215, 0);
   }
 }