TH-1006: Show super event date in event hero if exists

src/domain/course/CoursePageContainer.tsx

@@ -1,11 +1,14 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 
 import ErrorHero from '../../common/components/error/ErrorHero';
 import LoadingSpinner from '../../common/components/spinner/LoadingSpinner';
-import { useCourseDetailsQuery } from '../../generated/graphql';
+import {
+  useCourseDetailsLazyQuery,
+  useCourseDetailsQuery,
+} from '../../generated/graphql';
 import useLocale from '../../hooks/useLocale';
 import isClient from '../../util/isClient';
 import MainContent from '../app/layout/MainContent';
@@ -31,6 +34,10 @@ const CoursePageContainer: React.FC = () => {
   const params = useParams<RouteParams>();
   const courseId = params.id;
   const locale = useLocale();
+  const [superEventId, setSuperEventId] = useState('');
+  const [superEventData, setSuperEventData] = React.useState<
+    EventFields | null | undefined
+  >(null);
 
   const { data: courseData, loading } = useCourseDetailsQuery({
     variables: {
@@ -39,8 +46,39 @@ const CoursePageContainer: React.FC = () => {
     },
   });
 
+  const [getData, { data: superEvent }] = useCourseDetailsLazyQuery({
+    variables: {
+      id: superEventId,
+      include: ['in_language', 'keywords', 'location', 'audience'],
+    },
+  });
+
   const course = courseData?.courseDetails;
 
+  useEffect(() => {
+    if (course) {
+      const superEventIdData = course.superEvent?.internalId
+        ?.split('/')
+        .filter((e) => e)
+        .pop();
+      if (superEventIdData) {
+        setSuperEventId(superEventIdData);
+      } else {
+        setSuperEventData(undefined);
+      }
+    }
+  }, [course]);
+
+  useEffect(() => {
+    if (superEventId) {
+      getData();
+    }
+  }, [getData, superEventId]);
+
+  useEffect(() => {
+    setSuperEventData(superEvent?.courseDetails || null);
+  }, [superEvent]);
+
   const courseClosed = !course || isEventClosed(course);
 
   return (
@@ -55,7 +93,11 @@ const CoursePageContainer: React.FC = () => {
                 <EventClosedHero />
               ) : (
                 <>
-                  <EventHero event={course} eventType="course" />
+                  <EventHero
+                    event={course}
+                    superEvent={superEventData}
+                    eventType="course"
+                  />
                   <EventContent event={course} eventType="course" />
                 </>
               )}

src/domain/event/eventHero/EventHero.tsx

@@ -22,9 +22,10 @@ import styles from './eventHero.module.scss';
 export interface Props {
   event: EventFields;
   eventType: EventType;
+  superEvent?: EventFields | null | undefined;
 }
 
-const EventHero: React.FC<Props> = ({ event, eventType }) => {
+const EventHero: React.FC<Props> = ({ event, eventType, superEvent }) => {
   const { t } = useTranslation();
   const [showBackupImage, setShowBackupImage] = React.useState(false);
   const locale = useLocale();
@@ -33,13 +34,13 @@ const EventHero: React.FC<Props> = ({ event, eventType }) => {
   const eventsRoute = EVENTS_ROUTE_MAPPER[eventType];
 
   const {
-    endTime,
+    endTime: eventEndTime,
     imageUrl,
     keywords,
     offerInfoUrl,
     placeholderImage,
     shortDescription,
-    startTime,
+    startTime: eventStartTime,
     today,
     thisWeek,
     showBuyButton,
@@ -79,6 +80,9 @@ const EventHero: React.FC<Props> = ({ event, eventType }) => {
     }
   }, [imageUrl]);
 
+  const startTime = superEvent ? superEvent.startTime : eventStartTime;
+  const endTime = superEvent ? superEvent.endTime : eventEndTime;
+
   return (
     <div className={classNames(styles.heroWrapper)}>
       <Container>
@@ -111,7 +115,8 @@ const EventHero: React.FC<Props> = ({ event, eventType }) => {
                 <div className={styles.description}>{shortDescription}</div>
               )}
               <Visible above="sm" className={styles.date}>
-                {!!startTime &&
+                {superEvent !== null &&
+                  !!startTime &&
                   getDateRangeStr({
                     start: startTime,
                     end: endTime,

src/domain/event/eventHero/__tests__/EventHero.test.tsx

@@ -8,6 +8,7 @@ import {
   EventFieldsFragment,
   OfferFieldsFragment,
 } from '../../../../generated/graphql';
+import getDateRangeStr from '../../../../util/getDateRangeStr';
 import {
   fakeEvent,
   fakeExternalLink,
@@ -192,3 +193,42 @@ test('Register button should be visible and clickable', () => {
 
   expect(global.open).toBeCalledWith(registrationUrl);
 });
+
+test('should have event dates when super event is not defined', () => {
+  const mockEvent = getFakeEvent();
+
+  render(<EventHero event={mockEvent} eventType="course" />);
+
+  const dateStr = getDateRangeStr({
+    start: mockEvent.startTime,
+    end: mockEvent.endTime,
+    locale: 'fi',
+    includeTime: true,
+    timeAbbreviation: translations.commons.timeAbbreviation,
+  });
+  expect(screen.getByText(dateStr)).toBeInTheDocument();
+});
+
+test('should have super event dates when super event is defined', () => {
+  const mockEvent = getFakeEvent();
+  const mockSuperEvent = getFakeEvent({
+    startTime: '2020-06-25T07:00:00.000000Z',
+    endTime: '2025-06-22T07:00:00.000000Z',
+  });
+  render(
+    <EventHero
+      event={mockEvent}
+      superEvent={mockSuperEvent}
+      eventType="course"
+    />
+  );
+
+  const superDateStr = getDateRangeStr({
+    start: mockSuperEvent.startTime,
+    end: mockSuperEvent.endTime,
+    locale: 'fi',
+    includeTime: true,
+    timeAbbreviation: translations.commons.timeAbbreviation,
+  });
+  expect(screen.getByText(superDateStr)).toBeInTheDocument();
+});