From e4c03e739e697372fea96d4fe1228f2c1aa48a71 Mon Sep 17 00:00:00 2001
From: Diogo Soares <diogo.lsoares@gmail.com>
Date: Tue, 19 Dec 2023 11:06:32 +0100
Subject: [PATCH] refactor: move dup code to getImageSource

---
 src/components/common/Masthead/index.tsx | 13 ++++----
 src/lib/__test__/getImageSource.test.ts  | 38 ++++++++++++++++++++++++
 src/lib/getImageSource.ts                | 15 ++++++++++
 3 files changed, 58 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/__test__/getImageSource.test.ts
 create mode 100644 src/lib/getImageSource.ts

diff --git a/src/components/common/Masthead/index.tsx b/src/components/common/Masthead/index.tsx
index 27fae6b76..96826fd0f 100644
--- a/src/components/common/Masthead/index.tsx
+++ b/src/components/common/Masthead/index.tsx
@@ -6,6 +6,7 @@ import layoutCss from '@/components/common/styles.module.css'
 import css from './styles.module.css'
 import type { BaseBlock } from '@/components/Home/types'
 import ButtonsWrapper from '@/components/common/ButtonsWrapper'
+import { getImageSource, type ImageObj } from '@/lib/getImageSource'
 
 type FooterProps = {
   text: string
@@ -42,18 +43,14 @@ export const Masthead = ({
   footer,
   backgroundImage,
 }: BaseBlock & {
-  image: {
-    sm: string
-    md: string
-    alt: string
-  }
-  backgroundImage: { sm: string; md: string }
+  image: ImageObj
+  backgroundImage: ImageObj
   footer: FooterProps
 }): ReactElement => {
   const isSmallScreen = useMediaQuery('(max-width:900px)')
 
-  const bgImage = backgroundImage ? (isSmallScreen ? backgroundImage.sm : backgroundImage.md) : undefined
-  const imageSrc = image ? (isSmallScreen ? image.sm : image.md) : undefined
+  const bgImage = getImageSource(isSmallScreen, backgroundImage)
+  const imageSrc = getImageSource(isSmallScreen, image)
 
   return (
     <Container className={layoutCss.containerShort} id="masthead">
diff --git a/src/lib/__test__/getImageSource.test.ts b/src/lib/__test__/getImageSource.test.ts
new file mode 100644
index 000000000..b5981585e
--- /dev/null
+++ b/src/lib/__test__/getImageSource.test.ts
@@ -0,0 +1,38 @@
+import { type ImageObj, getImageSource } from '@/lib/getImageSource'
+
+describe('getImageSource', () => {
+  it('should return small image URL when image object exists and isSmall is true', () => {
+    const imageObj: ImageObj = {
+      sm: 'small-image.jpg',
+      md: 'medium-image.jpg',
+      alt: 'Small Image',
+    }
+    const isSmall = true
+
+    const result = getImageSource(isSmall, imageObj)
+
+    expect(result).toBe('small-image.jpg')
+  })
+
+  it('should return medium image URL when image object exists and isSmall is false', () => {
+    const imageObj: ImageObj = {
+      sm: 'small-image.jpg',
+      md: 'medium-image.jpg',
+      alt: 'Medium Image',
+    }
+    const isSmall = false
+
+    const result = getImageSource(isSmall, imageObj)
+
+    expect(result).toBe('medium-image.jpg')
+  })
+
+  it('should return undefined when image object does not exist', () => {
+    const imageObj = undefined
+    const isSmall = true
+
+    const result = getImageSource(isSmall, imageObj)
+
+    expect(result).toBeUndefined()
+  })
+})
diff --git a/src/lib/getImageSource.ts b/src/lib/getImageSource.ts
new file mode 100644
index 000000000..9c5bd7501
--- /dev/null
+++ b/src/lib/getImageSource.ts
@@ -0,0 +1,15 @@
+export type ImageObj = {
+  sm: string
+  md: string
+  alt?: string
+}
+
+/**
+ * Get the source URL for an image based on its size and screen condition.
+ * @param {ImageObj} imageObj - The object containing URLs for different image sizes.
+ * @param {boolean} isSmall - A flag indicating whether the small image shall be used.
+ * @returns {string|undefined} - The source URL for the image, or undefined.
+ */
+export function getImageSource(isSmall: boolean, imageObj?: ImageObj) {
+  return imageObj ? (isSmall ? imageObj.sm : imageObj.md) : undefined
+}