add flatastic api

src/components/Flatastic/Flatastic.tsx

@@ -0,0 +1,21 @@
+import fetchFlatasticChores from "@/store/thunks/fetchFlatasticChores";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { type AppDispatch } from "@/store/index";
+
+export default function Flatastic() {
+    const dispatch = useDispatch<AppDispatch>();
+    useEffect(() => {
+        const intervalID = setInterval(() => {
+            dispatch(fetchFlatasticChores());
+        }, 60000); // Fetch every 60 seconds
+
+        return () => clearInterval(intervalID);
+    }, []);
+
+    return (
+        <p>
+            Flatastic API Key: {import.meta.env.VITE_FLATTASTIC_API_KEY || "Not set"}
+        </p>
+    )
+}

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>
     );
 }

src/components/TimetableRow/TimetableRow.tsx

@@ -0,0 +1,23 @@
+import { type DepartureList } from "../../types/types";
+
+import styles from "./style.module.css";
+
+export default function TimetableRow({
+    departure,
+}: {
+    departure: DepartureList;
+}) {
+    const hour = String(departure.dateTime.hour).padStart(2, "0");
+    const minute = String(departure.dateTime.minute).padStart(2, "0");
+    const dateTimeString = `${hour}:${minute}`;
+    return (
+        <>
+            <tr className={styles.timetableRow}>
+                <td>{dateTimeString}</td>
+                <td>{departure.servingLine.name}</td>
+                <td>{departure.servingLine.number}</td>
+                <td>({departure.servingLine.direction})</td>
+            </tr>
+        </>
+    );
+}

src/components/TimetableRow/style.module.css

@@ -0,0 +1,3 @@
+.timetableRow {
+    text-align: left;
+}