replace redux with zustand

src/components/Flatastic/Flatastic.tsx

@@ -1,21 +1,38 @@
-import fetchFlatasticChores from "@/store/thunks/fetchFlatasticChores";
+import { useFlatasticStore } from "@/store/flatastic";
 import { useEffect } from "react";
-import { useDispatch } from "react-redux";
-import { type AppDispatch } from "@/store/index";
+
+import type { FlatasticChore } from "@/types/flatasticChore";
+
+const idToNameMap: Record<number, string> = {
+	1836104: "Gruber",
+	1836101: "Darius",
+	1593610: "Arif",
+	1860060: "Rishab",
+};
 
 export default function Flatastic() {
-    const dispatch = useDispatch<AppDispatch>();
-    useEffect(() => {
-        const intervalID = setInterval(() => {
-            dispatch(fetchFlatasticChores());
-        }, 60000); // Fetch every 60 seconds
+	const fetchChores = useFlatasticStore((state) => state.fetch);
+	const chores = useFlatasticStore((state) => state.chores);
 
-        return () => clearInterval(intervalID);
-    }, []);
+	useEffect(() => {
+		fetchChores();
+		const interval = setInterval(() => {
+			fetchChores();
+		}, 60000);
+		return () => clearInterval(interval);
+	}, [fetchChores]);
 
-    return (
-        <p>
-            Flatastic API Key: {import.meta.env.VITE_FLATTASTIC_API_KEY || "Not set"}
-        </p>
-    )
-}
+	return (
+		<div>
+			<h1>Flatastic Chores</h1>
+			<ul>
+				{chores.map((chore: FlatasticChore) => (
+					<li key={chore.id} style={{ textAlign: "left" }}>
+						{idToNameMap[chore.currentUser]}: {chore.title} - Points:{" "}
+						{chore.points}
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+}

src/components/Timetable/Timetable.tsx

@@ -1,63 +1,56 @@
 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 TimetableRow from "../TimetableRow/TimetableRow";
 
 import _ from "lodash";
+import { useKVVStore } from "@/store/kvv";
+import type { DepartureType } from "@/types/departureType";
 
-function parseTimetableData(data: DepartureList[]) {
-    const result = data.map((item) => {
-        return {
-            ...item,
-        };
-    });
+function parseTimetableData(data: DepartureType[]) {
+	const result = data.map((item) => {
+		return {
+			...item,
+		};
+	});
 
-    return result;
+	return result;
 }
 
 export default function Timetable() {
-    const dispatch = useDispatch<AppDispatch>();
-    useEffect(() => {
-        const intervalID = setInterval(() => {
-            dispatch(fetchTimetable());
-        }, 60000); // Fetch every 60 seconds
+	const fetchTimetable = useKVVStore((state) => state.fetch);
+	const pStreet = useKVVStore((state) => state.pStreet);
+	const hStreet = useKVVStore((state) => state.hStreet);
 
-        return () => clearInterval(intervalID);
-    }, []);
-    const pStreet = useSelector((state: AppState) => state.timetable.pStreet);
-    const hStreet = useSelector((state: AppState) => state.timetable.hStreet);
+	useEffect(() => {
+		fetchTimetable();
+		const interval = setInterval(() => {
+			fetchTimetable();
+		}, 60000);
+		return () => clearInterval(interval);
+	}, [fetchTimetable]);
 
-    const hStreetData = hStreet
-        ? parseTimetableData(hStreet.departureList)
-        : [];
-    const pStreetData = pStreet
-        ? parseTimetableData(pStreet.departureList)
-        : [];
+	const hStreetData = parseTimetableData(hStreet.departureList || []);
+	const pStreetData = parseTimetableData(pStreet.departureList || []);
 
-    return (
-        <div>
-            <h1>Timetable</h1>
-            <h2>H-Street Departures</h2>
-            <table>
-                <tbody>
-                {hStreetData.map((departure, index) => (
-                    <TimetableRow key={index} departure={departure} />
-                ))}
-                </tbody>
-            </table>
-            <h2>P-Street Departures</h2>
-            <table>
-                <tbody>
-                {pStreetData.map((departure, index) => (
-                    <TimetableRow key={index} departure={departure} />
-                ))}
-                </tbody>
-            </table>
-        </div>
-    );
+	return (
+		<div>
+			<h1>Timetable</h1>
+			<h2>H-Street Departures</h2>
+			<table>
+				<tbody>
+					{hStreetData.map((departure, index) => (
+						<TimetableRow key={index} departure={departure} />
+					))}
+				</tbody>
+			</table>
+			<h2>P-Street Departures</h2>
+			<table>
+				<tbody>
+					{pStreetData.map((departure, index) => (
+						<TimetableRow key={index} departure={departure} />
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
 }

src/components/TimetableRow/TimetableRow.tsx

@@ -1,23 +1,22 @@
-import { type DepartureList } from "../../types/types";
+import type { DepartureType } from "@/types/departureType";
 
 import styles from "./style.module.css";
 
 export default function TimetableRow({
-    departure,
+	departure,
 }: {
-    departure: DepartureList;
+	departure: DepartureType;
 }) {
-    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>
-        </>
-    );
+	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

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