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