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 ; + } + if (isCodeSnippet) { + return {displayText}; + } + return ; +}; + 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 {part}; + } + + const urlIndex = parseInt(match[1], 10); + const url = urlsWithIndexes[urlIndex]; + + return ( + + ); + }; + return (
{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 ; - } - if (isCodeSnippet) { - return {displayText}; - } - return ; - } - return {part}; - })} + {textParts.map(renderTextPart)}
); };