Site
/
schedule
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Normalize API responses before parsing/rendering

This commit is contained in:
Vencislav Atanasov 2024-09-23 18:15:16 +03:00
parent acbe54a325
commit 70b1b36852
4 changed files with 30 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/Schedule/Schedule.jsx
View File

@ -41,7 +41,7 @@ export default function Schedule({
return (<>
{isComplete && <select value={eventTypeId} onChange={e => setEventTypeId(parseInt(e.target.value, 10))}>
<option value={0}>All event types</option>
{Object.values(eventTypes).map(eventType =>
{eventTypes.map(eventType =>
<option key={eventType.id} value={eventType.id}>{eventType.name[lang]}</option>)}
</select>}
{isLoading && <progress value={loadingProgress}/>}
@ -69,9 +69,7 @@ export default function Schedule({
<div className="separator"/>
<table>
<tbody>
{Object.values(tracks).filter(track =>
!isTrackHidden(track)
).map(track => <tr key={track.id}>
{tracks.filter(track => !isTrackHidden(track)).map(track => <tr key={track.id}>
<td className={track.css_class}>{track.name[lang]}</td>
</tr>)}
{Object.entries(langs).map(([langId, langName]) => <tr key={langId}>
@ -80,7 +78,7 @@ export default function Schedule({
</tbody>
</table>
<div className="separator" />
{Object.values(events).map(event => <section key={event.id} id={'event-'.concat(event.id)}>
{events.map(event => <section key={event.id} id={'event-'.concat(event.id)}>
<p>
<strong>{event.title}</strong>
{event.participant_users && !isTrackHidden(event.track) && <>
@ -99,13 +97,13 @@ export default function Schedule({
</section>)}
{<>
<div className="grid members">
{Object.values(speakers).map(speaker => <div key={speaker.id} className="col4 wmember">
{speakers.map(speaker => <div key={speaker.id} className="col4 wmember">
<a href={'#'.concat(speaker.id)}>
<img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)} />
</a>
</div>)}
</div>
{Object.values(speakers).map(speaker => <Fragment key={speaker.id}>
{speakers.map(speaker => <Fragment key={speaker.id}>
<div className="speaker" id={'speaker-'.concat(speaker.id)}>
<img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)}/>
<h3>{getSpeakerName(speaker)}</h3>

14
src/hooks/useSchedule.js
View File

@ -4,7 +4,7 @@ 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, normalizeResponse } from '../utils.js';
import { useMemo } from 'react';
export default function useSchedule(conferenceId) {
@ -14,7 +14,7 @@ export default function useSchedule(conferenceId) {
isValidating: speakersValidating,
} = useSpeakers(conferenceId);
const speakers = useMemo(() => addIdAndRelations(speakersResponse || []), [speakersResponse]);
const speakers = useMemo(() => normalizeResponse(speakersResponse), [speakersResponse]);
const {
data: tracksResponse,
@ -22,7 +22,7 @@ export default function useSchedule(conferenceId) {
isValidating: tracksValidating,
} = useTracks(conferenceId);
const tracks = useMemo(() => addIdAndRelations(tracksResponse || []), [tracksResponse]);
const tracks = useMemo(() => normalizeResponse(tracksResponse), [tracksResponse]);
const {
data: eventTypesResponse,
@ -30,7 +30,7 @@ export default function useSchedule(conferenceId) {
isValidating: eventTypesValidating,
} = useEventTypes(conferenceId);
const eventTypes = useMemo(() => addIdAndRelations(eventTypesResponse || []), [eventTypesResponse]);
const eventTypes = useMemo(() => normalizeResponse(eventTypesResponse), [eventTypesResponse]);
const {
data: hallsResponse,
@ -38,7 +38,7 @@ export default function useSchedule(conferenceId) {
isValidating: hallsValidating,
} = useHalls(conferenceId);
const halls = useMemo(() => addIdAndRelations(hallsResponse || []), [hallsResponse]);
const halls = useMemo(() => normalizeResponse(hallsResponse), [hallsResponse]);
const {
data: eventsResponse,
@ -46,7 +46,7 @@ export default function useSchedule(conferenceId) {
isValidating: eventsValidating,
} = useEvents(conferenceId);
const events = useMemo(() => addIdAndRelations(eventsResponse || [], [
const events = useMemo(() => normalizeResponse(eventsResponse, [
['event_type', eventTypes, 'event_type_id'],
['track', tracks, 'track_id'],
['participant_users', speakers, 'participant_user_ids'],
@ -58,7 +58,7 @@ export default function useSchedule(conferenceId) {
isValidating: slotsValidating,
} = useSlots(conferenceId);
const slots = useMemo(() => addIdAndRelations(slotsResponse || [], [
const slots = useMemo(() => normalizeResponse(slotsResponse, [
['hall', halls, 'hall_id'],
['event', events, 'event_id'],
]), [slotsResponse, halls, events]);

8
src/hooks/useScheduleTable.js
View File

@ -6,10 +6,10 @@ export default function useScheduleTable({
events = {},
slots = {},
}) {
const filteredEvents = useMemo(() => Object.values(events).filter(event => eventTypeId > 0 ? event.event_type_id === eventTypeId : true), [eventTypeId, events]);
const filteredEventIds = useMemo(() => new Set(filteredEvents.map(event => event.id)), [filteredEvents]);
const filteredHallIds = useMemo(() => new Set(Object.values(slots).filter(slot => filteredEventIds.has(slot.event_id)).map(slot => slot.hall_id)), [filteredEventIds, slots]);
const header = useMemo(() => Object.values(halls).filter(hall => filteredHallIds.has(hall.id)), [filteredHallIds, halls]);
const filteredEvents = useMemo(() => events.filter(event => eventTypeId > 0 ? event.event_type_id === eventTypeId : true), [eventTypeId, events]);
const filteredEventIds = useMemo(() => filteredEvents.map(event => event.id), [filteredEvents]);
const filteredHallIds = useMemo(() => new Set(slots.filter(slot => filteredEventIds.includes(slot.event_id)).map(slot => slot.hall_id)), [filteredEventIds, slots]);
const header = useMemo(() => halls.filter(hall => filteredHallIds.has(hall.id)), [filteredHallIds, halls]);
const rows = filteredEvents.map(event => ({
id: event.id,

21
src/utils.js
View File

@ -42,14 +42,19 @@ export function calculateProgress(...elements) {
};
}
export const addIdAndRelations = (items, relations = []) =>
Object.fromEntries(Object.entries(items).map(([id, item]) =>
([id, {
export const normalizeResponse = (items = [], relations = []) =>
Object.entries(items).map(([id, item]) =>
({
id: parseInt(id, 10),
...item,
...Object.fromEntries(relations.map(([field, collection, idField]) => ([
...Object.fromEntries(relations.map(([field, collection, idField]) => {
const key = item[idField];
const fn = Array.isArray(key) ? 'filter' : 'find';
return [
field,
Array.isArray(item[idField]) ? item[idField].map(id => collection[id]) : collection[item[idField]],
]))),
}])
));
collection[fn](item => item.id === key),
];
})),
})
);