Fix progress tracking of schedule, render participant users and feedback link using the newly created components

src/Schedule/Event.jsx

@@ -1,11 +1,18 @@
-import PropTypes from 'prop-types';
+import { isTrackHidden } from './utils.js';
+import Speaker from './Speaker.jsx';
+import FeedbackLink from './FeedbackLink.jsx';
 
-export default function Event({
-    title,
-}) {
-    return (<strong>{title}</strong>);
+export default function Event(event) {
+    return (<>
+        <a href={'#lecture-'.concat(event.id)}>{event.title}</a>
+        <br />
+        {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

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

src/Schedule/Schedule.jsx

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

src/Schedule/Speaker.jsx

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

src/hooks/useScheduleTable.js

@@ -14,6 +14,7 @@ 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,3 +41,15 @@ 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]],
+            ]))),
+        }])
+    ));