src/Schedule/Event.jsx

@@ -1,18 +1,11 @@
-import { isTrackHidden } from './utils.js';
+import PropTypes from 'prop-types';
-import Speaker from './Speaker.jsx';
-import FeedbackLink from './FeedbackLink.jsx';
 
-export default function Event(event) {
+export default function Event({
-    return (<>
+    title,
-        <a href={'#lecture-'.concat(event.id)}>{event.title}</a>
+}) {
-        <br />
+    return (<strong>{title}</strong>);
-        {event.participant_users && !isTrackHidden(event.track) && <>
-            {event.participant_users.map(speaker => speaker && <Speaker key={speaker.id} {...speaker} />)}
-        </>}
-        <p>
-            <i>
-                <FeedbackLink {...event} />
-            </i>
-        </p>
-    </>);
 }
+
+Event.propTypes = {
+    title: PropTypes.string.isRequired,
+};

src/Schedule/FeedbackLink.jsx

@@ -1,3 +0,0 @@
-export default function FeedbackLink(event) {
-    return (<a href={event.feedback_url}>Submit feedback</a>);
-}

src/Schedule/Schedule.jsx

@@ -7,8 +7,6 @@ import Event from './Event.jsx';
 import defaultSpeaker from '../assets/default-speaker.png';
 import './Schedule.scss';
 import { langs } from './constants.js';
-import Speaker from './Speaker.jsx';
-import FeedbackLink from './FeedbackLink.jsx';
 
 export default function Schedule({
     conferenceId,
@@ -22,7 +20,6 @@ export default function Schedule({
         slots,
         isLoading,
         loadingProgress,
-        isComplete,
     } = useSchedule(conferenceId);
 
     const {
@@ -30,7 +27,6 @@ export default function Schedule({
         rows,
     } = useScheduleTable({
         events,
-        tracks,
         halls,
         slots,
         lang,
@@ -38,46 +34,57 @@ export default function Schedule({
 
     return (<>
         {isLoading && <progress value={loadingProgress}/>}
-        {isComplete && <div className="schedule">
+        <div className="schedule">
             <hr />
-            <table>
+            {header && rows && <>
-                <thead>
+                <table>
-                    <tr>
+                    <thead>
-                        {header.map(hall => <th key={hall.id}>{hall.name}</th>)}
+                        <tr>
-                    </tr>
+                            {header.map(hall => <th key={hall.id}>{hall.name}</th>)}
-                </thead>
+                        </tr>
-                <tbody>
+                    </thead>
-                    {rows.map(row => <tr key={row.id}>
+                    <tbody>
-                        {row.cells.map(cell => <td key={cell.id} {...cell.attributes}>
+                        {rows.map(row => <tr key={row.id}>
-                            <Event {...cell.event} />
+                            {row.cells.map(cell => <td key={cell.id} {...cell.attributes}>
-                        </td>)}
+                                <Event {...cell.event} />
-                    </tr>)}
+                            </td>)}
-                </tbody>
+                        </tr>)}
-                <tfoot>
+                    </tbody>
-                    <tr>
+                    <tfoot>
-                        {header.map(hall => <th key={hall.id}>{hall.name}</th>)}
+                        <tr>
-                    </tr>
+                            {header.map(hall => <th key={hall.id}>{hall.name}</th>)}
-                </tfoot>
+                        </tr>
-            </table>
+                    </tfoot>
-            <div className="separator"/>
+                </table>
-            <table>
+                <div className="separator"/>
-                <tbody>
+            </>}
-                    {Object.entries(tracks).filter(([, track]) =>
+            {tracks && <>
-                        !isTrackHidden(track)
+                <table>
-                    ).map(([trackId, track]) => <tr key={trackId}>
+                    <tbody>
-                        <td className={track.css_class}>{track.name[lang]}</td>
+                        {Object.entries(tracks).filter(([, track]) =>
-                    </tr>)}
+                            !isTrackHidden(track)
-                    {Object.entries(langs).map(([code, name]) => <tr key={code}>
+                        ).map(([trackId, track]) => <tr key={trackId}>
-                        <td className={'schedule-'.concat(code)}>{name}</td>
+                            <td className={track.css_class}>{track.name[lang]}</td>
-                    </tr>)}
+                        </tr>)}
-                </tbody>
+                        {Object.entries(langs).map(([code, name]) => <tr key={code}>
-            </table>
+                            <td className={'schedule-'.concat(code)}>{name}</td>
-            <div className="separator" />
+                        </tr>)}
-            {Object.entries(events).map(([eventId, event]) => <section key={eventId} id={'lecture-'.concat(eventId)}>
+                    </tbody>
+                </table>
+                <div className="separator" />
+            </>}
+            {events && tracks && Object.entries(events).map(([eventId, event]) => <section key={eventId} id={'lecture-'.concat(eventId)}>
                 <p>
                     <strong>{event.title}</strong>
-                    {event.participant_users && !isTrackHidden(event.track) && <>
+                    {event.participant_user_ids && !isTrackHidden(tracks[event.track_id]) && speakers && <>
-                        ({event.participant_users.map(speaker => speaker && <Speaker key={speaker.id} {...speaker} />)})
+                        ({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 && <>
+                                /&#8288;{speakers[speakerId].organisation}&#8288;/
+                            </>}
+                        </Fragment>).filter(item => !!item)})
                     </>}
                 </p>
                 {event.abstract && <p>
@@ -85,12 +92,12 @@ export default function Schedule({
                 </p>}
                 <p className="feedback">
                     <strong>
-                        <FeedbackLink {...event} />
+                        <a href={event.feedback_url}>Submit feedback</a>
                     </strong>
                 </p>
                 <div className="separator" />
             </section>)}
-            {<>
+            {speakers && <>
                 <div className="grid members">
                     {Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId} className="col4 wmember">
                         <a href={'#'.concat(getSpeakerName(speaker))}>
@@ -115,7 +122,7 @@ export default function Schedule({
                     <div className="separator" />
                 </Fragment>)}
             </>}
-        </div>}
+        </div>
     </>);
 }
 

src/Schedule/Speaker.jsx

@@ -1,15 +0,0 @@
-import { getSpeakerName } from './utils.js';
-import PropTypes from 'prop-types';
-
-export default function Speaker(speaker) {
-    return (<>
-        <a href={'#'.concat(getSpeakerName(speaker))}>{getSpeakerName(speaker)}</a>
-        {speaker.organisation && <>/&#8288;{speaker.organisation}&#8288;/</>}
-    </>);
-}
-
-Speaker.propTypes = {
-    first_name: PropTypes.string.isRequired,
-    last_name: PropTypes.string.isRequired,
-    organisation: PropTypes.string,
-};

src/hooks/useSchedule.js

@@ -4,65 +4,45 @@ import useTracks from './useTracks.js';
 import useEventTypes from './useEventTypes.js';
 import useHalls from './useHalls.js';
 import useSlots from './useSlots.js';
-import { addIdAndRelations, calculateProgress } from '../utils.js';
+import { calculateProgress } from '../utils.js';
-import { useMemo } from 'react';
 
 export default function useSchedule(conferenceId) {
     const {
-        data: speakersResponse,
+        data: events,
-        isLoading: speakersLoading,
-        isValidating: speakersValidating,
-    } = useSpeakers(conferenceId);
-
-    const speakers = useMemo(() => addIdAndRelations(speakersResponse || []), [speakersResponse]);
-
-    const {
-        data: tracksResponse,
-        isLoading: tracksLoading,
-        isValidating: tracksValidating,
-    } = useTracks(conferenceId);
-
-    const tracks = useMemo(() => addIdAndRelations(tracksResponse || []), [tracksResponse]);
-
-    const {
-        data: eventTypesResponse,
-        isLoading: eventTypesLoading,
-        isValidating: eventTypesValidating,
-    } = useEventTypes(conferenceId);
-
-    const eventTypes = useMemo(() => addIdAndRelations(eventTypesResponse || []), [eventTypesResponse]);
-
-    const {
-        data: hallsResponse,
-        isLoading: hallsLoading,
-        isValidating: hallsValidating,
-    } = useHalls(conferenceId);
-
-    const halls = useMemo(() => addIdAndRelations(hallsResponse || []), [hallsResponse]);
-
-    const {
-        data: eventsResponse,
         isLoading: eventsLoading,
         isValidating: eventsValidating,
     } = useEvents(conferenceId);
 
-    const events = useMemo(() => addIdAndRelations(eventsResponse || [], [
+    const {
-        ['event_type', eventTypes, 'event_type_id'],
+        data: speakers,
-        ['track', tracks, 'track_id'],
+        isLoading: speakersLoading,
-        ['participant_users', speakers, 'participant_user_ids'],
+        isValidating: speakersValidating,
-    ]), [eventsResponse, eventTypes, tracks, speakers]);
+    } = useSpeakers(conferenceId);
 
     const {
-        data: slotsResponse,
+        data: tracks,
+        isLoading: tracksLoading,
+        isValidating: tracksValidating,
+    } = useTracks(conferenceId);
+
+    const {
+        data: eventTypes,
+        isLoading: eventTypesLoading,
+        isValidating: eventTypesValidating,
+    } = useEventTypes(conferenceId);
+
+    const {
+        data: halls,
+        isLoading: hallsLoading,
+        isValidating: hallsValidating,
+    } = useHalls(conferenceId);
+
+    const {
+        data: slots,
         isLoading: slotsLoading,
         isValidating: slotsValidating,
     } = useSlots(conferenceId);
 
-    const slots = useMemo(() => addIdAndRelations(slotsResponse || [], [
-        ['hall', halls, 'hall_id'],
-        ['event', events, 'event_id'],
-    ]), [slotsResponse, halls, events]);
-
     const {
         isStarted: isLoading,
         remainingProgress: loadingProgress,
@@ -73,10 +53,6 @@ export default function useSchedule(conferenceId) {
         remainingProgress: validatingProgress,
     } = calculateProgress(eventsValidating, speakersValidating, tracksValidating, eventTypesValidating, hallsValidating, slotsValidating);
 
-    const {
-        isComplete,
-    } = calculateProgress(events, speakers, tracks, eventTypes, halls, slots);
-
     return {
         events,
         speakers,
@@ -88,6 +64,5 @@ export default function useSchedule(conferenceId) {
         loadingProgress,
         isValidating,
         validatingProgress,
-        isComplete,
     };
 }

src/hooks/useScheduleTable.js

@@ -14,7 +14,6 @@ export default function useScheduleTable({
         cells: [{
             id: 1,
             attributes: {
-                className: 'schedule-'.concat(event.language).concat(' ').concat(event.track.css_class),
                 colSpan: 2,
             },
             event,

src/utils.js

@@ -41,15 +41,3 @@ export function calculateProgress(...elements) {
         isNotStarted: completeCount === 0,
     };
 }
-
-export const addIdAndRelations = (items, relations = []) =>
-    Object.fromEntries(Object.entries(items).map(([id, item]) =>
-        ([id, {
-            id,
-            ...item,
-            ...Object.fromEntries(relations.map(([field, collection, idField]) => ([
-                field,
-                Array.isArray(item[idField]) ? item[idField].map(id => collection[id]) : collection[item[idField]],
-            ]))),
-        }])
-    ));