fix: event details failed to handle super event fetching

LIIKUNTA-514
City-of-Helsinki · May 30, 2023 · c79fcee · c79fcee
1 parent c74534e
commit c79fcee
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 129 deletions.
diff --git a/apps/events-helsinki/src/domain/event/EventPageContainer.tsx b/apps/events-helsinki/src/domain/event/EventPageContainer.tsx
@@ -1,17 +1,12 @@
-import { useLazyQuery } from '@apollo/client';
 import {
   LoadingSpinner,
   useLocale,
   addParamsToQueryString,
-  getEventIdFromUrl,
   isEventClosed,
-  EventDetailsDocument,
   MAIN_CONTENT_ID,
+  useSuperEventLazyLoad,
 } from '@events-helsinki/components';
-import type {
-  SuperEventResponse,
-  EventFields,
-} from '@events-helsinki/components';
+import type { EventFields } from '@events-helsinki/components';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
@@ -52,46 +47,11 @@ const EventPageContainer: React.FC<EventPageContainerProps> = ({
       locale
     )}`,
   });
-
-  const [superEvent, setSuperEvent] = React.useState<SuperEventResponse>({
-    data: null,
-    status: 'pending',
-  });
-
+  const { superEvent } = useSuperEventLazyLoad(event);
   const [hasSimilarEvents, setHasSimilarEvents] = useState(false);
-
-  const superEventId = getEventIdFromUrl(
-    event?.superEvent?.internalId ?? '',
-    'event'
-  );
-
-  const [superEventSearch, { data: superEventData }] = useLazyQuery(
-    EventDetailsDocument,
-    {
-      variables: {
-        id: superEventId,
-        include: ['in_language', 'keywords', 'location', 'audience'],
-      },
-    }
-  );
-  React.useEffect(() => {
-    if (superEventId) {
-      superEventSearch();
-      if (superEventData) {
-        setSuperEvent({
-          data: superEventData.eventDetails,
-          status: 'resolved',
-        });
-      }
-    } else if (event) {
-      setSuperEvent({ data: null, status: 'resolved' });
-    }
-  }, [event, superEventId, superEventData, superEventSearch]);
-
   const handleSimilarEventsLoaded = (eventsCount: number) => {
     setHasSimilarEvents(eventsCount > 0);
   };
-
   const eventClosed = !event || isEventClosed(event);
   return (
     <div className={styles.eventPageWrapper}>

diff --git a/apps/hobbies-helsinki/src/domain/event/EventPageContainer.tsx b/apps/hobbies-helsinki/src/domain/event/EventPageContainer.tsx
@@ -1,17 +1,12 @@
-import { useLazyQuery } from '@apollo/client';
 import {
   LoadingSpinner,
   useLocale,
   addParamsToQueryString,
-  getEventIdFromUrl,
   isEventClosed,
-  EventDetailsDocument,
   MAIN_CONTENT_ID,
+  useSuperEventLazyLoad,
 } from '@events-helsinki/components';
-import type {
-  SuperEventResponse,
-  EventFields,
-} from '@events-helsinki/components';
+import type { EventFields } from '@events-helsinki/components';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
@@ -52,46 +47,11 @@ const EventPageContainer: React.FC<EventPageContainerProps> = ({
       locale
     )}`,
   });
-
-  const [superEvent, setSuperEvent] = React.useState<SuperEventResponse>({
-    data: null,
-    status: 'pending',
-  });
-
+  const { superEvent } = useSuperEventLazyLoad(event);
   const [hasSimilarEvents, setHasSimilarEvents] = useState(false);
-
-  const superEventId = getEventIdFromUrl(
-    event?.superEvent?.internalId ?? '',
-    'event'
-  );
-
-  const [superEventSearch, { data: superEventData }] = useLazyQuery(
-    EventDetailsDocument,
-    {
-      variables: {
-        id: superEventId,
-        include: ['in_language', 'keywords', 'location', 'audience'],
-      },
-    }
-  );
-  React.useEffect(() => {
-    if (superEventId) {
-      superEventSearch();
-      if (superEventData) {
-        setSuperEvent({
-          data: superEventData.eventDetails,
-          status: 'resolved',
-        });
-      }
-    } else if (event) {
-      setSuperEvent({ data: null, status: 'resolved' });
-    }
-  }, [event, superEventId, superEventData, superEventSearch]);
-
   const handleSimilarEventsLoaded = (eventsCount: number) => {
     setHasSimilarEvents(eventsCount > 0);
   };
