Add events query/formatter/layout

src/assets/styles/globals.css

@@ -19,3 +19,7 @@ body {
   margin-top: 0;
   padding-top: 1.25rem;
 }
+
+.recurring-event {
+  max-width: 140px;
+}

src/data/queries/event.ts

@@ -0,0 +1,85 @@
+import {
+  QueryData,
+  QueryFormatter,
+  QueryOpts,
+  QueryParams,
+} from 'next-drupal-query'
+import { drupalClient } from '@/lib/drupal/drupalClient'
+import { queries } from '.'
+import { NodeEvent } from '@/types/dataTypes/drupal/node'
+import { Event } from '@/types/dataTypes/formatted/event'
+import { GetServerSidePropsContext } from 'next'
+import { MediaImage } from '@/types/dataTypes/formatted/media'
+
+export const params: QueryParams<null> = () => {
+  return queries
+    .getParams()
+    .addInclude([
+      'field_media',
+      'field_media.image',
+      'field_listing',
+      'field_administration',
+      'field_facility_location',
+    ])
+}
+
+// Define the option types for the data loader.
+export type EventDataOpts = QueryOpts<{
+  id: string
+  context?: GetServerSidePropsContext
+}>
+
+export const data: QueryData<EventDataOpts, NodeEvent> = async (
+  opts
+): Promise<NodeEvent> => {
+  const entity = opts?.context?.preview
+    ? // need to use getResourceFromContext for unpublished revisions
+      await drupalClient.getResourceFromContext<NodeEvent>(
+        'node--event',
+        opts.context,
+        {
+          params: params().getQueryObject(),
+        }
+      )
+    : // otherwise just lookup by uuid
+      await drupalClient.getResource<NodeEvent>('node--event', opts.id, {
+        params: params().getQueryObject(),
+      })
+  return entity
+}
+
+export const formatter: QueryFormatter<NodeEvent, Event> = (
+  entity: NodeEvent
+) => {
+  return {
+    id: entity.id,
+    entityId: entity.drupal_internal__nid,
+    entityPath: entity.path.alias,
+    type: entity.type,
+    published: entity.status,
+    title: entity.title,
+    image: queries.formatData('media--image', {
+      entity: entity.field_media,
+      cropType: '2_1_large',
+    }) as MediaImage,
+    date: entity.created,
+    breadcrumbs: entity.breadcrumbs,
+    socialLinks: {
+      path: entity.path.alias,
+      title: entity.title,
+    },
+    listing: entity.field_listing.path.alias,
+    additionalInfo: entity.field_additional_information_abo,
+    address: entity.field_address,
+    locationHumanReadable: entity.field_location_humanreadable,
+    eventCTA: entity.field_event_cta,
+    cost: entity.field_event_cost,
+    datetimeRange: entity.field_datetime_range_timezone,
+    facilityLocation: entity.field_facility_location,
+    body: entity.field_body,
+    locationType: entity.field_location_type,
+    description: entity.field_description,
+    link: entity.field_link,
+    urlOfOnlineEvent: entity.field_url_of_an_online_event,
+  }
+}

src/data/queries/index.ts

@@ -17,6 +17,7 @@ import * as Wysiwyg from './wysiwyg'
 import * as StaticPathResources from './staticPathResources'
 import * as HeaderFooter from './headerFooter'
 import * as PromoBlock from './promoBlock'
