+ {times.map((time, rowIndex) => (
+
+
{time}
+ {days.map((day, colIndex) => {
+ // Only proceed if sessions are available
+ if (sessions.length === 0) {
+ return (
+
+ {/* You could also display some message like "No sessions" */}
+
+ );
+ }
+
+ const matchingSession = sessions.find((session) => {
+ return session.proposed_day === day && session.proposed_time === time;
+ });
+
+ if (matchingSession) {
+ const hasVoted = userVotes.has(matchingSession.id);
+ return (
+
{
+ if (!hasVoted) {
+ voteForSession(matchingSession.id);
+ }
+ }}
+ title={`${matchingSession.total_votes} vote(s)`}
+ >
+ {matchingSession.total_votes}
+
+ );
+ } else {
+ return (
+
+ {/* Empty cells for time slots without sessions */}
+
+ );
+ }
+ })}
+