add flatastic api

src/components/Timetable/Timetable.tsx

@@ -1,23 +1,19 @@
 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 {
+    fetchTimetable,
+    type AppDispatch,
+    type AppState,
+} from "../../store/index";
+import { type DepartureList } from "../../types/types";
+import TimetableRow from "../TimetableRow/TimetableRow";
 
 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,
-            },
+            ...item,
         };
     });
 
@@ -47,31 +43,21 @@ export default function Timetable() {
         <div>
             <h1>Timetable</h1>
             <h2>H-Street Departures</h2>
-            <ul style={{ textAlign: "left" }}>
+            <table>
+                <tbody>
                 {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>
+                    <TimetableRow key={index} departure={departure} />
                 ))}
-            </ul>
+                </tbody>
+            </table>
             <h2>P-Street Departures</h2>
-            <ul style={{ textAlign: "left" }}>
+            <table>
+                <tbody>
                 {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>
+                    <TimetableRow key={index} departure={departure} />
                 ))}
-            </ul>
+                </tbody>
+            </table>
         </div>
     );
 }