WIP Rework conference loading, temporary remove the language and year chooser
This commit is contained in:
parent
3eaf86ba2d
commit
8a429b0a93
|
@ -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;
|
||||
|
|
|
@ -87,6 +87,6 @@ export default function Schedule({
|
|||
}
|
||||
|
||||
Schedule.propTypes = {
|
||||
conferenceId: PropTypes.string.isRequired,
|
||||
conferenceId: PropTypes.number.isRequired,
|
||||
lang: PropTypes.string.isRequired,
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
};
|
|
@ -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,
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue