chore: remove inline condition in related Designs

Signed-off-by: Vidit Kushwaha <[email protected]>

Author: Vidit-Kushwaha

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>

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}`;
+};