From ff715b610b4338be2f9b4e35354228b281b2d32e Mon Sep 17 00:00:00 2001
From: Vencislav Atanasov <git@6bez10.info>
Date: Wed, 18 Sep 2024 21:40:20 +0300
Subject: [PATCH] Conference selection

---
 src/Schedule.jsx       | 13 +++++++++++++
 src/ScheduleLoader.jsx |  9 ++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 src/Schedule.jsx

diff --git a/src/Schedule.jsx b/src/Schedule.jsx
new file mode 100644
index 0000000..b278beb
--- /dev/null
+++ b/src/Schedule.jsx
@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+
+export default function Schedule({
+    conferenceId,
+}) {
+    return (<>
+        conference id: {conferenceId}
+    </>);
+}
+
+Schedule.propTypes = {
+    conferenceId: PropTypes.string.isRequired,
+};
diff --git a/src/ScheduleLoader.jsx b/src/ScheduleLoader.jsx
index 8737fea..46487da 100644
--- a/src/ScheduleLoader.jsx
+++ b/src/ScheduleLoader.jsx
@@ -1,4 +1,6 @@
 import useConferences from './hooks/useConferences.js';
+import { useState } from 'react';
+import Schedule from './Schedule.jsx';
 
 export default function ScheduleLoader() {
     const {
@@ -7,15 +9,20 @@ export default function ScheduleLoader() {
         isLoading,
     } = useConferences();
 
+    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>}
     </>);
 }