diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 587f1b3821949826462ba0de87f1cccd4e781fa0..7681c3fed7e23e62ca5c4ac70b9cc6a2eecd741e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -158,49 +158,61 @@ function UpcomingUploads({ homepageData }: { homepageData: ResourceType<GetHomep ); } + let dates = []; // group by day/date + for (let lecture of data.upcoming_lectures) { + let date_parsed = new Date(lecture.time); + let date_string = date_parsed.toLocaleDateString([], { + weekday: "short", + year: "numeric", + month: "2-digit", + day: "2-digit", + }); + + let date_index = dates.findIndex((date) => date.date === date_string); + if (date_index === -1) { + dates.push({ date: date_string, lectures: [lecture] }); + } else { + dates[date_index].lectures.push(lecture); + } + } + return ( <ul className="list-group"> - {data.upcoming_lectures.map((lecture, index) => { - let date_parsed = new Date(lecture.time); - let course_data = data.courses_context[lecture.course_id]; - return ( - <li className="list-group-item" key={index}> - <strong> - { - //TODO splitting the date and time only makes sense, if the same dates are grouped - // format: Mo, 29.01.2024 - date_parsed.toLocaleDateString([], { - weekday: "short", - year: "numeric", - month: "2-digit", - day: "2-digit", - }) - } - </strong> - <ul className="list-group"> - <li - className="list-group-item list-group-item-condensed" - style={{ border: "none" }} - > - { - // only time (HH:MM) - date_parsed.toLocaleTimeString([], { - hour: "2-digit", - minute: "2-digit", - }) - }{" "} - <a href={`/${course_data.id_string}`}>{course_data.full_name}</a> - {": "} - <a href={`/${course_data.id_string}#lecture-${lecture.id}`}> - {lecture.title} - </a> - {lecture.location.length > 0 && ` (${lecture.location})`}{" "} - <LectureLiveLabel lecture={lecture} /> - </li> - </ul> - </li> - ); - })} + {dates.map((date, index) => ( + <li className="list-group-item" key={index}> + <strong>{date.date}</strong> + <ul className="list-group"> + {date.lectures.map((lecture, index) => { + let date_parsed = new Date(lecture.time); + let course_data = data.courses_context[lecture.course_id]; + return ( + <li + className="list-group-item list-group-item-condensed" + style={{ border: "none" }} + key={index} + > + { + // only time (HH:MM) + date_parsed.toLocaleTimeString([], { + hour: "2-digit", + minute: "2-digit", + }) + }{" "} + <a href={`/${course_data.id_string}`}> + {course_data.full_name} + </a> + {": "} + <a href={`/${course_data.id_string}#lecture-${lecture.id}`}> + {lecture.title} + </a> + {lecture.location.length > 0 && ` (${lecture.location})`}{" "} + <LectureLiveLabel lecture={lecture} /> + </li> + ); + })} + </ul> + </li> + ))} </ul> ); }