src/App.jsx

@@ -1,8 +1,8 @@
 import './App.css';
-import ScheduleChooser from './ScheduleChooser.jsx';
+import ScheduleLoader from './ScheduleLoader.jsx';
 
 function App() {
-  return (<ScheduleChooser/>);
+  return (<ScheduleLoader/>);
 }
 
 export default App;

src/Schedule.jsx

@@ -17,7 +17,7 @@ export default function Schedule({
     } = useSchedule(conferenceId);
 
     return (<>
-        {isLoading && <>Loading... <progress value={loadingProgress} /></>}
+        {isLoading && <p>Loading... <progress value={loadingProgress} /></p>}
         {halls && <table border="1">
             <thead>
                 <tr>
@@ -25,9 +25,7 @@ export default function Schedule({
                 </tr>
             </thead>
         </table>}
-        {tracks && Object.entries(tracks).filter(([, track]) =>
+        {tracks && Object.entries(tracks).map(([trackId, track]) => <div key={trackId} style={{
-            !isTrackHidden(track)
-        ).map(([trackId, track]) => <div key={trackId} style={{
                 width: '100%',
                 border: '1px solid black',
                 textAlign: 'center',
@@ -87,6 +85,6 @@ export default function Schedule({
 }
 
 Schedule.propTypes = {
-    conferenceId: PropTypes.number.isRequired,
+    conferenceId: PropTypes.string.isRequired,
     lang: PropTypes.string.isRequired,
 };

src/ScheduleChooser.jsx

@@ -1,44 +0,0 @@
-import PropTypes from 'prop-types';
-import ScheduleLoader from './ScheduleLoader.jsx';
-
-export default function ScheduleChooser({
-    year = 2023,
-    lang = 'bg',
-}) {
-    /*
-    const {
-        data,
-        error,
-        isLoading,
-    } = useConferences();
-
-    const conferences = useMemo(() => Array.isArray(data) ? data.sort(dateSorter('start_date')) : data, [data]);
-
-    const [ selectedConferenceId, setSelectedConferenceId ] = useState();
-    const [ selectedLang, setSelectedLang ] = useState(lang);
-
-    return (<>
-        <div>
-            <select onChange={e => setSelectedLang(e.target.value)}>
-                {Object.entries(langs).map(([langId, langName]) => <option key={langId} value={langId}>{langName}</option>)}
-            </select>
-        </div>
-        {isLoading && <p>Please wait...</p>}
-        {error && <p>Error: {error}</p>}
-        {conferences && <>
-            <label>Select a conference</label>
-            <select onChange={e => setSelectedConferenceId(e.target.value)}>
-                {conferences.map(conference => <option key={conference.id}
-                                                       value={conference.id}>{conference.title}</option>)}
-            </select>
-        </>}
-        <ScheduleLoader year={year} lang={selectedLang} />
-    </>);
-    */
-    return (<ScheduleLoader year={year} lang={lang} />);
-}
-
-ScheduleChooser.propTypes = {
-    year: PropTypes.number,
-    lang: PropTypes.string,
-};

src/ScheduleLoader.jsx

@@ -1,31 +1,36 @@
 import useConferences from './hooks/useConferences.js';
+import { useMemo, useState } from 'react';
 import Schedule from './Schedule.jsx';
-import PropTypes from 'prop-types';
+import { dateSorter } from './utils.js';
-import { useMemo } from 'react';
+import { langs } from './constants.js';
 
-export default function ScheduleLoader({
+export default function ScheduleLoader() {
-    year,
-    lang,
-}) {
     const {
         data,
         error,
         isLoading,
     } = useConferences();
 
-    const conferenceId = useMemo(() => data && data.filter(conference => {
+    const conferences = useMemo(() => Array.isArray(data) ? data.sort(dateSorter('start_date')) : data, [data]);
-        const dt = new Date(Date.parse(conference.start_date));
+
-        return dt.getFullYear() === year;
+    const [ conferenceId, setConferenceId ] = useState();
-    })?.[0]?.id, [data, year]);
+    const [ lang, setLang ] = useState();
 
     return (<>
-        {isLoading && <p>Loading conferences...</p>}
+        <div>
-        {error && <p>Error loading conferences: {error}</p>}
+            <select onChange={e => setLang(e.target.value)}>
+                {Object.entries(langs).map(([langId, langName]) => <option key={langId} value={langId}>{langName}</option>)}
+            </select>
+        </div>
+        {isLoading && <p>Please wait...</p>}
+        {error && <p>Error: {error}</p>}
+        {conferences && <>
+            <label>Select a conference</label>
+            <select onChange={e => setConferenceId(e.target.value)}>
+                {conferences.map(conference => <option key={conference.id}
+                                                       value={conference.id}>{conference.title}</option>)}
+            </select>
+        </>}
         {conferenceId && <Schedule conferenceId={conferenceId} lang={lang} />}
     </>);
 }
-
-ScheduleLoader.propTypes = {
-    year: PropTypes.number,
-    lang: PropTypes.string,
-};