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 (); + return (); } 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 (<> +
+ +
+ {isLoading &&

Please wait...

} + {error &&

Error: {error}

} + {conferences && <> + + + } + + ); + */ + return (); +} + +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 (<> -
- -
- {isLoading &&

Please wait...

} - {error &&

Error: {error}

} - {conferences && <> - - - } + {isLoading &&

Loading conferences...

} + {error &&

Error loading conferences: {error}

} {conferenceId && } ); } + +ScheduleLoader.propTypes = { + year: PropTypes.number, + lang: PropTypes.string, +};