feat: sort activitites by starting timeslot (#94)

Author: NoeTerrier

src/components/Timetable.tsx

@@ -16,6 +16,23 @@ function timeToMinutes(time: string) {
   return hours * 60 + minutes + seconds / 60;
 }
 
+export function findStartTime(activity: ICBDActivity): number {
+  let startTime = 24 * 60;
+
+  if (activity.timeslots) {
+    const timeslots: Timeslot[] = JSON.parse(
+      JSON.stringify(activity.timeslots)
+    );
+
+    timeslots.forEach((t) => {
+      let tTime = timeToMinutes(t.start_time);
+      startTime = Math.min(tTime, startTime);
+    });
+  }
+
+  return startTime;
+}
+
 function generateHourEntries(
   startTime: number,
   endTime: number,

src/pages/icbd.tsx

@@ -3,7 +3,7 @@ import DirectusImage from "@/components/DirectusImage";
 import IcbdActivityCard from "@/components/IcbdActivityCard";
 import ParticlesComponent from "@/components/Particles";
 import TabTitle from "@/components/TabTitle";
-import { Timetable } from "@/components/Timetable";
+import { findStartTime, Timetable } from "@/components/Timetable";
 import { directus, getDirectusImageUrl, populateLayoutProps } from "@/directus";
 import { getTranslation, useTranslationTable } from "@/locales";
 import style from "@/styles/ICBDPage.module.scss";
@@ -187,9 +187,13 @@ export default function ICBDPage(
           <h1>{tt["icbd.activities"]}</h1>
 
           <div className={style.activitiesList}>
-            {props.activities.map((activity: ICBDActivity) => (
-              <IcbdActivityCard key={activity.id} activity={activity} />
-            ))}
+            {props.activities
+              .sort((a, b) => {
+                return findStartTime(a) - findStartTime(b);
+              })
+              .map((activity: ICBDActivity) => (
+                <IcbdActivityCard key={activity.id} activity={activity} />
+              ))}
           </div>
         </div>
       </div>