Merge pull request #30 from Dunkstormen/main

blt950 · web-flow · commit 9788bb3d9958 · 2024-12-14T21:10:20.000+01:00
Feat: Resolved booking mismatch &amp; updated react to CR
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,35 +10,33 @@
         "astro": "astro"
     },
     "dependencies": {
-        "@astrojs/check": "^0.5.4",
-        "@astrojs/react": "^3.0.10",
+        "@astrojs/check": "^0.9.4",
+        "@astrojs/react": "^4.1.0",
         "@astrojs/tailwind": "^5.1.0",
         "@maptiler/sdk": "^2.0.1",
         "@nextui-org/react": "^2.2.10",
         "@radix-ui/react-navigation-menu": "^1.1.4",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-tooltip": "^1.1.2",
-        "@types/react": "^18.2.55",
-        "@types/react-dom": "^18.2.19",
-        "astro": "^4.4.0",
+        "@types/react": "^19.0.1",
+        "@types/react-dom": "^19.0.2",
+        "astro": "^5.0.5",
         "astro-navbar": "^2.3.1",
         "astro-tooltips": "^0.6.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "framer-motion": "^11.0.8",
-        "lucide-react": "^0.383.0",
+        "lucide-react": "^0.468.0",
         "moment": "^2.30.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-simple-maps": "^3.0.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
         "react-snowfall": "^2.2.0",
         "tailwind-merge": "^2.3.0",
         "tailwindcss": "^3.4.1",
         "tailwindcss-animate": "^1.0.7",
         "typescript": "^5.3.3"
     },
     "devDependencies": {
-        "@types/react-simple-maps": "^3.0.4",
         "daisyui": "^4.10.2"
     }
 }
