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)}
);
};