Merge pull request #1360 from dpc-sdp/feature/more-hydration-warnings

[SRM-1608] more hydration warnings
dpc-sdp · Oct 28, 2024 · c231e52 · c231e52
2 parents a4e2836 + 2cfc14c
commit c231e52
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 14 deletions.
diff --git a/packages/ripple-tide-api/src/utils/mapping-utils.test.ts b/packages/ripple-tide-api/src/utils/mapping-utils.test.ts
@@ -10,6 +10,7 @@ import {
   getSiteSection,
   humanizeFilesize,
   getPlainText,
+  getPlainTextFromField,
   getBoolFromString
 } from './mapping-utils.js'
 
@@ -231,6 +232,14 @@ describe('ripple-tide-api/mapping utils', () => {
     )
   })
 
+  it(`returns the plain text value of a field`, () => {
+    expect(
+      getPlainTextFromField(field, 'field_acknowledgement_to_country')
+    ).toEqual(
+      'We acknowledge Aboriginal and Torres Strait Islander people as the First People and traditional owners and custodians of the lands, seas and waters of Australia. We pay our respect to Elders past and present.'
+    )
+  })
+
   it(`returns a boolean value from supplied string`, () => {
     expect(getBoolFromString('yes')).toEqual(true)
     expect(getBoolFromString('no')).toEqual(false)

diff --git a/packages/ripple-tide-api/src/utils/mapping-utils.ts b/packages/ripple-tide-api/src/utils/mapping-utils.ts
@@ -251,6 +251,19 @@ export const getPlainText = (content: string): string => {
   return content?.replace(/(\r\n|\n|\r)/g, '')?.trim()
 }
 
+/**
+ * @description gets the fields value as plain text
+ */
+export const getPlainTextFromField = (
+  field: {},
+  path: string | string[],
+  fallback = ''
+) => {
+  const content = get(field, path, fallback)
+
+  return content ? getPlainText(content) : content
+}
+
 /**
  * @description converts supplied string value i.e. 'yes', 'no' into true or false
  */
@@ -274,5 +287,6 @@ export default {
   getSiteKeyValues,
   getSiteSection,
   getPlainText,
+  getPlainTextFromField,
   getBoolFromString
 }
diff --git a/packages/ripple-tide-api/types.d.ts b/packages/ripple-tide-api/types.d.ts
@@ -344,3 +344,15 @@ export function getLinkFromField(field: any, path: string | string[]): any
 export function humanizeFilesize(fileSize: number): string
 export function getSiteKeyValues(key: string, src: any): any
 export function getSiteSection(sectionId: string, src: any): any
+export function getMediaPath(field: any, path?: string | string[]): string
+export function getDocumentFromField(
+  field: Record<string, any>,
+  path: string
+): TideDocumentField
+export function getPlainText(content: string): string
+export function getPlainTextFromField(
+  field: string,
+  path: string | string[],
+  fallback?: any
+): any
+export function getBoolFromString(text: string): boolean | null
diff --git a/packages/ripple-tide-landing-page/mapping/components/card-carousel/base-mapping.ts b/packages/ripple-tide-landing-page/mapping/components/card-carousel/base-mapping.ts
@@ -1,4 +1,8 @@
-import { getField, getImageFromField } from '@dpc-sdp/ripple-tide-api'
+import {
+  getField,
+  getImageFromField,
+  getPlainTextFromField
+} from '@dpc-sdp/ripple-tide-api'
 import { ITideCardCarouselItem } from './card-carousel-mapping'
 
 export const baseIncludes = [
@@ -13,5 +17,5 @@ export const baseMapping = (field): ITideCardCarouselItem => ({
   meta: {
     topic: getField(field, 'field_topic.name', null)
   },
-  summary: getField(field, 'field_landing_page_summary', '')
+  summary: getPlainTextFromField(field, 'field_landing_page_summary', '')
 })
diff --git a/packages/ripple-tide-landing-page/mapping/components/card-carousel/custom-mapping.ts b/packages/ripple-tide-landing-page/mapping/components/card-carousel/custom-mapping.ts
@@ -1,7 +1,8 @@
 import {
   getField,
   getImageFromField,
-  getLinkFromField
+  getLinkFromField,
+  getPlainTextFromField
 } from '@dpc-sdp/ripple-tide-api'
 
 const getCardImage = (card) => {
@@ -30,7 +31,7 @@ export const mapping = (field) => {
           dateStart: getField(field, 'field_paragraph_date_range.value', null),
           dateEnd: getField(field, 'field_paragraph_date_range.end_value', null)
         },
-        summary: getField(field, 'field_paragraph_summary', '')
+        summary: getPlainTextFromField(field, 'field_paragraph_summary', '')
       }
       break
     case 'paragraph--card_event_auto':
@@ -52,7 +53,7 @@ export const mapping = (field) => {
             null
           )
         },
-        summary: getField(
+        summary: getPlainTextFromField(
           field,
           'field_paragraph_reference.field_landing_page_summary',
           ''
@@ -67,7 +68,7 @@ export const mapping = (field) => {
         keyDates: field.field_paragraph_keydates.map((date) => ({
           title: getField(date, 'field_paragraph_keydate', ''),
           subtitle: getField(date, 'field_paragraph_title', ''),
-          content: getField(date, 'field_paragraph_summary', '')
+          content: getPlainTextFromField(date, 'field_paragraph_summary', '')
         }))
       }
       break
@@ -84,7 +85,7 @@ export const mapping = (field) => {
           topic: getField(field, 'field_paragraph_topic.[0].name', null),
           date: getField(field, 'field_paragraph_date', null)
         },
-        summary: getField(field, 'field_paragraph_summary', '')
+        summary: getPlainTextFromField(field, 'field_paragraph_summary', '')
       }
       break
     case 'paragraph--card_promotion_auto': {
@@ -110,7 +111,7 @@ export const mapping = (field) => {
             ? getField(field, 'field_paragraph_reference.created', null)
             : null
         },
-        summary: getField(
+        summary: getPlainTextFromField(
           field,
           'field_paragraph_reference.field_landing_page_summary',
           ''

diff --git a/packages/ripple-tide-landing-page/mapping/components/card-carousel/test-data.ts b/packages/ripple-tide-landing-page/mapping/components/card-carousel/test-data.ts
@@ -56,7 +56,7 @@ export const rawDataCustom = {
       },
       field_paragraph_location: null,
       field_paragraph_summary:
-        'Adipisicing sint consectetur consequat excepteur exercitation et laboris cillum.',
+        'Adipisicing sint consectetur\r\n consequat excepteur exercitation et laboris cillum.',
       field_paragraph_title: 'Test event',
       field_paragraph_media: {
         links: {
@@ -720,7 +720,7 @@ export const rawDataCustom = {
         },
         field_landing_page_show_contact: true,
         field_landing_page_summary:
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sit amet ligula sit amet lacinia. In a leo nec tortor aliquet faucibus.',
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n Aliquam tincidunt sit amet ligula sit amet lacinia. In a leo nec tortor aliquet faucibus.',
         field_news_intro_text:
           'Nulla ultricies dignissim leo, posuere vestibulum erat cursus vitae',
         field_node_author: 'Nulla ultricies',
@@ -1617,7 +1617,7 @@ export const rawDataCustom = {
           revision_translation_affected: null,
           field_paragraph_keydate: 'June 13th, 2023 and beyond',
           field_paragraph_link: null,
-          field_paragraph_summary: 'Key Dates Card Summary',
+          field_paragraph_summary: 'Key Dates Card Summary\r\n',
           field_paragraph_title: 'Key Dates Card',
           id: '7865b901-e85b-47f0-adbc-1690ece4559c',
           type: 'paragraph--keydates'
@@ -1691,7 +1691,7 @@ export const rawDataCustom = {
         url: '/sdpta-promotion-card-landing-page-fixture',
         origin_url: '/sdpta-promotion-card-landing-page-fixture'
       },
-      field_paragraph_summary: 'Promotion Card summary',
+      field_paragraph_summary: 'Promotion Card summary\r\n',
       field_paragraph_title: 'Promotion Card',
       field_paragraph_media: {
         links: {
@@ -3038,7 +3038,7 @@ export const rawDataNews = [
     field_landing_page_nav_title: null,
     field_landing_page_show_contact: false,
     field_landing_page_summary:
-      'NP1 Etiam scelerisque lorem sit amet sapien iaculis, nec dignissim augue cursus. Mauris eu purus a neque tristique venenatis sit amet sed sem. Aenean viverra lectus ut tempus sollicitudin.',
+      'NP1 Etiam scelerisque lorem sit amet sapien iaculis,\r\n nec dignissim augue cursus. Mauris eu purus a neque tristique venenatis sit amet sed sem. Aenean viverra lectus ut tempus sollicitudin.',
     field_metatags: null,
     field_news_date: '2050-07-02T10:00:00+11:00',
     field_news_intro_text:
@@ -5270,7 +5270,7 @@ export const rawDataEvent = [
     },
     field_landing_page_show_contact: true,
     field_landing_page_summary:
-      'Tell me, O muse, of that ingenious hero who travelled far and wide after he had sacked the famous town of Troy. Many cities did he visit, and many were the nations with whose manners and customs END',
+      'Tell me, O muse\r\n, of that ingenious hero who travelled far and wide after he had sacked the famous town of Troy. Many cities did he visit, and many were the nations with whose manners and customs END',
     field_news_intro_text:
       'Nulla ultricies dignissim leo, posuere vestibulum erat cursus vitae',
     field_node_author: 'Full Name',