refactor: move dup code to getImageSource

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">

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()
+  })
+})

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