From 8a429b0a93dab72b5528a44b61ed5e1e17d8ccfb Mon Sep 17 00:00:00 2001
From: Vencislav Atanasov <git@6bez10.info>
Date: Thu, 19 Sep 2024 13:16:08 +0300
Subject: [PATCH] WIP Rework conference loading, temporary remove the language
 and year chooser

---
 src/App.jsx             |  4 ++--
 src/Schedule.jsx        |  2 +-
 src/ScheduleChooser.jsx | 44 +++++++++++++++++++++++++++++++++++++++++
 src/ScheduleLoader.jsx  | 39 ++++++++++++++++--------------------
 4 files changed, 64 insertions(+), 25 deletions(-)
 create mode 100644 src/ScheduleChooser.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 90deecb..23438fa 100644
--- a/src/App.jsx
+++ b/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;
diff --git a/src/Schedule.jsx b/src/Schedule.jsx
index 4960b81..20951be 100644
--- a/src/Schedule.jsx
+++ b/src/Schedule.jsx
@@ -87,6 +87,6 @@ export default function Schedule({
 }
 
 Schedule.propTypes = {
-    conferenceId: PropTypes.string.isRequired,
+    conferenceId: PropTypes.number.isRequired,
     lang: PropTypes.string.isRequired,
 };
diff --git a/src/ScheduleChooser.jsx b/src/ScheduleChooser.jsx
new file mode 100644
index 0000000..524b1e1
--- /dev/null
+++ b/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,
+};
diff --git a/src/ScheduleLoader.jsx b/src/ScheduleLoader.jsx
index 165bbda..b0da674 100644
--- a/src/ScheduleLoader.jsx
+++ b/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,
+};