fix code style, use names from api instead of hardcoding for flatmates users

src/components/Flatastic/Flatastic.tsx

@@ -1,28 +1,27 @@
 import { useEffect } from "react";
 import { useFlatasticStore } from "@/store/flatastic";
 
-import type { FlatasticChore } from "@/types/flatasticChore";
+import type { FlatasticChore, FlatasticUser } from "@/types/flatasticChore";
 
 import style from "./style.module.css";
 
-const idToNameMap: Record<number, string> = {
-    1836104: "Gruber",
-    1836101: "Darius",
-    1593610: "Arif",
-    1860060: "Rishab",
-};
-
 export default function Flatastic() {
-    const fetchChores = useFlatasticStore((state) => state.fetch);
-    const chores = useFlatasticStore((state) => state.chores);
+    const fetchFlatasticData = useFlatasticStore((state) => state.fetch);
+    const flatasticData = useFlatasticStore((state) => state.flatasticData);
+    const chores = flatasticData?.chores;
+    const users = flatasticData?.users;
+    const idToNameMap: Record<number, string> = {};
+    users.forEach((user: FlatasticUser) => {
+        idToNameMap[user.id] = user.firstName;
+    });
 
     useEffect(() => {
-        fetchChores();
+        fetchFlatasticData();
         const interval = setInterval(() => {
-            fetchChores();
+            fetchFlatasticData();
         }, 60000);
         return () => clearInterval(interval);
-    }, [fetchChores]);
+    }, [fetchFlatasticData]);
 
     return (
         <div>