From fc8105006c14f06e18f2a5372061426b4096214d Mon Sep 17 00:00:00 2001
From: Vinay Badgujar <vinaybadgujar8@gmail.com>
Date: Tue, 12 Nov 2024 13:55:05 +0530
Subject: [PATCH] refactor: goal title component for easier maintainability

---
 .../MyGoal/components/GoalTitle.tsx           | 67 +++++++++++++------
 1 file changed, 48 insertions(+), 19 deletions(-)

diff --git a/src/components/GoalsComponents/MyGoal/components/GoalTitle.tsx b/src/components/GoalsComponents/MyGoal/components/GoalTitle.tsx
index 644625cb7..2a028e14e 100644
--- a/src/components/GoalsComponents/MyGoal/components/GoalTitle.tsx
+++ b/src/components/GoalsComponents/MyGoal/components/GoalTitle.tsx
@@ -10,10 +10,35 @@ interface GoalTitleProps {
   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);
@@ -24,28 +49,32 @@ const GoalTitle = ({ goal, isImpossible }: GoalTitleProps) => {
     }
   };
 
+  const renderTextPart = (part: string) => {
+    const cleanPart = removeBackTicks(part);
+    const match = cleanPart.match(/zURL-(\d+)/);
+
+    if (!match) {
+      return <span key={`${id}-text-${part}`}>{part}</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 aria-hidden className="goal-title" onClick={isCodeSnippet ? handleClick : undefined}>
       {isImpossible && "! "}
-      {textParts.map((part) => {
-        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:")) {
-            return <TelHandlerComponent key={`${id}-tel-${urlIndex}`} />;
-          }
-          if (isCodeSnippet) {
-            return <span key={`${id}-url-${urlIndex}`}>{displayText}</span>;
-          }
-          return <UrlHandlerComponent key={`${id}-url-${urlIndex}`} />;
-        }
-        return <span key={`${id}-text-${part}`}>{part}</span>;
-      })}
+      {textParts.map(renderTextPart)}
     </div>
   );
 };