diff --git a/src/components/Announcements.tsx b/src/components/Announcements.tsx
@@ -1,5 +1,3 @@
-import React, { useState, useEffect } from 'react';
-
 async function PullForumData(URL: string) {
   try {
     const response = await fetch(URL);
diff --git a/src/components/BookingComponent.jsx b/src/components/BookingComponent.jsx
@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from "react";
+
+
+const BookingComponent = () => {
+    const [ControlCenterBookings, setControlCenterBookings] = useState([]);
+    const [ControlCenterPositions, setControlCenterPositions] = useState([]);
+    const [VatsimNetworkSessions, setVatsimNetworkSessions] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    /**
+     * Fetch data
+     */
+    const fetchComponentData = async () => {
+        try {
+            let [ControlCenterBookingsData, ControlCenterPositionsData, VatsimNetworkSessionsData] = await Promise.all([
+                fetch('https://cc.vatsim-scandinavia.org/api/bookings'),
+                fetch('https://cc.vatsim-scandinavia.org/api/positions'),
+                fetch('https://data.vatsim.net/v3/vatsim-data.json'),
+            ]);
+
+            ControlCenterBookingsData = await ControlCenterBookingsData.json();
+            ControlCenterPositionsData = await ControlCenterPositionsData.json();
+            VatsimNetworkSessionsData = await VatsimNetworkSessionsData.json();
+
+            setControlCenterBookings(ControlCenterBookingsData);
+            setControlCenterPositions(ControlCenterPositionsData);
+            setVatsimNetworkSessions(VatsimNetworkSessionsData);
+        } catch (error) {
+            console.log('Error while fetching data:', error);
+        }
+    }
+
+    useEffect(() => {
+        const fetchData = async () => {
+            await Promise.all([
+                fetchComponentData(),
+            ]);
+            setLoading(false);
+        }
+
+        fetchData();
+
+        const interval = setInterval(fetchData, 60000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <table>
+            <tbody>
+                <tr></tr>
+            </tbody>
+        </table>
+      );
+};
+
+export default BookingComponent;
diff --git a/src/components/BookingComponentv3.jsx b/src/components/BookingComponentv3.jsx
@@ -59,6 +59,13 @@ const BookingComponent = () => {
           return correctedCallsign;
         }
 
+        function parseDateUTC(dateString) {
+          if (!dateString) return new Date(0); // Default to epoch for missing dates
+          // Replace space with 'T' and ensure 'Z' at the end for UTC
+          const formattedDate = dateString.replace(" ", "T");
+          return new Date(formattedDate.endsWith("Z") ? formattedDate : `${formattedDate}Z`);
+        }
+
         ControlCenterBookings.data.forEach(booking => {
           const bookingDate = new Date(booking.time_start).toISOString().split('T')[0];
           const dateIndex = dateArray.findIndex(dateObj => dateObj.date === bookingDate);
@@ -69,12 +76,15 @@ const BookingComponent = () => {
 
         VATSIMNetworkData.controllers.forEach(session => {
           if (acceptedFIRsRegex.test(session.callsign) && !mentorRegex.test(session.callsign)) {
-            const correctedCallsign = getBookableCallsign(session.callsign, session.frequency);
+            const normalizeCallsign = (callsign) => callsign.replace(/_+/g, "_");
+            const correctedCallsign = getBookableCallsign(normalizeCallsign(session.callsign), session.frequency);
             session.callsign = correctedCallsign;
             const existingBooking = dateArray[0].data.find(booking => booking.callsign === session.callsign);
             // Merge if existing booking exists and now is after the booking start time.
-            if (existingBooking && existingBooking.time_start > new Date()) {
+
+            if (existingBooking && parseDateUTC(existingBooking.time_start).getTime() < new Date().getTime()) {
               existingBooking.name = session.name;
+              existingBooking.logon_time = session.logon_time;
             } else {
               dateArray[0].data.push({
           ...session,
@@ -86,8 +96,9 @@ const BookingComponent = () => {
 
         // Sort the first date (in most cases today) by time, so ad-hoc sessions also are sorted correctly.
         dateArray[0].data.sort((a, b) => {
-          const aTime = a.time_start || a.logon_time;
-          const bTime = b.time_start || b.logon_time;
+          const aTime = parseDateUTC(a.time_start || a.logon_time).getTime();
+          const bTime = parseDateUTC(b.time_start || b.logon_time).getTime();
+
           return new Date(aTime) - new Date(bTime);
         });
 
@@ -124,9 +135,9 @@ const BookingComponent = () => {
               </tr>
               {date.data.map((booking) => (
                 <tr key={booking.id} className="h-6 even:bg-gray-50 odd:bg-white dark:even:bg-tertiary dark:odd:bg-black">
-                  {booking.name ? <td className="pl-[4px] text-[#447b68] font-bold"><img class="circle" src="img/icons/circle-solid.svg" alt=""/> {booking.callsign}</td> : <td className="pl-[4px]"><img class="circle" src="img/icons/circle-regular.svg" alt=""/> {booking.callsign}</td>}
-                  <td className="pl-[4px]">{bookingType(booking)}</td>
-                  <td className="pl-[4px]">{booking.time_start ? convertZulu(booking.time_start) : ""}{booking.logon_time ? convertZulu(fixNetworkTime(booking.logon_time)) : ""}</td>
+                  {booking.name ? <td className="pl-[4px] text-[#447b68] font-bold"><img className="circle" src="img/icons/circle-solid.svg" alt=""/> {booking.callsign}</td> : <td className="pl-[4px]"><img className="circle" src="img/icons/circle-regular.svg" alt=""/> {booking.callsign}</td>}
+                  <td className="px-[15px]">{bookingType(booking)}</td>
+                  <td className="pl-[4px]">{booking.time_start && !booking.logon_time ? convertZulu(booking.time_start) : ""}{booking.logon_time ? convertZulu(fixNetworkTime(booking.logon_time)) : ""}</td>
                   <td className="pl-[4px]">{convertZulu(booking.time_end)}</td>
                 </tr>
               ))}
diff --git a/src/components/Events.jsx b/src/components/Events.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 const Events = () => {
     const [events, setEvents] = useState([]);
diff --git a/src/utils/bookingType.tsx b/src/utils/bookingType.tsx
@@ -1,10 +1,10 @@
 function bookingType(booking: any) {
     if (booking.training === 1) {
-        return <span className="bg-[#1a475f] text-xs text-white px-2 py-[2px] rounded-md flex items-center justify-center w-fit">Training</span>
+        return <span className="bg-[#1a475f] text-xs text-white px-2 py-[2px] rounded-md flex items-center justify-center">Training</span>
     } else if (booking.event === 1) {
-        return <span className="bg-[#41826e] text-xs text-white px-2 py-[2px] rounded-md flex items-center justify-center w-fit">Event</span>
+        return <span className="bg-[#41826e] text-xs text-white px-2 py-[2px] rounded-md flex items-center justify-center">Event</span>
     } else if (booking.exam === 1) {
-        return <span className="bg-[#b63f3f] text-xs text-white px-2 py-[2px] rounded-md flex items-center justify-center w-fit">Exam</span>
+        return <span className="bg-[#b63f3f] text-xs text-white px-2 py-[2px] rounded-md flex items-center justify-center">Exam</span>
     } else {
         return ""
     }

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-import React, { useState, useEffect } from 'react';`
`2`		`-`
`3`	`1`	`async function PullForumData(URL: string) {`
`4`	`2`	`try {`
`5`	`3`	`const response = await fetch(URL);`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import React, { useEffect, useState, useRef } from 'react';`
	`1`	`+import { useEffect, useState, useRef } from 'react';`
`2`	`2`
`3`	`3`	`const Events = () => {`
`4`	`4`	`const [events, setEvents] = useState([]);`