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 (<>
conference id: {conferenceId}
-
events:
-
{JSON.stringify(events)}
-
speakers:
-
{JSON.stringify(speakers)}
-
tracks:
-
{JSON.stringify(tracks)}
-
event types:
-
{JSON.stringify(eventTypes)}
-
halls:
-
{JSON.stringify(halls)}
-
slots:
-
{JSON.stringify(slots)}
+ {isLoading &&

Loading...

} + {events && <> +
events:
+
{JSON.stringify(events)}
+ } + {speakers && <> +
speakers:
+
{JSON.stringify(speakers)}
+ } + {tracks && <> +
tracks:
+
{JSON.stringify(tracks)}
+ } + {eventTypes && <> +
event types:
+
{JSON.stringify(eventTypes)}
+ } + {halls && <> +
halls:
+
{JSON.stringify(halls)}
+ } + {slots && <> +
slots:
+
{JSON.stringify(slots)}
+ } ); } 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, + }; +}