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

This commit is contained in:
Vencislav Atanasov 2024-09-19 13:16:08 +03:00
parent 3eaf86ba2d
commit 8a429b0a93
4 changed files with 64 additions and 25 deletions

View File

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

View File

@ -87,6 +87,6 @@ export default function Schedule({
} }
Schedule.propTypes = { Schedule.propTypes = {
conferenceId: PropTypes.string.isRequired, conferenceId: PropTypes.number.isRequired,
lang: PropTypes.string.isRequired, lang: PropTypes.string.isRequired,
}; };

44
src/ScheduleChooser.jsx Normal file
View File

@ -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,
};

View File

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