From 86833b5276c21b9eb5d5de4bdb09250499acd77d Mon Sep 17 00:00:00 2001
From: Vencislav Atanasov <git@6bez10.info>
Date: Sun, 22 Sep 2024 02:30:16 +0300
Subject: [PATCH] Fix schedule chooser

---
 src/Schedule/Schedule.jsx        |  3 ++-
 src/Schedule/ScheduleChooser.jsx | 37 ++++++++++++++++----------------
 src/Schedule/utils.js            |  2 ++
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/Schedule/Schedule.jsx b/src/Schedule/Schedule.jsx
index e32534d..eeb851c 100644
--- a/src/Schedule/Schedule.jsx
+++ b/src/Schedule/Schedule.jsx
@@ -33,8 +33,9 @@ export default function Schedule({
     });
 
     return (<>
-        {isLoading && <>Loading... <progress value={loadingProgress} /></>}
+        {isLoading && <progress value={loadingProgress}/>}
         <div className="schedule">
+            <hr />
             {header && rows && <>
                 <table>
                     <thead>
diff --git a/src/Schedule/ScheduleChooser.jsx b/src/Schedule/ScheduleChooser.jsx
index 524b1e1..bc18e24 100644
--- a/src/Schedule/ScheduleChooser.jsx
+++ b/src/Schedule/ScheduleChooser.jsx
@@ -1,11 +1,12 @@
 import PropTypes from 'prop-types';
 import ScheduleLoader from './ScheduleLoader.jsx';
+import { langs } from './constants.js';
+import { useMemo, useState } from 'react';
+import { dateSorter } from '../utils.js';
+import useConferences from '../hooks/useConferences.js';
+import { getConferenceYear } from './utils.js';
 
-export default function ScheduleChooser({
-    year = 2023,
-    lang = 'bg',
-}) {
-    /*
+export default function ScheduleChooser() {
     const {
         data,
         error,
@@ -14,28 +15,26 @@ export default function ScheduleChooser({
 
     const conferences = useMemo(() => Array.isArray(data) ? data.sort(dateSorter('start_date')) : data, [data]);
 
-    const [ selectedConferenceId, setSelectedConferenceId ] = useState();
-    const [ selectedLang, setSelectedLang ] = useState(lang);
+    const [ year, setYear ] = useState(2023);
+    const [ lang, setLang ] = useState('bg');
 
     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 value={year} onChange={e => setYear(parseInt(e.target.value, 10))}>
+                {conferences.map(conference =>
+                    <option key={conference.id} value={getConferenceYear(conference)}>{conference.title}</option>)}
             </select>
         </>}
-        <ScheduleLoader year={year} lang={selectedLang} />
+        {Object.entries(langs).map(([langId, langName]) =>
+            <label key={langId}>
+                <input type="radio" checked={langId === lang} onChange={e =>
+                    setLang(e.target.value)} name="lang" value={langId} />
+                {langName}
+            </label>)}
+        <ScheduleLoader year={year} lang={lang} />
     </>);
-    */
-    return (<ScheduleLoader year={year} lang={lang} />);
 }
 
 ScheduleChooser.propTypes = {
diff --git a/src/Schedule/utils.js b/src/Schedule/utils.js
index 4c2dab7..971c6b0 100644
--- a/src/Schedule/utils.js
+++ b/src/Schedule/utils.js
@@ -1,3 +1,5 @@
+export const getConferenceYear = conference => (new Date(conference.start_date)).getFullYear();
+
 export const getSpeakerName = speaker => speaker.first_name.concat(' ').concat(speaker.last_name);
 
 export const isTrackHidden = track => track.name.en === 'Other' || track.name.bg === 'Други';