-
   const eventClosed = !event || isEventClosed(event);
   return (
     <div className={styles.eventPageWrapper}>

diff --git a/apps/sports-helsinki/src/domain/event/EventPageContainer.tsx b/apps/sports-helsinki/src/domain/event/EventPageContainer.tsx
@@ -1,17 +1,12 @@
-import { useLazyQuery } from '@apollo/client';
 import {
   LoadingSpinner,
   useLocale,
   addParamsToQueryString,
-  getEventIdFromUrl,
   isEventClosed,
-  EventDetailsDocument,
   MAIN_CONTENT_ID,
+  useSuperEventLazyLoad,
 } from '@events-helsinki/components';
-import type {
-  SuperEventResponse,
-  EventFields,
-} from '@events-helsinki/components';
+import type { EventFields } from '@events-helsinki/components';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
@@ -52,46 +47,11 @@ const EventPageContainer: React.FC<EventPageContainerProps> = ({
       locale
     )}`,
   });
-
-  const [superEvent, setSuperEvent] = React.useState<SuperEventResponse>({
-    data: null,
-    status: 'pending',
-  });
-
+  const { superEvent } = useSuperEventLazyLoad(event);
   const [hasSimilarEvents, setHasSimilarEvents] = useState(false);
-
-  const superEventId = getEventIdFromUrl(
-    event?.superEvent?.internalId ?? '',
-    'event'
-  );
-
-  const [superEventSearch, { data: superEventData }] = useLazyQuery(
-    EventDetailsDocument,
-    {
-      variables: {
-        id: superEventId,
-        include: ['in_language', 'keywords', 'location', 'audience'],
-      },
-    }
-  );
-  React.useEffect(() => {
-    if (superEventId) {
-      superEventSearch();
-      if (superEventData) {
-        setSuperEvent({
-          data: superEventData.eventDetails,
-          status: 'resolved',
-        });
-      }
-    } else if (event) {
-      setSuperEvent({ data: null, status: 'resolved' });
-    }
-  }, [event, superEventId, superEventData, superEventSearch]);
-
   const handleSimilarEventsLoaded = (eventsCount: number) => {
     setHasSimilarEvents(eventsCount > 0);
   };
-
   const eventClosed = !event || isEventClosed(event);
   return (
     <div className={styles.eventPageWrapper}>

diff --git a/packages/components/src/hooks/index.ts b/packages/components/src/hooks/index.ts
@@ -26,3 +26,4 @@ export { default as useAppSportsTranslation } from './useAppSportsTranslation';
 export { default as useCommonCmsConfig } from './useCommonCmsConfig';
 export { default as useClickCapture } from './useClickCapture';
 export { default as usePageScrollRestoration } from './usePageScrollRestoration';
+export { default as useSuperEventLazyLoad } from './useSuperEventLazyLoad';
diff --git a/packages/components/src/hooks/useSuperEventLazyLoad.ts b/packages/components/src/hooks/useSuperEventLazyLoad.ts
@@ -0,0 +1,67 @@
+import { useLazyQuery } from '@apollo/client';
+import React from 'react';
+import type { EventFieldsFragment, SuperEventResponse } from '../types';
+import { EventDetailsDocument } from '../types';
+import { getEventIdFromUrl } from '../utils';
+
+function useSuperEventLazyLoad(event?: EventFieldsFragment) {
+  const [superEvent, setSuperEvent] = React.useState<SuperEventResponse>({
+    data: null,
+    status: 'pending',
+  });
+  const superEventId = getEventIdFromUrl(
+    event?.superEvent?.internalId ?? '',
+    'event'
+  );
+  const [
+    superEventSearch,
+    { data: superEventData, loading: superEventLoading },
+  ] = useLazyQuery(EventDetailsDocument, {});
+  React.useEffect(() => {
+    if (superEventId) {
+      superEventSearch({
+        variables: {
+          id: superEventId,
+          include: ['in_language', 'keywords', 'location', 'audience'],
+        },
+      });
+      // Still loading the super event,
+      if (superEventLoading) {
+        setSuperEvent({ data: null, status: 'pending' });
+      }
+      // Loaded, so there should be data if there ever was a super event
+      else if (superEventData) {
+        setSuperEvent({
+          data: superEventData.eventDetails,
+          status: 'resolved',
+        });
+      }
+      // No super event
+      else if (event) {
+        setSuperEvent({ data: null, status: 'resolved' });
+      }
+    }
+    // No super event id to fetch with
+    else {
+      setSuperEvent({
+        data: null,
+        status: 'resolved',
+      });
+    }
+  }, [
+    event,
+    superEventId,
+    superEventData,
+    superEventSearch,
+    superEventLoading,
+  ]);
+
+  return {
+    superEvent,
+    setSuperEvent,
+    superEventSearch,
+    superEventLoading,
+  };
+}
+
+export default useSuperEventLazyLoad;