init commit

src/components/Timetable/Timetable.tsx

@@ -0,0 +1,77 @@
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchTimetable, type AppDispatch, type AppState } from "@/store/index";
+import { type DepartureList } from "@/types/types";
+
+import _ from "lodash";
+
+function parseTimetableData(data: DepartureList[]) {
+    const result = data.map((item) => {
+        const { dateTime } = item;
+        const hour = _.padStart(_.toString(dateTime.hour), 2, "0");
+        const minute = _.padStart(_.toString(dateTime.minute), 2, "0");
+        const dateTimeString = `${hour}:${minute}`;
+        return {
+            dateTimeString,
+            servingLine: {
+                number: item.servingLine.number,
+                name: item.servingLine.name,
+                direction: item.servingLine.direction,
+            },
+        };
+    });
+
+    return result;
+}
+
+export default function Timetable() {
+    const dispatch = useDispatch<AppDispatch>();
+    useEffect(() => {
+        const intervalID = setInterval(() => {
+            dispatch(fetchTimetable());
+        }, 60000); // Fetch every 60 seconds
+
+        return () => clearInterval(intervalID);
+    }, []);
+    const pStreet = useSelector((state: AppState) => state.timetable.pStreet);
+    const hStreet = useSelector((state: AppState) => state.timetable.hStreet);
+
+    const hStreetData = hStreet
+        ? parseTimetableData(hStreet.departureList)
+        : [];
+    const pStreetData = pStreet
+        ? parseTimetableData(pStreet.departureList)
+        : [];
+
+    return (
+        <div>
+            <h1>Timetable</h1>
+            <h2>H-Street Departures</h2>
+            <ul style={{ textAlign: "left" }}>
+                {hStreetData.map((departure, index) => (
+                    <li key={index}>
+                        {departure.dateTimeString} -{" "}
+                        {departure.servingLine?.name || "Unknown Line"}{" "}
+                        {departure.servingLine?.number || "Unknown Number"} (
+                        {departure.servingLine?.direction ||
+                            "Unknown Direction"}
+                        )
+                    </li>
+                ))}
+            </ul>
+            <h2>P-Street Departures</h2>
+            <ul style={{ textAlign: "left" }}>
+                {pStreetData.map((departure, index) => (
+                    <li key={index}>
+                        {departure.dateTimeString} -{" "}
+                        {departure.servingLine?.name || "Unknown Line"}{" "}
+                        {departure.servingLine?.number || "Unknown Number"} (
+                        {departure.servingLine?.direction ||
+                            "Unknown Direction"}
+                        )
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}