WIP Rework conference loading, temporary remove the language and year chooser

src/App.jsx

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

src/Schedule.jsx

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

src/ScheduleChooser.jsx

@@ -0,0 +1,44 @@
+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,36 +1,31 @@
 import useConferences from './hooks/useConferences.js';
-import { useMemo, useState } from 'react';
 import Schedule from './Schedule.jsx';
-import { dateSorter } from './utils.js';
-import { langs } from './constants.js';
+import PropTypes from 'prop-types';
+import { useMemo } from 'react';
 
-export default function ScheduleLoader() {
+export default function ScheduleLoader({
+    year,
+    lang,
+}) {
     const {
         data,
         error,
         isLoading,
     } = useConferences();
 
-    const conferences = useMemo(() => Array.isArray(data) ? data.sort(dateSorter('start_date')) : data, [data]);
-
-    const [ conferenceId, setConferenceId ] = useState();
-    const [ lang, setLang ] = useState();
+    const conferenceId = useMemo(() => data && data.filter(conference => {
+        const dt = new Date(Date.parse(conference.start_date));
+        return dt.getFullYear() === year;
+    })?.[0]?.id, [data, year]);
 
     return (<>
-        <div>
-            <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>
-        </>}
+        {isLoading && <p>Loading conferences...</p>}
+        {error && <p>Error loading conferences: {error}</p>}
         {conferenceId && <Schedule conferenceId={conferenceId} lang={lang} />}
     </>);
 }
+
+ScheduleLoader.propTypes = {
+    year: PropTypes.number,
+    lang: PropTypes.string,
+};