Render all requests data

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "swr": "^2.2.5"

src/Schedule.jsx

@@ -0,0 +1,55 @@
+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';
+
+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);
+
+    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>
+    </>);
+}
+
+Schedule.propTypes = {
+    conferenceId: PropTypes.string.isRequired,
+};

src/ScheduleLoader.jsx

@@ -1,21 +1,31 @@
 import useConferences from './hooks/useConferences.js';
+import { useMemo, useState } from 'react';
+import Schedule from './Schedule.jsx';
+import { dateSorter } from './utils.js';
 
 export default function ScheduleLoader() {
     const {
-        conferences,
+        data,
         error,
         isLoading,
     } = useConferences();
 
+    const conferences = useMemo(() => Array.isArray(data) ? data.sort(dateSorter('start_date')) : data, [data]);
+
+    const [ conferenceId, setConferenceId ] = useState();
+
     return (<>
         {isLoading && <p>Please wait...</p>}
         {error && <p>Error: {error}</p>}
         {conferences && <>
             <label>Select a conference</label>
-            <select>
+            <select onChange={e => setConferenceId(e.target.value)}>
                 {conferences.map(conference => <option key={conference.id}
                                                        value={conference.id}>{conference.title}</option>)}
             </select>
         </>}
+        {conferenceId && <div>
+            <Schedule conferenceId={conferenceId} />
+        </div>}
     </>);
 }

src/hooks/useConferences.js

@@ -1,17 +1,5 @@
 import useCfpRequest from './useCfpRequest.js';
-import { useMemo } from 'react';
-import { dateSorter } from '../utils.js';
 
 export default function useConferences() {
-    const {
+    return useCfpRequest();
-        data,
-        ...rest
-    } = useCfpRequest();
-
-    const conferences = useMemo(() => Array.isArray(data) ? data.sort(dateSorter('start_date')) : data, [data]);
-
-    return {
-        conferences,
-        ...rest,
-    };
 }

src/hooks/useEventTypes.js

@@ -0,0 +1,5 @@
+import useCfpRequest from './useCfpRequest.js';
+
+export default function useEventTypes(conferenceId) {
+    return useCfpRequest(`${conferenceId}/event_types.json`);
+}

src/hooks/useEvents.js

@@ -0,0 +1,5 @@
+import useCfpRequest from './useCfpRequest.js';
+
+export default function useEvents(conferenceId) {
+    return useCfpRequest(`${conferenceId}/events.json`);
+}

src/hooks/useHalls.js

@@ -0,0 +1,5 @@
+import useCfpRequest from './useCfpRequest.js';
+
+export default function useHalls(conferenceId) {
+    return useCfpRequest(`${conferenceId}/halls.json`);
+}

src/hooks/useSlots.js

@@ -0,0 +1,5 @@
+import useCfpRequest from './useCfpRequest.js';
+
+export default function useSlots(conferenceId) {
+    return useCfpRequest(`${conferenceId}/slots.json`);
+}

src/hooks/useSpeakers.js

@@ -0,0 +1,5 @@
+import useCfpRequest from './useCfpRequest.js';
+
+export default function useSpeakers(conferenceId) {
+    return useCfpRequest(`${conferenceId}/speakers.json`);
+}

src/hooks/useTracks.js

@@ -0,0 +1,5 @@
+import useCfpRequest from './useCfpRequest.js';
+
+export default function useTracks(conferenceId) {
+    return useCfpRequest(`${conferenceId}/tracks.json`);
+}