Group upcoming recordings by date, closes #69

src/pages/index.tsx

@@ -158,29 +158,38 @@ function UpcomingUploads({ homepageData }: { homepageData: ResourceType<GetHomep
         );
     }
 
-    return (
-        <ul className="list-group">
-            {data.upcoming_lectures.map((lecture, index) => {
+    let dates = []; // group by day/date
+    for (let lecture of data.upcoming_lectures) {
         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([], {
+        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);
         }
-                        </strong>
+    }
+
+    return (
+        <ul className="list-group">
+            {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)
@@ -189,7 +198,9 @@ function UpcomingUploads({ homepageData }: { homepageData: ResourceType<GetHomep
                                             minute: "2-digit",
                                         })
                                     }{" "}
-                                <a href={`/${course_data.id_string}`}>{course_data.full_name}</a>
+                                    <a href={`/${course_data.id_string}`}>
+                                        {course_data.full_name}
+                                    </a>
                                     {": "}
                                     <a href={`/${course_data.id_string}#lecture-${lecture.id}`}>
                                         {lecture.title}
@@ -197,11 +208,12 @@ function UpcomingUploads({ homepageData }: { homepageData: ResourceType<GetHomep
                                     {lecture.location.length > 0 && ` (${lecture.location})`}{" "}
                                     <LectureLiveLabel lecture={lecture} />
                                 </li>
-                        </ul>
-                    </li>
                             );
                         })}
                     </ul>
+                </li>
+            ))}
+        </ul>
     );
 }