From 9aa24f62f6f5780745a02560cccdc8a7067ad61c Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Tue, 16 Feb 2021 13:20:19 +0200
Subject: [PATCH 01/19] TH-1006: Show super event date in event hero if exists

---
 src/domain/course/CoursePageContainer.tsx | 36 +++++++++++++++++++++--
 src/domain/event/EventPageContainer.tsx   | 36 +++++++++++++++++++++--
 src/domain/event/eventHero/EventHero.tsx  | 13 +++++---
 3 files changed, 75 insertions(+), 10 deletions(-)

diff --git a/src/domain/course/CoursePageContainer.tsx b/src/domain/course/CoursePageContainer.tsx
index 781c72d2d..7eb704241 100644
--- a/src/domain/course/CoursePageContainer.tsx
+++ b/src/domain/course/CoursePageContainer.tsx
@@ -1,11 +1,15 @@
-import React from 'react';
+import { last } from 'lodash';
+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 +35,7 @@ const CoursePageContainer: React.FC = () => {
   const params = useParams<RouteParams>();
   const courseId = params.id;
   const locale = useLocale();
+  const [superEventId, setSuperEventId] = useState('');
 
   const { data: courseData, loading } = useCourseDetailsQuery({
     variables: {
@@ -39,8 +44,29 @@ 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) {
+      setSuperEventId(
+        last(course.superEvent?.internalId?.split('/').filter((e) => e)) || ''
+      );
+    }
+  }, [course]);
+
+  useEffect(() => {
+    if (superEventId) {
+      getData();
+    }
+  }, [getData, superEventId]);
+
   const courseClosed = !course || isEventClosed(course);
 
   return (
@@ -55,7 +81,11 @@ const CoursePageContainer: React.FC = () => {
                 <EventClosedHero />
               ) : (
                 <>
-                  <EventHero event={course} eventType="course" />
+                  <EventHero
+                    event={course}
+                    superEvent={superEvent?.courseDetails}
+                    eventType="course"
+                  />
                   <EventContent event={course} eventType="course" />
                 </>
               )}
diff --git a/src/domain/event/EventPageContainer.tsx b/src/domain/event/EventPageContainer.tsx
index 02e702a11..661ccd0a8 100644
--- a/src/domain/event/EventPageContainer.tsx
+++ b/src/domain/event/EventPageContainer.tsx
@@ -1,11 +1,15 @@
-import React from 'react';
+import { last } from 'lodash';
+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 { useEventDetailsQuery } from '../../generated/graphql';
+import {
+  useEventDetailsLazyQuery,
+  useEventDetailsQuery,
+} from '../../generated/graphql';
 import useLocale from '../../hooks/useLocale';
 import { getFeatureFlags } from '../../util/featureFlags';
 import isClient from '../../util/isClient';
@@ -32,6 +36,7 @@ const EventPageContainer: React.FC = () => {
   const params = useParams<RouteParams>();
   const eventId = params.id;
   const locale = useLocale();
+  const [superEventId, setSuperEventId] = useState('');
 
   const { data: eventData, loading } = useEventDetailsQuery({
     variables: {
@@ -40,8 +45,29 @@ const EventPageContainer: React.FC = () => {
     },
   });
 
+  const [getData, { data: superEvent }] = useEventDetailsLazyQuery({
+    variables: {
+      id: superEventId,
+      include: ['in_language', 'keywords', 'location', 'audience'],
+    },
+  });
+
   const event = eventData?.eventDetails;
 
+  useEffect(() => {
+    if (event) {
+      setSuperEventId(
+        last(event.superEvent?.internalId?.split('/').filter((e) => e)) || ''
+      );
+    }
+  }, [event]);
+
+  useEffect(() => {
+    if (superEventId) {
+      getData();
+    }
+  }, [getData, superEventId]);
+
   const eventClosed = !event || isEventClosed(event);
   return (
     <PageWrapper className={styles.eventPageWrapper} title="event.title">
@@ -55,7 +81,11 @@ const EventPageContainer: React.FC = () => {
                 <EventClosedHero />
               ) : (
                 <>
-                  <EventHero event={event} eventType="event" />
+                  <EventHero
+                    event={event}
+                    superEvent={superEvent?.eventDetails}
+                    eventType="event"
+                  />
                   <EventContent event={event} eventType="event" />
                 </>
               )}
diff --git a/src/domain/event/eventHero/EventHero.tsx b/src/domain/event/eventHero/EventHero.tsx
index 5eff58fc3..cdafb8bff 100644
--- a/src/domain/event/eventHero/EventHero.tsx
+++ b/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();
@@ -79,6 +80,9 @@ const EventHero: React.FC<Props> = ({ event, eventType }) => {
     }
   }, [imageUrl]);
 
+  const superEventStartTime = superEvent ? superEvent.startTime : startTime;
+  const superEventEndTime = superEvent ? superEvent.endTime : endTime;
+
   return (
     <div className={classNames(styles.heroWrapper)}>
       <Container>
@@ -111,10 +115,11 @@ const EventHero: React.FC<Props> = ({ event, eventType }) => {
                 <div className={styles.description}>{shortDescription}</div>
               )}
               <Visible above="sm" className={styles.date}>
-                {!!startTime &&
+                {superEvent !== undefined &&
+                  !!superEventStartTime &&
                   getDateRangeStr({
-                    start: startTime,
-                    end: endTime,
+                    start: superEventStartTime,
+                    end: superEventEndTime,
                     locale,
                     includeTime: true,
                     timeAbbreviation: t('commons.timeAbbreviation'),

From 8ba4a7f066b73b27100a1d607ea149a4fdd2a0f7 Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Tue, 16 Feb 2021 15:33:54 +0200
Subject: [PATCH 02/19] Fixes based on commmnets

---
 src/domain/course/CoursePageContainer.tsx | 15 +++++++++++----
 src/domain/event/EventPageContainer.tsx   |  9 +++++++--
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/domain/course/CoursePageContainer.tsx b/src/domain/course/CoursePageContainer.tsx
index 7eb704241..3997f6913 100644
--- a/src/domain/course/CoursePageContainer.tsx
+++ b/src/domain/course/CoursePageContainer.tsx
@@ -1,4 +1,3 @@
-import { last } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useParams } from 'react-router';
@@ -44,7 +43,10 @@ const CoursePageContainer: React.FC = () => {
     },
   });
 
-  const [getData, { data: superEvent }] = useCourseDetailsLazyQuery({
+  const [
+    getData,
+    { data: superEvent, loading: superEventLoading },
+  ] = useCourseDetailsLazyQuery({
     variables: {
       id: superEventId,
       include: ['in_language', 'keywords', 'location', 'audience'],
@@ -56,7 +58,10 @@ const CoursePageContainer: React.FC = () => {
   useEffect(() => {
     if (course) {
       setSuperEventId(
-        last(course.superEvent?.internalId?.split('/').filter((e) => e)) || ''
+        course.superEvent?.internalId
+          ?.split('/')
+          .filter((e) => e)
+          .pop() || ''
       );
     }
   }, [course]);
@@ -83,7 +88,9 @@ const CoursePageContainer: React.FC = () => {
                 <>
                   <EventHero
                     event={course}
-                    superEvent={superEvent?.courseDetails}
+                    superEvent={
+                      superEventLoading ? superEvent?.courseDetails : null
+                    }
                     eventType="course"
                   />
                   <EventContent event={course} eventType="course" />
diff --git a/src/domain/event/EventPageContainer.tsx b/src/domain/event/EventPageContainer.tsx
index 661ccd0a8..d30c10fe6 100644
--- a/src/domain/event/EventPageContainer.tsx
+++ b/src/domain/event/EventPageContainer.tsx
@@ -45,7 +45,10 @@ const EventPageContainer: React.FC = () => {
     },
   });
 
-  const [getData, { data: superEvent }] = useEventDetailsLazyQuery({
+  const [
+    getData,
+    { data: superEvent, loading: superEventLoading },
+  ] = useEventDetailsLazyQuery({
     variables: {
       id: superEventId,
       include: ['in_language', 'keywords', 'location', 'audience'],
@@ -83,7 +86,9 @@ const EventPageContainer: React.FC = () => {
                 <>
                   <EventHero
                     event={event}
-                    superEvent={superEvent?.eventDetails}
+                    superEvent={
+                      superEventLoading ? superEvent?.eventDetails : null
+                    }
                     eventType="event"
                   />
                   <EventContent event={event} eventType="event" />

From 032a935d17dbae4519ad8d2417d73c07cad6b418 Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Tue, 16 Feb 2021 15:39:00 +0200
Subject: [PATCH 03/19] Fixes based on commmnets

---
 src/domain/event/eventHero/__tests__/EventHero.test.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/domain/event/eventHero/__tests__/EventHero.test.tsx b/src/domain/event/eventHero/__tests__/EventHero.test.tsx
index b03da57b0..3a6fb6cef 100644
--- a/src/domain/event/eventHero/__tests__/EventHero.test.tsx
+++ b/src/domain/event/eventHero/__tests__/EventHero.test.tsx
@@ -56,7 +56,12 @@ afterAll(() => {
 
 const renderComponent = (props?: Partial<EventHeroProps>) => {
   return render(
-    <EventHero event={getFakeEvent()} eventType="event" {...props} />
+    <EventHero
+      event={getFakeEvent()}
+      superEvent={getFakeEvent()}
+      eventType="event"
+      {...props}
+    />
   );
 };
 

From ab7b51ea5e8681fe2eed46562b7b700ea3dd548a Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Tue, 16 Feb 2021 15:41:09 +0200
Subject: [PATCH 04/19] Fixes tests

---
 .../event/eventHero/__tests__/EventHero.test.tsx     | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/domain/event/eventHero/__tests__/EventHero.test.tsx b/src/domain/event/eventHero/__tests__/EventHero.test.tsx
index 3a6fb6cef..578151edb 100644
--- a/src/domain/event/eventHero/__tests__/EventHero.test.tsx
+++ b/src/domain/event/eventHero/__tests__/EventHero.test.tsx
@@ -132,7 +132,9 @@ test('should hide buy button for free events', () => {
   const mockEvent = getFakeEvent({
     offers: [fakeOffer({ isFree: true }) as OfferFieldsFragment],
   });
-  render(<EventHero event={mockEvent} eventType="event" />);
+  render(
+    <EventHero event={mockEvent} superEvent={mockEvent} eventType="event" />
+  );
 
   expect(
     screen.queryByRole('button', {
@@ -154,7 +156,9 @@ test('should show buy button', () => {
     externalLinks: null,
   });
 
-  render(<EventHero event={mockEvent} eventType="event" />);
+  render(
+    <EventHero event={mockEvent} superEvent={mockEvent} eventType="event" />
+  );
 
   // shouldn't be rendred when externalLinks are not present
   expect(
@@ -183,7 +187,9 @@ test('Register button should be visible and clickable', () => {
     ],
   });
 
-  render(<EventHero event={mockEvent} eventType="course" />);
+  render(
+    <EventHero event={mockEvent} superEvent={mockEvent} eventType="course" />
+  );
 
   expect(
     screen.queryByText(translations.event.hero.buttonEnrol)

From fd61208a98d616244b9a7e54a4c9dc90515039c4 Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Tue, 16 Feb 2021 17:20:28 +0200
Subject: [PATCH 05/19] Fixes, super event only for courses and optional

---
 src/domain/course/CoursePageContainer.tsx     | 31 ++++++++------
 src/domain/event/EventPageContainer.tsx       | 41 ++-----------------
 src/domain/event/eventHero/EventHero.tsx      |  4 +-
 .../eventHero/__tests__/EventHero.test.tsx    | 19 ++-------
 4 files changed, 27 insertions(+), 68 deletions(-)

diff --git a/src/domain/course/CoursePageContainer.tsx b/src/domain/course/CoursePageContainer.tsx
index 3997f6913..687694031 100644
--- a/src/domain/course/CoursePageContainer.tsx
+++ b/src/domain/course/CoursePageContainer.tsx
@@ -35,6 +35,9 @@ const CoursePageContainer: React.FC = () => {
   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: {
@@ -43,10 +46,7 @@ const CoursePageContainer: React.FC = () => {
     },
   });
 
-  const [
-    getData,
-    { data: superEvent, loading: superEventLoading },
-  ] = useCourseDetailsLazyQuery({
+  const [getData, { data: superEvent }] = useCourseDetailsLazyQuery({
     variables: {
       id: superEventId,
       include: ['in_language', 'keywords', 'location', 'audience'],
@@ -57,12 +57,15 @@ const CoursePageContainer: React.FC = () => {
 
   useEffect(() => {
     if (course) {
-      setSuperEventId(
-        course.superEvent?.internalId
-          ?.split('/')
-          .filter((e) => e)
-          .pop() || ''
-      );
+      const superEventIdData = course.superEvent?.internalId
+        ?.split('/')
+        .filter((e) => e)
+        .pop();
+      if (superEventIdData) {
+        setSuperEventId(superEventIdData);
+      } else {
+        setSuperEventData(undefined);
+      }
     }
   }, [course]);
 
@@ -72,6 +75,10 @@ const CoursePageContainer: React.FC = () => {
     }
   }, [getData, superEventId]);
 
+  useEffect(() => {
+    setSuperEventData(superEvent?.courseDetails || null);
+  }, [superEvent]);
+
   const courseClosed = !course || isEventClosed(course);
 
   return (
@@ -88,9 +95,7 @@ const CoursePageContainer: React.FC = () => {
                 <>
                   <EventHero
                     event={course}
-                    superEvent={
-                      superEventLoading ? superEvent?.courseDetails : null
-                    }
+                    superEvent={superEventData}
                     eventType="course"
                   />
                   <EventContent event={course} eventType="course" />
diff --git a/src/domain/event/EventPageContainer.tsx b/src/domain/event/EventPageContainer.tsx
index d30c10fe6..02e702a11 100644
--- a/src/domain/event/EventPageContainer.tsx
+++ b/src/domain/event/EventPageContainer.tsx
@@ -1,15 +1,11 @@
-import { last } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React 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 {
-  useEventDetailsLazyQuery,
-  useEventDetailsQuery,
-} from '../../generated/graphql';
+import { useEventDetailsQuery } from '../../generated/graphql';
 import useLocale from '../../hooks/useLocale';
 import { getFeatureFlags } from '../../util/featureFlags';
 import isClient from '../../util/isClient';
@@ -36,7 +32,6 @@ const EventPageContainer: React.FC = () => {
   const params = useParams<RouteParams>();
   const eventId = params.id;
   const locale = useLocale();
-  const [superEventId, setSuperEventId] = useState('');
 
   const { data: eventData, loading } = useEventDetailsQuery({
     variables: {
@@ -45,32 +40,8 @@ const EventPageContainer: React.FC = () => {
     },
   });
 
-  const [
-    getData,
-    { data: superEvent, loading: superEventLoading },
-  ] = useEventDetailsLazyQuery({
-    variables: {
-      id: superEventId,
-      include: ['in_language', 'keywords', 'location', 'audience'],
-    },
-  });
-
   const event = eventData?.eventDetails;
 
-  useEffect(() => {
-    if (event) {
-      setSuperEventId(
-        last(event.superEvent?.internalId?.split('/').filter((e) => e)) || ''
-      );
-    }
-  }, [event]);
-
-  useEffect(() => {
-    if (superEventId) {
-      getData();
-    }
-  }, [getData, superEventId]);
-
   const eventClosed = !event || isEventClosed(event);
   return (
     <PageWrapper className={styles.eventPageWrapper} title="event.title">
@@ -84,13 +55,7 @@ const EventPageContainer: React.FC = () => {
                 <EventClosedHero />
               ) : (
                 <>
-                  <EventHero
-                    event={event}
-                    superEvent={
-                      superEventLoading ? superEvent?.eventDetails : null
-                    }
-                    eventType="event"
-                  />
+                  <EventHero event={event} eventType="event" />
                   <EventContent event={event} eventType="event" />
                 </>
               )}
diff --git a/src/domain/event/eventHero/EventHero.tsx b/src/domain/event/eventHero/EventHero.tsx
index cdafb8bff..b7972a905 100644
--- a/src/domain/event/eventHero/EventHero.tsx
+++ b/src/domain/event/eventHero/EventHero.tsx
@@ -22,7 +22,7 @@ import styles from './eventHero.module.scss';
 export interface Props {
   event: EventFields;
   eventType: EventType;
-  superEvent: EventFields | null | undefined;
+  superEvent?: EventFields | null | undefined;
 }
 
 const EventHero: React.FC<Props> = ({ event, eventType, superEvent }) => {
@@ -115,7 +115,7 @@ const EventHero: React.FC<Props> = ({ event, eventType, superEvent }) => {
                 <div className={styles.description}>{shortDescription}</div>
               )}
               <Visible above="sm" className={styles.date}>
-                {superEvent !== undefined &&
+                {superEvent !== null &&
                   !!superEventStartTime &&
                   getDateRangeStr({
                     start: superEventStartTime,
diff --git a/src/domain/event/eventHero/__tests__/EventHero.test.tsx b/src/domain/event/eventHero/__tests__/EventHero.test.tsx
index 578151edb..b03da57b0 100644
--- a/src/domain/event/eventHero/__tests__/EventHero.test.tsx
+++ b/src/domain/event/eventHero/__tests__/EventHero.test.tsx
@@ -56,12 +56,7 @@ afterAll(() => {
 
 const renderComponent = (props?: Partial<EventHeroProps>) => {
   return render(
-    <EventHero
-      event={getFakeEvent()}
-      superEvent={getFakeEvent()}
-      eventType="event"
-      {...props}
-    />
+    <EventHero event={getFakeEvent()} eventType="event" {...props} />
   );
 };
 
@@ -132,9 +127,7 @@ test('should hide buy button for free events', () => {
   const mockEvent = getFakeEvent({
     offers: [fakeOffer({ isFree: true }) as OfferFieldsFragment],
   });
-  render(
-    <EventHero event={mockEvent} superEvent={mockEvent} eventType="event" />
-  );
+  render(<EventHero event={mockEvent} eventType="event" />);
 
   expect(
     screen.queryByRole('button', {
@@ -156,9 +149,7 @@ test('should show buy button', () => {
     externalLinks: null,
   });
 
-  render(
-    <EventHero event={mockEvent} superEvent={mockEvent} eventType="event" />
-  );
+  render(<EventHero event={mockEvent} eventType="event" />);
 
   // shouldn't be rendred when externalLinks are not present
   expect(
@@ -187,9 +178,7 @@ test('Register button should be visible and clickable', () => {
     ],
   });
 
-  render(
-    <EventHero event={mockEvent} superEvent={mockEvent} eventType="course" />
-  );
+  render(<EventHero event={mockEvent} eventType="course" />);
 
   expect(
     screen.queryByText(translations.event.hero.buttonEnrol)

From ac7cb8d8c4f8e6667e56e140feaa262536dafbbd Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Wed, 17 Feb 2021 09:12:03 +0200
Subject: [PATCH 06/19] Fixes based on comments

---
 src/domain/event/eventHero/EventHero.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/domain/event/eventHero/EventHero.tsx b/src/domain/event/eventHero/EventHero.tsx
index b7972a905..cbf683821 100644
--- a/src/domain/event/eventHero/EventHero.tsx
+++ b/src/domain/event/eventHero/EventHero.tsx
@@ -34,13 +34,13 @@ const EventHero: React.FC<Props> = ({ event, eventType, superEvent }) => {
   const eventsRoute = EVENTS_ROUTE_MAPPER[eventType];
 
   const {
-    endTime,
+    endTime: eventEndTime,
     imageUrl,
     keywords,
     offerInfoUrl,
     placeholderImage,
     shortDescription,
-    startTime,
+    startTime: eventStartTime,
     today,
     thisWeek,
     showBuyButton,
@@ -80,8 +80,8 @@ const EventHero: React.FC<Props> = ({ event, eventType, superEvent }) => {
     }
   }, [imageUrl]);
 
-  const superEventStartTime = superEvent ? superEvent.startTime : startTime;
-  const superEventEndTime = superEvent ? superEvent.endTime : endTime;
+  const startTime = superEvent ? superEvent.startTime : eventStartTime;
+  const endTime = superEvent ? superEvent.endTime : eventEndTime;
 
   return (
     <div className={classNames(styles.heroWrapper)}>
@@ -116,10 +116,10 @@ const EventHero: React.FC<Props> = ({ event, eventType, superEvent }) => {
               )}
               <Visible above="sm" className={styles.date}>
                 {superEvent !== null &&
-                  !!superEventStartTime &&
+                  !!startTime &&
                   getDateRangeStr({
-                    start: superEventStartTime,
-                    end: superEventEndTime,
+                    start: startTime,
+                    end: endTime,
                     locale,
                     includeTime: true,
                     timeAbbreviation: t('commons.timeAbbreviation'),

From cb3c984cb77d0a20fbf4122b640630e60c42c2fb Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Wed, 17 Feb 2021 09:32:34 +0200
Subject: [PATCH 07/19] Fixes tests

---
 .../eventHero/__tests__/EventHero.test.tsx    | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/src/domain/event/eventHero/__tests__/EventHero.test.tsx b/src/domain/event/eventHero/__tests__/EventHero.test.tsx
index b03da57b0..2225892b3 100644
--- a/src/domain/event/eventHero/__tests__/EventHero.test.tsx
+++ b/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();
+});

From 4e9547d46bd88e2ad7ca87396635654b7589de68 Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Wed, 17 Feb 2021 10:41:01 +0200
Subject: [PATCH 08/19] Fixes

---
 src/domain/course/CoursePageContainer.tsx | 38 ++++++++++-------------
 1 file changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/domain/course/CoursePageContainer.tsx b/src/domain/course/CoursePageContainer.tsx
index 687694031..fcbd35d5f 100644
--- a/src/domain/course/CoursePageContainer.tsx
+++ b/src/domain/course/CoursePageContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
@@ -18,7 +18,7 @@ import EventClosedHero from '../event/eventClosedHero/EventClosedHero';
 import EventContent from '../event/eventContent/EventContent';
 import EventHero from '../event/eventHero/EventHero';
 import EventPageMeta from '../event/eventPageMeta/EventPageMeta';
-import { isEventClosed } from '../event/EventUtils';
+import { getEventIdFromUrl, isEventClosed } from '../event/EventUtils';
 import { useSimilarCoursesQuery } from '../event/queryUtils';
 import SimilarEvents from '../event/similarEvents/SimilarEvents';
 import { EventFields } from '../event/types';
@@ -34,7 +34,6 @@ 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);
@@ -46,34 +45,29 @@ const CoursePageContainer: React.FC = () => {
     },
   });
 
-  const [getData, { data: superEvent }] = useCourseDetailsLazyQuery({
-    variables: {
-      id: superEventId,
-      include: ['in_language', 'keywords', 'location', 'audience'],
-    },
-  });
+  const [getSuperEventData, { data: superEvent }] = useCourseDetailsLazyQuery();
 
   const course = courseData?.courseDetails;
 
+  const superEventId =
+    getEventIdFromUrl(
+      courseData?.courseDetails?.superEvent?.internalId || ''
+    ) || '';
+
   useEffect(() => {
     if (course) {
-      const superEventIdData = course.superEvent?.internalId
-        ?.split('/')
-        .filter((e) => e)
-        .pop();
-      if (superEventIdData) {
-        setSuperEventId(superEventIdData);
+      if (superEventId) {
+        getSuperEventData({
+          variables: {
+            id: superEventId,
+            include: ['in_language', 'keywords', 'location', 'audience'],
+          },
+        });
       } else {
         setSuperEventData(undefined);
       }
     }
-  }, [course]);
-
-  useEffect(() => {
-    if (superEventId) {
-      getData();
-    }
-  }, [getData, superEventId]);
+  }, [course, getSuperEventData, superEventId]);
 
   useEffect(() => {
     setSuperEventData(superEvent?.courseDetails || null);

From 9dee0c47db7b393c09cb85c214623e31dda25ecf Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Wed, 17 Feb 2021 13:12:32 +0200
Subject: [PATCH 09/19] Fixes

---
 src/domain/course/CoursePageContainer.tsx     | 45 +++++++++----------
 src/domain/event/eventHero/EventHero.tsx      | 22 ++++++---
 .../eventHero/__tests__/EventHero.test.tsx    |  2 +-
 src/domain/event/types.ts                     |  5 +++
 4 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/src/domain/course/CoursePageContainer.tsx b/src/domain/course/CoursePageContainer.tsx
index fcbd35d5f..280727c47 100644
--- a/src/domain/course/CoursePageContainer.tsx
+++ b/src/domain/course/CoursePageContainer.tsx
@@ -6,11 +6,12 @@ import { Link } from 'react-router-dom';
 import ErrorHero from '../../common/components/error/ErrorHero';
 import LoadingSpinner from '../../common/components/spinner/LoadingSpinner';
 import {
-  useCourseDetailsLazyQuery,
+  CourseDetailsDocument,
   useCourseDetailsQuery,
 } from '../../generated/graphql';
 import useLocale from '../../hooks/useLocale';
 import isClient from '../../util/isClient';
+import apolloClient from '../app/apollo/apolloClient';
 import MainContent from '../app/layout/MainContent';
 import PageWrapper from '../app/layout/PageWrapper';
 import { ROUTES } from '../app/routes/constants';
@@ -21,7 +22,7 @@ import EventPageMeta from '../event/eventPageMeta/EventPageMeta';
 import { getEventIdFromUrl, isEventClosed } from '../event/EventUtils';
 import { useSimilarCoursesQuery } from '../event/queryUtils';
 import SimilarEvents from '../event/similarEvents/SimilarEvents';
-import { EventFields } from '../event/types';
+import { EventFields, SuperEventResponse } from '../event/types';
 import styles from './coursePage.module.scss';
 
 interface RouteParams {
@@ -34,9 +35,10 @@ const CoursePageContainer: React.FC = () => {
   const params = useParams<RouteParams>();
   const courseId = params.id;
   const locale = useLocale();
-  const [superEventData, setSuperEventData] = React.useState<
-    EventFields | null | undefined
-  >(null);
+  const [superEvent, setSuperEvent] = React.useState<SuperEventResponse>({
+    data: null,
+    status: 'pending',
+  });
 
   const { data: courseData, loading } = useCourseDetailsQuery({
     variables: {
@@ -45,33 +47,30 @@ const CoursePageContainer: React.FC = () => {
     },
   });
 
-  const [getSuperEventData, { data: superEvent }] = useCourseDetailsLazyQuery();
-
   const course = courseData?.courseDetails;
 
-  const superEventId =
-    getEventIdFromUrl(
-      courseData?.courseDetails?.superEvent?.internalId || ''
-    ) || '';
-
+  const superEventId = getEventIdFromUrl(course?.superEvent?.internalId ?? '');
   useEffect(() => {
-    if (course) {
-      if (superEventId) {
-        getSuperEventData({
+    if (superEventId) {
+      getSuperEventData();
+    } else if (course && !superEventId) {
+      setSuperEvent({ data: null, status: 'resolved' });
+    }
+    async function getSuperEventData() {
+      try {
+        const { data } = await apolloClient.query({
+          query: CourseDetailsDocument,
           variables: {
             id: superEventId,
             include: ['in_language', 'keywords', 'location', 'audience'],
           },
         });
-      } else {
-        setSuperEventData(undefined);
+        setSuperEvent({ data: data.courseDetails, status: 'resolved' });
+      } catch (e) {
+        setSuperEvent({ data: null, status: 'resolved' });
       }
     }
-  }, [course, getSuperEventData, superEventId]);
-
-  useEffect(() => {
-    setSuperEventData(superEvent?.courseDetails || null);
-  }, [superEvent]);
+  }, [course, superEventId]);
 
   const courseClosed = !course || isEventClosed(course);
 
@@ -89,7 +88,7 @@ const CoursePageContainer: React.FC = () => {
                 <>
                   <EventHero
                     event={course}
-                    superEvent={superEventData}
+                    superEvent={superEvent}
                     eventType="course"
                   />
                   <EventContent event={course} eventType="course" />
diff --git a/src/domain/event/eventHero/EventHero.tsx b/src/domain/event/eventHero/EventHero.tsx
index cbf683821..02507ac93 100644
--- a/src/domain/event/eventHero/EventHero.tsx
+++ b/src/domain/event/eventHero/EventHero.tsx
@@ -16,13 +16,18 @@ import EventKeywords from '../eventKeywords/EventKeywords';
 import LocationText from '../eventLocation/EventLocationText';
 import EventName from '../eventName/EventName';
 import { getEventFields, getEventPrice } from '../EventUtils';
-import { EventFields, EVENTS_ROUTE_MAPPER, EventType } from '../types';
+import {
+  EventFields,
+  EVENTS_ROUTE_MAPPER,
+  EventType,
+  SuperEventResponse,
+} from '../types';
 import styles from './eventHero.module.scss';
 
 export interface Props {
   event: EventFields;
   eventType: EventType;
-  superEvent?: EventFields | null | undefined;
+  superEvent?: SuperEventResponse;
 }
 
 const EventHero: React.FC<Props> = ({ event, eventType, superEvent }) => {
@@ -80,8 +85,14 @@ const EventHero: React.FC<Props> = ({ event, eventType, superEvent }) => {
     }
   }, [imageUrl]);
 
-  const startTime = superEvent ? superEvent.startTime : eventStartTime;
-  const endTime = superEvent ? superEvent.endTime : eventEndTime;
+  const startTime =
+    superEvent?.status === 'pending'
+      ? ''
+      : superEvent?.data?.startTime || eventStartTime;
+  const endTime =
+    superEvent?.status === 'pending'
+      ? ''
+      : superEvent?.data?.endTime || eventEndTime;
 
   return (
     <div className={classNames(styles.heroWrapper)}>
@@ -115,8 +126,7 @@ const EventHero: React.FC<Props> = ({ event, eventType, superEvent }) => {
                 <div className={styles.description}>{shortDescription}</div>
               )}
               <Visible above="sm" className={styles.date}>
-                {superEvent !== null &&
-                  !!startTime &&
+                {!!startTime &&
                   getDateRangeStr({
                     start: startTime,
                     end: endTime,
diff --git a/src/domain/event/eventHero/__tests__/EventHero.test.tsx b/src/domain/event/eventHero/__tests__/EventHero.test.tsx
index 2225892b3..b997191c2 100644
--- a/src/domain/event/eventHero/__tests__/EventHero.test.tsx
+++ b/src/domain/event/eventHero/__tests__/EventHero.test.tsx
@@ -218,7 +218,7 @@ test('should have super event dates when super event is defined', () => {
   render(
     <EventHero
       event={mockEvent}
-      superEvent={mockSuperEvent}
+      superEvent={{ data: mockSuperEvent, status: 'resolved' }}
       eventType="course"
     />
   );
diff --git a/src/domain/event/types.ts b/src/domain/event/types.ts
index a5b578477..dd6127c23 100644
--- a/src/domain/event/types.ts
+++ b/src/domain/event/types.ts
@@ -11,6 +11,11 @@ export type KeywordOption = {
 
 export type EventFields = EventFieldsFragment | CourseFieldsFragment;
 
+export type SuperEventResponse = {
+  data: EventFields | null;
+  status: 'pending' | 'resolved';
+};
+
 export type EventType = 'event' | 'course';
 
 export const EVENT_ROUTE_MAPPER: Record<EventType, string> = {

From 17ab2c39c4e4e2a848afb0da75da99c74e437ee1 Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Wed, 17 Feb 2021 13:46:39 +0200
Subject: [PATCH 10/19] Add spinner

---
 package.json                             |  1 +
 src/domain/event/eventHero/EventHero.tsx | 13 +++++++++++++
 yarn.lock                                |  5 +++++
 3 files changed, 19 insertions(+)

diff --git a/package.json b/package.json
index 45878d8fd..0c61895a2 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "react": "^16.13.1",
     "react-apollo": "^3.1.3",
     "react-apollo-hooks": "^0.5.0",
+    "react-content-loader": "^6.0.1",
     "react-datepicker": "^2.9.6",
     "react-dom": "^16.13.1",
     "react-gtm-module": "^2.0.11",
diff --git a/src/domain/event/eventHero/EventHero.tsx b/src/domain/event/eventHero/EventHero.tsx
index 02507ac93..c4a1da9a2 100644
--- a/src/domain/event/eventHero/EventHero.tsx
+++ b/src/domain/event/eventHero/EventHero.tsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { Button, IconArrowLeft, IconLocation, IconTicket } from 'hds-react';
 import React from 'react';
+import ContentLoader from 'react-content-loader';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router-dom';
 
@@ -126,6 +127,18 @@ const EventHero: React.FC<Props> = ({ event, eventType, superEvent }) => {
                 <div className={styles.description}>{shortDescription}</div>
               )}
               <Visible above="sm" className={styles.date}>
+                {superEvent?.status === 'pending' && (
+                  <ContentLoader
+                    speed={2}
+                    width={'100%'}
+                    height={18}
+                    viewBox="0 0 100% 18"
+                    backgroundColor="#f3f3f3"
+                    foregroundColor="#ecebeb"
+                  >
+                    <rect x="0" y="0" rx="3" ry="3" width="100%" height="18" />
+                  </ContentLoader>
+                )}
                 {!!startTime &&
                   getDateRangeStr({
                     start: startTime,
diff --git a/yarn.lock b/yarn.lock
index c43af1f7f..381621300 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14914,6 +14914,11 @@ react-app-polyfill@^1.0.6:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-content-loader@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-6.0.1.tgz#1c5ce4a6256d974fcd3ac85460eca24b33226920"
+  integrity sha512-djJUgGNze7YdWzJA1kYO1eKXAMpP+Z4sMulmEuTVi6vEXzfuQCJs6yD8hhgWj23vvJPZL5b8NyabxteyF8Hq/g==
+
 react-datepicker@^2.9.6:
   version "2.9.6"
   resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-2.9.6.tgz#26190c9f71692149d0d163398aa19e08626444b1"

From 9b17aff83b2334084630cae3978141e066de7c27 Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Thu, 18 Feb 2021 15:30:50 +0200
Subject: [PATCH 11/19] Add skeleton loader, minor fixes

---
 .../skeletonLoader/SkeletonLoader.tsx         | 19 +++++++++++++++++++
 src/domain/course/CoursePageContainer.tsx     |  6 +++---
 src/domain/event/eventHero/EventHero.tsx      | 15 ++-------------
 3 files changed, 24 insertions(+), 16 deletions(-)
 create mode 100644 src/common/components/skeletonLoader/SkeletonLoader.tsx

diff --git a/src/common/components/skeletonLoader/SkeletonLoader.tsx b/src/common/components/skeletonLoader/SkeletonLoader.tsx
new file mode 100644
index 000000000..57c21b81a
--- /dev/null
+++ b/src/common/components/skeletonLoader/SkeletonLoader.tsx
@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from 'react';
+import ContentLoader from 'react-content-loader';
+
+const SkeletonLoader: FunctionComponent = () => {
+  return (
+    <ContentLoader
+      speed={2}
+      width={'100%'}
+      height={18}
+      viewBox="0 0 100% 18"
+      backgroundColor="#f3f3f3"
+      foregroundColor="#ecebeb"
+    >
+      <rect x="0" y="0" rx="3" ry="3" width="100%" height="18" />
+    </ContentLoader>
+  );
+};
+
+export default SkeletonLoader;
diff --git a/src/domain/course/CoursePageContainer.tsx b/src/domain/course/CoursePageContainer.tsx
index 280727c47..dc489b91e 100644
--- a/src/domain/course/CoursePageContainer.tsx
+++ b/src/domain/course/CoursePageContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
@@ -50,10 +50,10 @@ const CoursePageContainer: React.FC = () => {
   const course = courseData?.courseDetails;
 
   const superEventId = getEventIdFromUrl(course?.superEvent?.internalId ?? '');
-  useEffect(() => {
+  React.useLayoutEffect(() => {
     if (superEventId) {
       getSuperEventData();
-    } else if (course && !superEventId) {
+    } else if (course) {
       setSuperEvent({ data: null, status: 'resolved' });
     }
     async function getSuperEventData() {
diff --git a/src/domain/event/eventHero/EventHero.tsx b/src/domain/event/eventHero/EventHero.tsx
index c4a1da9a2..a78be50da 100644
--- a/src/domain/event/eventHero/EventHero.tsx
+++ b/src/domain/event/eventHero/EventHero.tsx
@@ -1,13 +1,13 @@
 import classNames from 'classnames';
 import { Button, IconArrowLeft, IconLocation, IconTicket } from 'hds-react';
 import React from 'react';
-import ContentLoader from 'react-content-loader';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router-dom';
 
 import buttonStyles from '../../../common/components/button/button.module.scss';
 import IconButton from '../../../common/components/iconButton/IconButton';
 import InfoWithIcon from '../../../common/components/infoWithIcon/InfoWithIcon';
+import SkeletonLoader from '../../../common/components/skeletonLoader/SkeletonLoader';
 import Visible from '../../../common/components/visible/Visible';
 import useLocale from '../../../hooks/useLocale';
 import getDateRangeStr from '../../../util/getDateRangeStr';
@@ -127,18 +127,7 @@ const EventHero: React.FC<Props> = ({ event, eventType, superEvent }) => {
                 <div className={styles.description}>{shortDescription}</div>
               )}
               <Visible above="sm" className={styles.date}>
-                {superEvent?.status === 'pending' && (
-                  <ContentLoader
-                    speed={2}
-                    width={'100%'}
-                    height={18}
-                    viewBox="0 0 100% 18"
-                    backgroundColor="#f3f3f3"
-                    foregroundColor="#ecebeb"
-                  >
-                    <rect x="0" y="0" rx="3" ry="3" width="100%" height="18" />
-                  </ContentLoader>
-                )}
+                {superEvent?.status === 'pending' && <SkeletonLoader />}
                 {!!startTime &&
                   getDateRangeStr({
                     start: startTime,

From f0e634a7e404d264e3800725a8df86879525e568 Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Thu, 18 Feb 2021 15:49:04 +0200
Subject: [PATCH 12/19] Improves skeleton loader

---
 .../skeletonLoader/SkeletonLoader.tsx         | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/common/components/skeletonLoader/SkeletonLoader.tsx b/src/common/components/skeletonLoader/SkeletonLoader.tsx
index 57c21b81a..2679c7890 100644
--- a/src/common/components/skeletonLoader/SkeletonLoader.tsx
+++ b/src/common/components/skeletonLoader/SkeletonLoader.tsx
@@ -1,17 +1,29 @@
 import React, { FunctionComponent } from 'react';
 import ContentLoader from 'react-content-loader';
 
-const SkeletonLoader: FunctionComponent = () => {
+interface Props {
+  width?: string;
+  height?: string;
+  backgroundColor?: string;
+  foregroundColor?: string;
+}
+
+const SkeletonLoader: FunctionComponent<Props> = ({
+  width = '200',
+  height = '18',
+  backgroundColor = '#f3f3f3',
+  foregroundColor = '#ecebeb',
+}) => {
   return (
     <ContentLoader
       speed={2}
-      width={'100%'}
-      height={18}
-      viewBox="0 0 100% 18"
-      backgroundColor="#f3f3f3"
-      foregroundColor="#ecebeb"
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      backgroundColor={backgroundColor}
+      foregroundColor={foregroundColor}
     >
-      <rect x="0" y="0" rx="3" ry="3" width="100%" height="18" />
+      <rect x="0" y="0" rx="3" ry="3" width={width} height={height} />
     </ContentLoader>
   );
 };

From 2ed28b72d74c625260f1b18f04f4412479773198 Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Fri, 19 Feb 2021 10:18:26 +0200
Subject: [PATCH 13/19] Removes skeleton, ssr problems

---
 package.json                                  |  1 -
 .../skeletonLoader/SkeletonLoader.tsx         | 31 -------------------
 src/domain/event/eventHero/EventHero.tsx      |  2 --
 .../event/eventHero/eventHero.module.scss     |  1 +
 yarn.lock                                     |  5 ---
 5 files changed, 1 insertion(+), 39 deletions(-)
 delete mode 100644 src/common/components/skeletonLoader/SkeletonLoader.tsx

diff --git a/package.json b/package.json
index 0c61895a2..45878d8fd 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,6 @@
     "react": "^16.13.1",
     "react-apollo": "^3.1.3",
     "react-apollo-hooks": "^0.5.0",
-    "react-content-loader": "^6.0.1",
     "react-datepicker": "^2.9.6",
     "react-dom": "^16.13.1",
     "react-gtm-module": "^2.0.11",
diff --git a/src/common/components/skeletonLoader/SkeletonLoader.tsx b/src/common/components/skeletonLoader/SkeletonLoader.tsx
deleted file mode 100644
index 2679c7890..000000000
--- a/src/common/components/skeletonLoader/SkeletonLoader.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import ContentLoader from 'react-content-loader';
-
-interface Props {
-  width?: string;
-  height?: string;
-  backgroundColor?: string;
-  foregroundColor?: string;
-}
-
-const SkeletonLoader: FunctionComponent<Props> = ({
-  width = '200',
-  height = '18',
-  backgroundColor = '#f3f3f3',
-  foregroundColor = '#ecebeb',
-}) => {
-  return (
-    <ContentLoader
-      speed={2}
-      width={width}
-      height={height}
-      viewBox={`0 0 ${width} ${height}`}
-      backgroundColor={backgroundColor}
-      foregroundColor={foregroundColor}
-    >
-      <rect x="0" y="0" rx="3" ry="3" width={width} height={height} />
-    </ContentLoader>
-  );
-};
-
-export default SkeletonLoader;
diff --git a/src/domain/event/eventHero/EventHero.tsx b/src/domain/event/eventHero/EventHero.tsx
index a78be50da..02507ac93 100644
--- a/src/domain/event/eventHero/EventHero.tsx
+++ b/src/domain/event/eventHero/EventHero.tsx
@@ -7,7 +7,6 @@ import { useHistory, useLocation } from 'react-router-dom';
 import buttonStyles from '../../../common/components/button/button.module.scss';
 import IconButton from '../../../common/components/iconButton/IconButton';
 import InfoWithIcon from '../../../common/components/infoWithIcon/InfoWithIcon';
-import SkeletonLoader from '../../../common/components/skeletonLoader/SkeletonLoader';
 import Visible from '../../../common/components/visible/Visible';
 import useLocale from '../../../hooks/useLocale';
 import getDateRangeStr from '../../../util/getDateRangeStr';
@@ -127,7 +126,6 @@ const EventHero: React.FC<Props> = ({ event, eventType, superEvent }) => {
                 <div className={styles.description}>{shortDescription}</div>
               )}
               <Visible above="sm" className={styles.date}>
-                {superEvent?.status === 'pending' && <SkeletonLoader />}
                 {!!startTime &&
                   getDateRangeStr({
                     start: startTime,
diff --git a/src/domain/event/eventHero/eventHero.module.scss b/src/domain/event/eventHero/eventHero.module.scss
index b39faab6f..cb9762e4e 100644
--- a/src/domain/event/eventHero/eventHero.module.scss
+++ b/src/domain/event/eventHero/eventHero.module.scss
@@ -80,6 +80,7 @@ $logoWidth: 5.5rem;
       margin-top: 0.5rem;
       font-size: var(--fontsize-body-l);
       line-height: 1.625rem;
+      min-height: 1.625rem;
     }
 
     .title {
diff --git a/yarn.lock b/yarn.lock
index 381621300..c43af1f7f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14914,11 +14914,6 @@ react-app-polyfill@^1.0.6:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
-react-content-loader@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-6.0.1.tgz#1c5ce4a6256d974fcd3ac85460eca24b33226920"
-  integrity sha512-djJUgGNze7YdWzJA1kYO1eKXAMpP+Z4sMulmEuTVi6vEXzfuQCJs6yD8hhgWj23vvJPZL5b8NyabxteyF8Hq/g==
-
 react-datepicker@^2.9.6:
   version "2.9.6"
   resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-2.9.6.tgz#26190c9f71692149d0d163398aa19e08626444b1"

From 7537c2f1bed3ca96c5c5cff79177aa07e1b051e6 Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Fri, 19 Feb 2021 12:42:05 +0200
Subject: [PATCH 14/19] Fix apollo client reference

---
 src/domain/course/CoursePageContainer.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/domain/course/CoursePageContainer.tsx b/src/domain/course/CoursePageContainer.tsx
index dc489b91e..fa613a449 100644
--- a/src/domain/course/CoursePageContainer.tsx
+++ b/src/domain/course/CoursePageContainer.tsx
@@ -1,3 +1,4 @@
+import { useApolloClient } from '@apollo/react-hooks';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useParams } from 'react-router';
@@ -11,7 +12,6 @@ import {
 } from '../../generated/graphql';
 import useLocale from '../../hooks/useLocale';
 import isClient from '../../util/isClient';
-import apolloClient from '../app/apollo/apolloClient';
 import MainContent from '../app/layout/MainContent';
 import PageWrapper from '../app/layout/PageWrapper';
 import { ROUTES } from '../app/routes/constants';
@@ -30,6 +30,7 @@ interface RouteParams {
 }
 
 const CoursePageContainer: React.FC = () => {
+  const apolloClient = useApolloClient();
   const { t } = useTranslation();
   const { search } = useLocation();
   const params = useParams<RouteParams>();
@@ -70,7 +71,7 @@ const CoursePageContainer: React.FC = () => {
         setSuperEvent({ data: null, status: 'resolved' });
       }
     }
-  }, [course, superEventId]);
+  }, [apolloClient, course, superEventId]);
 
   const courseClosed = !course || isEventClosed(course);
 

From e4f02d9d02d522a3bf8dcab2c7288a8db4ce6988 Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Fri, 19 Feb 2021 13:36:07 +0200
Subject: [PATCH 15/19] Add skeleton, fix otherevent times

---
 package.json                                  |  1 +
 .../skeletonLoader/SkeletonLoader.tsx         | 31 +++++++++++++++++++
 src/domain/event/eventHero/EventHero.tsx      |  2 ++
 .../otherEventTimes/OtherEventTimes.tsx       | 11 ++++++-
 .../otherEventTimes.module.scss               |  5 +++
 yarn.lock                                     |  5 +++
 6 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/common/components/skeletonLoader/SkeletonLoader.tsx

diff --git a/package.json b/package.json
index 45878d8fd..0c61895a2 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "react": "^16.13.1",
     "react-apollo": "^3.1.3",
     "react-apollo-hooks": "^0.5.0",
+    "react-content-loader": "^6.0.1",
     "react-datepicker": "^2.9.6",
     "react-dom": "^16.13.1",
     "react-gtm-module": "^2.0.11",
diff --git a/src/common/components/skeletonLoader/SkeletonLoader.tsx b/src/common/components/skeletonLoader/SkeletonLoader.tsx
new file mode 100644
index 000000000..2679c7890
--- /dev/null
+++ b/src/common/components/skeletonLoader/SkeletonLoader.tsx
@@ -0,0 +1,31 @@
+import React, { FunctionComponent } from 'react';
+import ContentLoader from 'react-content-loader';
+
+interface Props {
+  width?: string;
+  height?: string;
+  backgroundColor?: string;
+  foregroundColor?: string;
+}
+
+const SkeletonLoader: FunctionComponent<Props> = ({
+  width = '200',
+  height = '18',
+  backgroundColor = '#f3f3f3',
+  foregroundColor = '#ecebeb',
+}) => {
+  return (
+    <ContentLoader
+      speed={2}
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      backgroundColor={backgroundColor}
+      foregroundColor={foregroundColor}
+    >
+      <rect x="0" y="0" rx="3" ry="3" width={width} height={height} />
+    </ContentLoader>
+  );
+};
+
+export default SkeletonLoader;
diff --git a/src/domain/event/eventHero/EventHero.tsx b/src/domain/event/eventHero/EventHero.tsx
index 02507ac93..a78be50da 100644
--- a/src/domain/event/eventHero/EventHero.tsx
+++ b/src/domain/event/eventHero/EventHero.tsx
@@ -7,6 +7,7 @@ import { useHistory, useLocation } from 'react-router-dom';
 import buttonStyles from '../../../common/components/button/button.module.scss';
 import IconButton from '../../../common/components/iconButton/IconButton';
 import InfoWithIcon from '../../../common/components/infoWithIcon/InfoWithIcon';
+import SkeletonLoader from '../../../common/components/skeletonLoader/SkeletonLoader';
 import Visible from '../../../common/components/visible/Visible';
 import useLocale from '../../../hooks/useLocale';
 import getDateRangeStr from '../../../util/getDateRangeStr';
@@ -126,6 +127,7 @@ const EventHero: React.FC<Props> = ({ event, eventType, superEvent }) => {
                 <div className={styles.description}>{shortDescription}</div>
               )}
               <Visible above="sm" className={styles.date}>
+                {superEvent?.status === 'pending' && <SkeletonLoader />}
                 {!!startTime &&
                   getDateRangeStr({
                     start: startTime,
diff --git a/src/domain/event/eventInfo/otherEventTimes/OtherEventTimes.tsx b/src/domain/event/eventInfo/otherEventTimes/OtherEventTimes.tsx
index 223017fbd..cdc608b1b 100644
--- a/src/domain/event/eventInfo/otherEventTimes/OtherEventTimes.tsx
+++ b/src/domain/event/eventInfo/otherEventTimes/OtherEventTimes.tsx
@@ -10,6 +10,7 @@ import { useHistory, useLocation } from 'react-router-dom';
 
 import InfoWithIcon from '../../../../common/components/infoWithIcon/InfoWithIcon';
 import linkStyles from '../../../../common/components/link/link.module.scss';
+import SkeletonLoader from '../../../../common/components/skeletonLoader/SkeletonLoader';
 import LoadingSpinner from '../../../../common/components/spinner/LoadingSpinner';
 import useLocale from '../../../../hooks/useLocale';
 import getDateRangeStr from '../../../../util/getDateRangeStr';
@@ -51,7 +52,15 @@ const OtherEventTimes: React.FC<Props> = ({
     history.push(eventUrl);
   };
 
-  if (!superEventId || events.length === 0) return null;
+  if (!superEventId) {
+    return null;
+  } else if (events.length === 0 && loading) {
+    return (
+      <div className={styles.skeletonWrapper}>
+        <SkeletonLoader />
+      </div>
+    );
+  }
 
   return (
     <div className={styles.otherEventTimes}>
diff --git a/src/domain/event/eventInfo/otherEventTimes/otherEventTimes.module.scss b/src/domain/event/eventInfo/otherEventTimes/otherEventTimes.module.scss
index 91cffd75e..742b71f66 100644
--- a/src/domain/event/eventInfo/otherEventTimes/otherEventTimes.module.scss
+++ b/src/domain/event/eventInfo/otherEventTimes/otherEventTimes.module.scss
@@ -1,3 +1,8 @@
+.skeletonWrapper {
+  height: 2rem;
+  padding-left: 2.25rem;
+}
+
 .otherEventTimes {
   margin-bottom: 1rem;
 
diff --git a/yarn.lock b/yarn.lock
index c43af1f7f..381621300 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14914,6 +14914,11 @@ react-app-polyfill@^1.0.6:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-content-loader@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-6.0.1.tgz#1c5ce4a6256d974fcd3ac85460eca24b33226920"
+  integrity sha512-djJUgGNze7YdWzJA1kYO1eKXAMpP+Z4sMulmEuTVi6vEXzfuQCJs6yD8hhgWj23vvJPZL5b8NyabxteyF8Hq/g==
+
 react-datepicker@^2.9.6:
   version "2.9.6"
   resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-2.9.6.tgz#26190c9f71692149d0d163398aa19e08626444b1"

From 71c2e8c0cb3158b391cbe180ae6ab66b234449bb Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Sun, 21 Feb 2021 13:09:42 +0200
Subject: [PATCH 16/19] Adds tests

---
 .../__tests__/CoursePageContainer.test.tsx    | 64 +++++++++++++++++++
 .../eventHero/__tests__/EventHero.test.tsx    |  4 +-
 2 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/src/domain/course/__tests__/CoursePageContainer.test.tsx b/src/domain/course/__tests__/CoursePageContainer.test.tsx
index 3babf6e72..927b136a3 100644
--- a/src/domain/course/__tests__/CoursePageContainer.test.tsx
+++ b/src/domain/course/__tests__/CoursePageContainer.test.tsx
@@ -6,6 +6,7 @@ import {
   CourseDetailsDocument,
   CourseListDocument,
 } from '../../../generated/graphql';
+import getDateRangeStr from '../../../util/getDateRangeStr';
 import {
   fakeEvent,
   fakeEvents,
@@ -70,6 +71,14 @@ const courseRequest = {
   },
 };
 
+const superEventRequest = {
+  query: CourseDetailsDocument,
+  variables: {
+    id: superEventId,
+    include: ['in_language', 'keywords', 'location', 'audience'],
+  },
+};
+
 const similarCoursesListRequest = {
   query: CourseListDocument,
   variables: {
@@ -105,6 +114,16 @@ const otherCoursesRequest = {
 
 const courseResponse = { data: { courseDetails: course } };
 
+const superEventResponse = {
+  data: {
+    courseDetails: {
+      ...course,
+      startTime: '2020-06-22T07:00:00.000000Z',
+      endTime: '2020-06-25T07:00:00.000000Z',
+    },
+  },
+};
+
 const similarCoursesResponse = {
   data: {
     courseList: fakeEvents(
@@ -133,6 +152,25 @@ const mocks = [
   },
 ];
 
+const superEventMocks = [
+  {
+    request: courseRequest,
+    result: courseResponse,
+  },
+  {
+    request: superEventRequest,
+    result: superEventResponse,
+  },
+  {
+    request: otherCoursesRequest,
+    result: otherCoursesResponse,
+  },
+  {
+    request: similarCoursesListRequest,
+    result: similarCoursesResponse,
+  },
+];
+
 const testPath = ROUTES.COURSE.replace(':id', id);
 const routes = [testPath];
 
@@ -243,3 +281,29 @@ it('should link to courses search when clicking tags', async () => {
     search: '?text=Avouinti',
   });
 });
+
+it('should contain event hero with super event date', async () => {
+  advanceTo('2020-06-23');
+
+  renderWithRoute(<CoursePageContainer />, {
+    mocks: superEventMocks,
+    routes,
+    path: ROUTES.COURSE,
+  });
+
+  await waitFor(() => {
+    expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
+  });
+
+  const superDateStr = getDateRangeStr({
+    start: superEventResponse.data.courseDetails.startTime,
+    end: superEventResponse.data.courseDetails.endTime,
+    locale: 'fi',
+    includeTime: true,
+    timeAbbreviation: translations.commons.timeAbbreviation,
+  });
+
+  expect(
+    screen.getAllByText((_content, el) => el.textContent === superDateStr)
+  ).toHaveLength(1);
+});
diff --git a/src/domain/event/eventHero/__tests__/EventHero.test.tsx b/src/domain/event/eventHero/__tests__/EventHero.test.tsx
index b997191c2..822a4e2d1 100644
--- a/src/domain/event/eventHero/__tests__/EventHero.test.tsx
+++ b/src/domain/event/eventHero/__tests__/EventHero.test.tsx
@@ -212,8 +212,8 @@ test('should have event dates when super event is not defined', () => {
 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',
+    startTime: '2020-06-22T07:00:00.000000Z',
+    endTime: '2025-06-25T07:00:00.000000Z',
   });
   render(
     <EventHero

From 3f693188e5aee17574d7b393b53ec76e6cd184f1 Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Sun, 21 Feb 2021 15:29:36 +0200
Subject: [PATCH 17/19] Fix

---
 .../event/eventInfo/otherEventTimes/OtherEventTimes.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/domain/event/eventInfo/otherEventTimes/OtherEventTimes.tsx b/src/domain/event/eventInfo/otherEventTimes/OtherEventTimes.tsx
index cdc608b1b..3eb680576 100644
--- a/src/domain/event/eventInfo/otherEventTimes/OtherEventTimes.tsx
+++ b/src/domain/event/eventInfo/otherEventTimes/OtherEventTimes.tsx
@@ -52,9 +52,9 @@ const OtherEventTimes: React.FC<Props> = ({
     history.push(eventUrl);
   };
 
-  if (!superEventId) {
+  if (!superEventId || (events.length === 0 && !loading)) {
     return null;
-  } else if (events.length === 0 && loading) {
+  } else if (loading) {
     return (
       <div className={styles.skeletonWrapper}>
         <SkeletonLoader />

From c4e24c56b78a44868a02538f24cef3afc0f8c58e Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Mon, 22 Feb 2021 09:15:40 +0200
Subject: [PATCH 18/19] Fixes

---
 .../otherEventTimes/OtherCourseTimesContainer.tsx      |  6 +-----
 .../eventInfo/otherEventTimes/OtherEventTimes.tsx      | 10 +++++-----
 .../otherEventTimes/OtherEventTimesContainer.tsx       |  4 +---
 3 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/domain/event/eventInfo/otherEventTimes/OtherCourseTimesContainer.tsx b/src/domain/event/eventInfo/otherEventTimes/OtherCourseTimesContainer.tsx
index 84b58ccb2..e6b26653b 100644
--- a/src/domain/event/eventInfo/otherEventTimes/OtherCourseTimesContainer.tsx
+++ b/src/domain/event/eventInfo/otherEventTimes/OtherCourseTimesContainer.tsx
@@ -10,11 +10,7 @@ const OtherCourseTimesContainer: React.FC<{ event: EventFields }> = ({
   const { superEventId, ...props } = useOtherCourseTimes(event);
 
   return superEventId ? (
-    <OtherEventTimes
-      {...props}
-      superEventId={superEventId}
-      eventType="course"
-    />
+    <OtherEventTimes {...props} eventType="course" />
   ) : null;
 };
 
diff --git a/src/domain/event/eventInfo/otherEventTimes/OtherEventTimes.tsx b/src/domain/event/eventInfo/otherEventTimes/OtherEventTimes.tsx
index 3eb680576..f10172f97 100644
--- a/src/domain/event/eventInfo/otherEventTimes/OtherEventTimes.tsx
+++ b/src/domain/event/eventInfo/otherEventTimes/OtherEventTimes.tsx
@@ -19,7 +19,6 @@ import styles from './otherEventTimes.module.scss';
 
 interface Props {
   isFetchingMore: boolean;
-  superEventId: string;
   loading: boolean;
   events: EventFields[];
   eventType: EventType;
@@ -31,7 +30,6 @@ const OtherEventTimes: React.FC<Props> = ({
   events,
   loading,
   isFetchingMore,
-  superEventId,
   eventType,
 }) => {
   const { t } = useTranslation();
@@ -52,9 +50,7 @@ const OtherEventTimes: React.FC<Props> = ({
     history.push(eventUrl);
   };
 
-  if (!superEventId || (events.length === 0 && !loading)) {
-    return null;
-  } else if (loading) {
+  if (loading) {
     return (
       <div className={styles.skeletonWrapper}>
         <SkeletonLoader />
@@ -62,6 +58,10 @@ const OtherEventTimes: React.FC<Props> = ({
     );
   }
 
+  if (events.length === 0) {
+    return null;
+  }
+
   return (
     <div className={styles.otherEventTimes}>
       <InfoWithIcon
diff --git a/src/domain/event/eventInfo/otherEventTimes/OtherEventTimesContainer.tsx b/src/domain/event/eventInfo/otherEventTimes/OtherEventTimesContainer.tsx
index 82ae10eae..2e9c14a43 100644
--- a/src/domain/event/eventInfo/otherEventTimes/OtherEventTimesContainer.tsx
+++ b/src/domain/event/eventInfo/otherEventTimes/OtherEventTimesContainer.tsx
@@ -9,9 +9,7 @@ const OtherEventTimesContainer: React.FC<{ event: EventFields }> = ({
 }) => {
   const { superEventId, ...props } = useOtherEventTimes(event);
 
-  return superEventId ? (
-    <OtherEventTimes {...props} superEventId={superEventId} eventType="event" />
-  ) : null;
+  return superEventId ? <OtherEventTimes {...props} eventType="event" /> : null;
 };
 
 export default OtherEventTimesContainer;

From b7ee01191c91965c5a8d4281fac5902cff9ee9c6 Mon Sep 17 00:00:00 2001
From: Ivan Melnik <melnik.job@gmail.com>
Date: Mon, 22 Feb 2021 09:17:31 +0200
Subject: [PATCH 19/19] Fixes

---
 src/domain/course/__tests__/CoursePageContainer.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/domain/course/__tests__/CoursePageContainer.test.tsx b/src/domain/course/__tests__/CoursePageContainer.test.tsx
index 927b136a3..4faa7db1a 100644
--- a/src/domain/course/__tests__/CoursePageContainer.test.tsx
+++ b/src/domain/course/__tests__/CoursePageContainer.test.tsx
@@ -304,6 +304,6 @@ it('should contain event hero with super event date', async () => {
   });
 
   expect(
-    screen.getAllByText((_content, el) => el.textContent === superDateStr)
-  ).toHaveLength(1);
+    screen.getByText((_content, el) => el.textContent === superDateStr)
+  ).toBeInTheDocument();
 });