From 02afab1a2e5c3e0f3cfd6232e5f1cbb0f97d8999 Mon Sep 17 00:00:00 2001
From: Vidit Kushwaha <viditkushwaha530@gmail.com>
Date: Sun, 2 Feb 2025 05:09:52 +0000
Subject: [PATCH] chore: remove inline condition in related Designs

Signed-off-by: Vidit Kushwaha <viditkushwaha530@gmail.com>
---
 src/custom/CatalogDetail/RelatedDesigns.tsx |  6 ++----
 src/custom/CatalogDetail/helper.ts          | 22 +++++++++++++++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/custom/CatalogDetail/RelatedDesigns.tsx b/src/custom/CatalogDetail/RelatedDesigns.tsx
index a3bc3ba05..00396b508 100644
--- a/src/custom/CatalogDetail/RelatedDesigns.tsx
+++ b/src/custom/CatalogDetail/RelatedDesigns.tsx
@@ -1,6 +1,6 @@
 import { CatalogCardDesignLogo } from '../CustomCatalog';
 import CustomCatalogCard, { Pattern } from '../CustomCatalog/CustomCard';
-import { formatToTitleCase } from './helper';
+import { getHeadingText } from './helper';
 import { AdditionalContainer, ContentHeading, DesignCardContainer } from './style';
 import { UserProfile } from './types';
 
@@ -41,9 +41,7 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
     <AdditionalContainer>
       <ContentHeading>
         <h2 style={{ margin: '0', textTransform: 'uppercase' }}>
-          Other {type.toLowerCase() == 'my-designs' ? 'public' : 'published'} design by{' '}
-          {formatToTitleCase(userProfile?.first_name ?? '')}{' '}
-          {fetchingOrgError ? '' : `under ${organizationName}`}
+          {getHeadingText({ type, userProfile, organizationName, fetchingOrgError })}
         </h2>
       </ContentHeading>
       <DesignCardContainer>
diff --git a/src/custom/CatalogDetail/helper.ts b/src/custom/CatalogDetail/helper.ts
index b43477bf9..272347176 100644
--- a/src/custom/CatalogDetail/helper.ts
+++ b/src/custom/CatalogDetail/helper.ts
@@ -61,3 +61,25 @@ export const formatDate = (date: Date) => {
   const formattedDate = new Date(date).toLocaleDateString('en-US', options);
   return formattedDate;
 };
+
+interface HeadingProps {
+  type: string;
+  userProfile?: {
+    first_name?: string;
+  };
+  organizationName?: string;
+  fetchingOrgError: boolean;
+}
+
+export const getHeadingText = ({
+  type,
+  userProfile,
+  organizationName,
+  fetchingOrgError
+}: HeadingProps): string => {
+  const designType = type.toLowerCase() === 'my-designs' ? 'public' : 'published';
+  const firstName = formatToTitleCase(userProfile?.first_name ?? '');
+  const orgText = fetchingOrgError ? '' : `under ${organizationName}`;
+
+  return `Other ${designType} design by ${firstName} ${orgText}`;
+};