From 38e52b25d80538e182c6afa7f0ac95df787e80bf Mon Sep 17 00:00:00 2001
From: Vencislav Atanasov <git@6bez10.info>
Date: Wed, 18 Sep 2024 22:27:07 +0300
Subject: [PATCH] Hook for loading the schedule

---
 src/Schedule.jsx         | 74 ++++++++++++++++++----------------------
 src/hooks/useSchedule.js | 58 +++++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+), 40 deletions(-)
 create mode 100644 src/hooks/useSchedule.js

diff --git a/src/Schedule.jsx b/src/Schedule.jsx
index c397577..4a50528 100644
--- a/src/Schedule.jsx
+++ b/src/Schedule.jsx
@@ -1,52 +1,46 @@
 import PropTypes from 'prop-types';
-import useEvents from './hooks/useEvents.js';
-import useSpeakers from './hooks/useSpeakers.js';
-import useTracks from './hooks/useTracks.js';
-import useEventTypes from './hooks/useEventTypes.js';
-import useHalls from './hooks/useHalls.js';
-import useSlots from './hooks/useSlots.js';
+import useSchedule from './hooks/useSchedule.js';
 
 export default function Schedule({
     conferenceId,
 }) {
     const {
-        data: events,
-    } = useEvents(conferenceId);
-
-    const {
-        data: speakers,
-    } = useSpeakers(conferenceId);
-
-    const {
-        data: tracks,
-    } = useTracks(conferenceId);
-
-    const {
-        data: eventTypes,
-    } = useEventTypes(conferenceId);
-
-    const {
-        data: halls,
-    } = useHalls(conferenceId);
-
-    const {
-        data: slots,
-    } = useSlots(conferenceId);
+        events,
+        speakers,
+        tracks,
+        eventTypes,
+        halls,
+        slots,
+        isLoading,
+    } = useSchedule(conferenceId);
 
     return (<>
         <div>conference id: {conferenceId}</div>
-        <div>events:</div>
-        <div>{JSON.stringify(events)}</div>
-        <div>speakers:</div>
-        <div>{JSON.stringify(speakers)}</div>
-        <div>tracks:</div>
-        <div>{JSON.stringify(tracks)}</div>
-        <div>event types:</div>
-        <div>{JSON.stringify(eventTypes)}</div>
-        <div>halls:</div>
-        <div>{JSON.stringify(halls)}</div>
-        <div>slots:</div>
-        <div>{JSON.stringify(slots)}</div>
+        {isLoading && <p>Loading...</p>}
+        {events && <>
+            <div>events:</div>
+            <div>{JSON.stringify(events)}</div>
+        </>}
+        {speakers && <>
+            <div>speakers:</div>
+            <div>{JSON.stringify(speakers)}</div>
+        </>}
+        {tracks && <>
+            <div>tracks:</div>
+            <div>{JSON.stringify(tracks)}</div>
+        </>}
+        {eventTypes && <>
+            <div>event types:</div>
+            <div>{JSON.stringify(eventTypes)}</div>
+        </>}
+        {halls && <>
+            <div>halls:</div>
+            <div>{JSON.stringify(halls)}</div>
+        </>}
+        {slots && <>
+            <div>slots:</div>
+            <div>{JSON.stringify(slots)}</div>
+        </>}
     </>);
 }
 
diff --git a/src/hooks/useSchedule.js b/src/hooks/useSchedule.js
new file mode 100644
index 0000000..ec20380
--- /dev/null
+++ b/src/hooks/useSchedule.js
@@ -0,0 +1,58 @@
+import useEvents from './useEvents.js';
+import useSpeakers from './useSpeakers.js';
+import useTracks from './useTracks.js';
+import useEventTypes from './useEventTypes.js';
+import useHalls from './useHalls.js';
+import useSlots from './useSlots.js';
+
+export default function useSchedule(conferenceId) {
+    const {
+        data: events,
+        isLoading: eventsLoading,
+        isValidating: eventsValidating,
+    } = useEvents(conferenceId);
+
+    const {
+        data: speakers,
+        isLoading: speakersLoading,
+        isValidating: speakersValidating,
+    } = useSpeakers(conferenceId);
+
+    const {
+        data: tracks,
+        isLoading: tracksLoading,
+        isValidating: tracksValidating,
+    } = useTracks(conferenceId);
+
+    const {
+        data: eventTypes,
+        isLoading: eventTypesLoading,
+        isValidating: eventTypesValidating,
+    } = useEventTypes(conferenceId);
+
+    const {
+        data: halls,
+        isLoading: hallsLoading,
+        isValidating: hallsValidating,
+    } = useHalls(conferenceId);
+
+    const {
+        data: slots,
+        isLoading: slotsLoading,
+        isValidating: slotsValidating,
+    } = useSlots(conferenceId);
+
+    const isLoading = eventsLoading || speakersLoading || tracksLoading || eventTypesLoading || hallsLoading || slotsLoading;
+    const isValidating = eventsValidating || speakersValidating || tracksValidating || eventTypesValidating || hallsValidating || slotsValidating;
+
+    return {
+        events,
+        speakers,
+        tracks,
+        eventTypes,
+        halls,
+        slots,
+        isLoading,
+        isValidating,
+    };
+}