+import * as Event from './event'
 import { RESOURCE_TYPES } from '@/lib/constants/resourceTypes'
 
 export const QUERIES_MAP = {
@@ -25,6 +26,7 @@ export const QUERIES_MAP = {
   'node--news_story--teaser': NewsStoryTeaser,
   'node--story_listing': StoryListing,
   'node--q_a': QuestionAnswer,
+  'node--event': Event,
   'node--person_profile': PersonProfile,
   'node--landing_page': BenefitsHub, // "Benefits Hub Landing Page"
   'paragraph--audience_topics': AudienceTopics,

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

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`node--event formatData outputs formatted data 1`] = `
+{
+  "additionalInfo": null,
+  "additionalListings": [],
+  "address": {
+    "address_line1": "9000 Douglas Ave",
+    "address_line2": "",
+    "administrative_area": "IA",
+    "country_code": "US",
+    "langcode": "en",
+    "locality": "Urbandale",
+  },
+  "administration": {
+    "id": null,
+    "name": null,
+  },
+  "body": {
+    "format": "rich_text",
+    "processed": "<p>Pickleball Club</p>
+
+<p>Meets Thursdays from 9 to 11 a.m. </p>
+
+<p>Contact Kay Queck (515) 214-4578</p>",
+    "value": "<p>Pickleball Club</p>
+
+<p>Meets Thursdays from 9 to 11 a.m.&nbsp;</p>
+
+<p>Contact Kay Queck (515) 214-4578</p>
+",
+  },
+  "breadcrumbs": [
+    {
+      "options": [],
+      "title": "Home",
+      "uri": "https://content-build-medc0xjkxm4jmpzxl3tfbcs7qcddsivh.ci.cms.va.gov/",
+    },
+    {
+      "options": [],
+      "title": "VA Central Iowa health care",
+      "uri": "https://content-build-medc0xjkxm4jmpzxl3tfbcs7qcddsivh.ci.cms.va.gov/central-iowa-health-care",
+    },
+    {
+      "options": [],
+      "title": "Events",
+      "uri": "https://content-build-medc0xjkxm4jmpzxl3tfbcs7qcddsivh.ci.cms.va.gov/central-iowa-health-care/events",
+    },
+    {
+      "options": [],
+      "title": "Pickleball Club",
+      "uri": "https://content-build-medc0xjkxm4jmpzxl3tfbcs7qcddsivh.ci.cms.va.gov/central-iowa-health-care/events/52265",
+    },
+  ],
+  "cost": "Free",
+  "date": "2022-12-30T14:49:05+00:00",
+  "datetimeRange": [
+    {
+      "duration": 120,
+      "end_value": "2023-09-07T16:00:00+00:00",
+      "rrule": 180,
+      "rrule_index": 1,
+      "timezone": "America/Chicago",
+      "value": "2023-09-07T14:00:00+00:00",
+    },
+    {
+      "duration": 120,
+      "end_value": "2023-09-14T16:00:00+00:00",
+      "rrule": 180,
+      "rrule_index": 2,
+      "timezone": "America/Chicago",
+      "value": "2023-09-14T14:00:00+00:00",
+    },
+  ],
+  "description": "Pickleball ",
+  "entityId": 52265,
+  "entityPath": "/central-iowa-health-care/events/52265",
+  "eventCTA": null,
+  "facilityLocation": null,
+  "id": "16349f16-be65-46e3-9660-1d3d598a4a0b",
+  "image": null,
+  "includeRegistrationInfo": false,
+  "isFeatured": false,
+  "link": null,
+  "listing": "/central-iowa-health-care/events/52265",
+  "locationHumanReadable": "Walker Johnston Park",
+  "locationType": "non_facility",
+  "media": null,
+  "order": null,
+  "publishToOutreachCal": null,
+  "published": true,
+  "registrationRequired": false,
+  "socialLinks": {
+    "path": "/central-iowa-health-care/events/52265",
+    "title": "Pickleball Club",
+  },
+  "title": "Pickleball Club",
+  "type": "node--event",
+  "urlOfOnlineEvent": null,
+}
+`;

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

@@ -0,0 +1,23 @@
+import { NodeEvent } from '@/types/dataTypes/drupal/node'
+import { queries } from '@/data/queries'
+import mockData from '@/mocks/event.mock.json'
+
+const nodeEventMock: NodeEvent = mockData
+
+describe('node--event formatData', () => {
+  let windowSpy
+
+  beforeEach(() => {
+    windowSpy = jest.spyOn(window, 'window', 'get')
+  })
+
+  afterEach(() => {
+    windowSpy.mockRestore()
+  })
+
+  test('outputs formatted data', () => {
+    windowSpy.mockImplementation(() => undefined)
+    const formattedData = queries.formatData('node--event', nodeEventMock)
+    expect(formattedData).toMatchSnapshot()
+  })
+})

src/lib/constants/pageSizes.ts

@@ -5,5 +5,6 @@ import {
 
 export const PAGE_SIZES = {
   [RESOURCE_TYPES.STORY_LISTING]: 10,
+  [RESOURCE_TYPES.EVENT]: 10,
   [ADDITIONAL_RESOURCE_TYPES.STATIC_PATHS]: 50, //must be <= 50 due to JSON:API limit
 } as const

src/lib/constants/resourceTypes.ts

@@ -1,6 +1,7 @@
 export const RESOURCE_TYPES = {
   STORY_LISTING: 'node--story_listing',
   STORY: 'node--news_story',
+  EVENT: 'node--event',
   // QA: 'node--q_a',
 } as const
 

src/lib/drupal/staticProps.ts

@@ -132,7 +132,6 @@ export async function getStaticPropsResource(
       context
     )
   }
-
   // All others
   return getDefaultStaticPropsResource(resourceType, pathInfo, context)
 }