replace redux with zustand

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