VACMS-16499: Proper handling of image styles (#312)

next.config.js

@@ -3,8 +3,9 @@
  */
 const nextConfig = {
   images: {
-    loaderFile: './src/templates/common/image/customLoader.js',
+    loaderFile: './src/templates/common/mediaImage/customLoader.js',
     loader: 'custom',
+    unoptimized: true,
   },
   reactStrictMode: true,
   swcMinify: true,

src/data/queries/event.ts

@@ -49,10 +49,7 @@ export const formatter: QueryFormatter<NodeEvent, Event> = (
 ) => {
   return {
     ...entityBaseFields(entity),
-    image: queries.formatData('media--image', {
-      entity: entity.field_media,
-      cropType: '2_1_large',
-    }) as MediaImage,
+    image: queries.formatData('media--image', entity.field_media), //cropType: '2_1_large'
     date: entity.created,
     socialLinks: {
       path: entity.path.alias,

src/data/queries/mediaImage.ts

@@ -9,11 +9,6 @@ import { DrupalMediaImage } from '@/types/drupal/media'
 import { drupalClient } from '@/lib/drupal/drupalClient'
 import { MediaImage } from '@/types/formatted/media'
 
-type DrupalMediaImageData = {
-  entity: DrupalMediaImage
-  cropType?: string
-}
-
 // Define query params for queryData.
 export const params: QueryParams<null> = () => {
   return queries.getParams().addInclude(['image'])
@@ -25,9 +20,9 @@ type DataOpts = QueryOpts<{
 }>
 
 // Implement the data loader.
-export const data: QueryData<DataOpts, DrupalMediaImageData> = async (
+export const data: QueryData<DataOpts, DrupalMediaImage> = async (
   opts
-): Promise<DrupalMediaImageData> => {
+): Promise<DrupalMediaImage> => {
   const entity = await drupalClient.getResource<DrupalMediaImage>(
     'media--image',
     opts.id,
@@ -36,25 +31,20 @@ export const data: QueryData<DataOpts, DrupalMediaImageData> = async (
     }
   )
 
-  return { entity, cropType: opts.cropType || '2_1_large' }
+  return entity
 }
 
-export const formatter: QueryFormatter<DrupalMediaImageData, MediaImage> = ({
-  entity,
-  cropType = '2_1_large',
-}) => {
+export const formatter: QueryFormatter<DrupalMediaImage, MediaImage> = (
+  entity: DrupalMediaImage
+) => {
   if (!entity) return null
-  // TODO: may need more handling here around crop type + image height / width. TBD.
-  // TODO: `link` has reference to all image styles whereas `url` narrows down based on
-  //  cropType. Which do we want at this layer?
   return {
     id: entity.image.id,
     type: entity.type,
-    link: entity.image?.links,
+    links: entity.image?.links,
     alt: entity.image?.resourceIdObjMeta?.alt,
     width: entity.image?.resourceIdObjMeta?.width,
     height: entity.image?.resourceIdObjMeta?.height,
     title: entity.image?.resourceIdObjMeta?.title,
-    url: entity.image.links[cropType].href,
   }
 }

src/data/queries/newsStory.ts

@@ -45,10 +45,7 @@ export const formatter: QueryFormatter<NodeNewsStory, NewsStory> = (
 ) => {
   return {
     ...entityBaseFields(entity),
-    image: queries.formatData('media--image', {
-      entity: entity.field_media,
-      cropType: '2_1_large',
-    }),
+    image: queries.formatData('media--image', entity.field_media),
     caption: entity.field_image_caption,
     author: entity.field_author,
     introText: entity.field_intro_text,

src/data/queries/newsStoryTeaser.ts

@@ -19,10 +19,7 @@ export const formatter: QueryFormatter<NodeNewsStory, NewsStoryTeaser> = (
     published: entity.status,
     headingLevel: 'h2', //@todo fix headingLevel,
     title: entity.title,
-    image: queries.formatData('media--image', {
-      entity: entity.field_media,
-      cropType: '2_1_large',
-    }),
+    image: queries.formatData('media--image', entity.field_media), //cropType: '2_1_large'
     link: entity.path.alias,
     introText: entity.field_intro_text,
     lastUpdated: entity.field_last_saved_by_an_editor || entity.created,

src/data/queries/personProfile.ts

@@ -53,7 +53,7 @@ export const formatter: QueryFormatter<NodePersonProfile, PersonProfile[]> = (
     description: entity.field_description,
     introText: entity.field_intro_text,
     body: entity.field_body?.processed || null,
-    media: queries.formatData('media--image', { entity: entity.field_media }),
+    media: queries.formatData('media--image', entity.field_media), //no imageStyle passed
     completeBiography: entity.field_complete_biography,
     completeBiographyCreate: entity.field_complete_biography_create,
     photoAllowHiresDownload: entity.field_photo_allow_hires_download,

src/data/queries/tests/__snapshots__/mediaImage.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Media image returns formatted data outputs formatted data 1`] = `
   "alt": null,
   "height": 304,
   "id": "e638fd17-9090-442b-a724-5113133b4d0f",
-  "link": {
+  "links": {
     "1_1_square_medium_thumbnail": {
       "href": "http://content-build-medc0xjkxm4jmpzxl3tfbcs7qcddsivh.ci.cms.va.gov/sites/default/files/styles/1_1_square_medium_thumbnail/public/hub_promos/health-care.png",
       "meta": {
@@ -147,7 +147,6 @@ exports[`Media image returns formatted data outputs formatted data 1`] = `
   },
   "title": null,
   "type": "media--image",
-  "url": "http://content-build-medc0xjkxm4jmpzxl3tfbcs7qcddsivh.ci.cms.va.gov/sites/default/files/styles/2_1_large/public/hub_promos/health-care.png",
   "width": 456,
 }
 `;

src/data/queries/tests/__snapshots__/newsStory.test.tsx.snap

@@ -217,7 +217,7 @@ exports[`node--news_story formatData outputs formatted data 1`] = `
     "alt": null,
     "height": 304,
     "id": "c85b7882-f035-4b55-8b71-fcf81fade350",
-    "link": {
+    "links": {
       "1_1_square_medium_thumbnail": {
         "href": "http://content-build-medc0xjkxm4jmpzxl3tfbcs7qcddsivh.ci.cms.va.gov/sites/default/files/styles/1_1_square_medium_thumbnail/public/hub_promos/health-care.png",
         "meta": {
@@ -359,7 +359,6 @@ exports[`node--news_story formatData outputs formatted data 1`] = `
     },
     "title": null,
     "type": "media--image",
-    "url": "http://content-build-medc0xjkxm4jmpzxl3tfbcs7qcddsivh.ci.cms.va.gov/sites/default/files/styles/2_1_large/public/hub_promos/health-care.png",
     "width": 456,
   },
   "introText": "When a hospital has a host of great doctors, honoring just two every year is challenging. ",

src/data/queries/tests/__snapshots__/personProfile.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`Person profile returns formatted data outputs formatted data 1`] = `
       "alt": "Patrick J. Doyle",
       "height": 129,
       "id": "5bcbdaee-f93f-4b2f-8af5-963e4a547d93",
-      "link": {
+      "links": {
         "1_1_square_medium_thumbnail": {
           "href": "http://content-build-medc0xjkxm4jmpzxl3tfbcs7qcddsivh.ci.cms.va.gov/sites/default/files/styles/1_1_square_medium_thumbnail/public/2019-08/pat_doyle_0.jpg?h=46bc4a38",
           "meta": {
@@ -160,7 +160,6 @@ exports[`Person profile returns formatted data outputs formatted data 1`] = `
       },
       "title": "",
       "type": "media--image",
-      "url": "http://content-build-medc0xjkxm4jmpzxl3tfbcs7qcddsivh.ci.cms.va.gov/sites/default/files/styles/2_1_large/public/2019-08/pat_doyle_0.jpg",
       "width": 100,
     },
     "office": {

src/data/queries/tests/mediaImage.test.tsx

@@ -19,8 +19,6 @@ describe('Media image returns formatted data', () => {
   test('outputs formatted data', () => {
     windowSpy.mockImplementation(() => undefined)
     const formattedData = mediaImageMock
-    expect(
-      queries.formatData('media--image', { entity: formattedData })
-    ).toMatchSnapshot()
+    expect(queries.formatData('media--image', formattedData)).toMatchSnapshot()
   })
 })

src/lib/drupal/lovell/tests/mockData.ts

@@ -54,10 +54,9 @@ export const newsStoryPartialResource = {
     alt: 'alt-text',
     id: 'id',
     title: 'title',
-    url: 'image/src',
     width: 100,
     height: 100,
-    link: {
+    links: {
       '2_1_large': {
         href: 'image/src',
         meta: {