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 './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;
|
||||||
|
|
|
@ -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,
|
||||||
};
|
};
|
||||||
|
|
|
@ -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 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,
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in New Issue