Render tracks and events

src/Schedule.jsx

@@ -1,49 +1,64 @@
 import PropTypes from 'prop-types';
 import useSchedule from './hooks/useSchedule.js';
+import { getSpeakerName, isTrackHidden } from './utils.js';
+import { Fragment } from 'react';
 
 export default function Schedule({
     conferenceId,
+    lang,
 }) {
     const {
         events,
         speakers,
         tracks,
-        eventTypes,
-        halls,
-        slots,
         isLoading,
     } = useSchedule(conferenceId);
 
     return (<>
-        <div>conference id: {conferenceId}</div>
         {isLoading && <p>Loading...</p>}
-        {events && <>
+        <div>schedule goes here</div>
-            <div>events:</div>
+        {tracks && Object.entries(tracks).map(([trackId, track]) => <div key={trackId} style={{
-            <div>{JSON.stringify(events)}</div>
+                width: '100%',
+                border: '1px solid black',
+                textAlign: 'center',
+                margin: '4px 0',
+                padding: '4px 0',
+            }}>{track.name[lang]}
+        </div>)}
+        {events && Object.entries(events).map(([eventId, event]) => <section key={eventId} id={'lecture-'.concat(eventId)}>
+            <p>
+                <strong>{event.title}</strong>
+                {event.participant_user_ids && !isTrackHidden(tracks[event.track_id]) && speakers && <>
+                    ({event.participant_user_ids.map(speakerId => speakers[speakerId] && <Fragment key={speakerId}>
+                        <a key={speakerId} href={'#'.concat(getSpeakerName(speakers[speakerId]))}>
+                            {getSpeakerName(speakers[speakerId])}
+                        </a>
+                        {speakers[speakerId].organisation && <>
+                            /{speakers[speakerId].organisation}/
                         </>}
+                    </Fragment>).filter(item => !!item)})
+                </>}
+            </p>
+            {event.abstract && <p>
+                {event.abstract}
+            </p>}
+            <p style={{
+                textAlign: 'right',
+            }}>
+                <strong>
+                    <a href={event.feedback_url}>Submit feedback</a>
+                </strong>
+            </p>
+            <hr />
+        </section>)}
         {speakers && <>
             <div>speakers:</div>
             <div>{JSON.stringify(speakers)}</div>
         </>}
-        {tracks && <>
-            <div>tracks:</div>
-            <div>{JSON.stringify(tracks)}</div>
-        </>}
-        {eventTypes && <>
-            <div>event types:</div>
-            <div>{JSON.stringify(eventTypes)}</div>
-        </>}
-        {halls && <>
-            <div>halls:</div>
-            <div>{JSON.stringify(halls)}</div>
-        </>}
-        {slots && <>
-            <div>slots:</div>
-            <div>{JSON.stringify(slots)}</div>
-        </>}
     </>);
 }
 
 Schedule.propTypes = {
     conferenceId: PropTypes.string.isRequired,
+    lang: PropTypes.string.isRequired,
 };

src/ScheduleLoader.jsx

@@ -2,6 +2,7 @@ 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';
 
 export default function ScheduleLoader() {
     const {
@@ -13,8 +14,14 @@ export default function ScheduleLoader() {
     const conferences = useMemo(() => Array.isArray(data) ? data.sort(dateSorter('start_date')) : data, [data]);
 
     const [ conferenceId, setConferenceId ] = useState();
+    const [ lang, setLang ] = useState();
 
     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 && <>
@@ -24,8 +31,6 @@ export default function ScheduleLoader() {
                                                        value={conference.id}>{conference.title}</option>)}
             </select>
         </>}
-        {conferenceId && <div>
+        {conferenceId && <Schedule conferenceId={conferenceId} lang={lang} />}
-            <Schedule conferenceId={conferenceId} />
-        </div>}
     </>);
 }

src/constants.js

@@ -0,0 +1,4 @@
+export const langs = {
+    en: 'English',
+    bg: 'Български',
+};

src/utils.js

@@ -8,3 +8,7 @@ function sorter(a, b, fieldFn) {
 }
 
 export const dateSorter = key => (a, b) => sorter(a, b, item => Date.parse(item[key]));
+
+export const getSpeakerName = speaker => speaker.first_name.concat(' ').concat(speaker.last_name);
+
+export const isTrackHidden = track => track.name.en === 'Other' || track.name.bg === 'Други';