I have a queue of items I’m hydrating in a Cell, with the first item in the queue being the showcased item and the remaining being under a “next up” list. The Cell makes a GET request to a third-party API in the background to get the data based on this tutorial.
There is a countdown associated with each item in the queue, and I’m using react-countdown
to display this countdown for only the showcased element. When that countdown completes and the next item in the queue is to be showcased, I want the Cell to refresh and rehydrate as the prior data could be stale.
I’m quite new to both React and RedwoodJS so I’m not sure if this is something that should be handled based on the React lifecycle or Redwood APIs. I looked into calling refetch
, but kept getting errors. What do you recommend?
Below is a simplified snippet of my code:
const renderer = ({ hours, minutes, seconds, completed }) => {
if (completed) {
// do some refreshing here?
} else {
return <span>{hours}:{minutes}:{seconds}</span>
}
};
export const Success = ({ mapRotation }) => {
return (
<section>
<h2>
Currently <span class="current-map">{mapRotation.map}</span> <span class="current-map-time">for <Countdown date={mapRotation.next[0].start} renderer={renderer} />
</span>
</h2>
<h3>Schedule</h3>
<table className="schedule-table">
<thead>
<tr>
<th>Time</th>
<th>Map</th>
</tr>
</thead>
<tbody>
{
mapRotation.next.map(upcoming => {
let startTime = dayjs(upcoming.start);
return (
<tr>
<td>{startTime.format('MM/DD hh:mm A')}</td>
<td>{upcoming.map}</td>
</tr>
)
})
}
</tbody>
</table>
</section>
)
}