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>

src/components/Flatastic/style.module.css

@@ -1,22 +1,22 @@
 .choreList {
-  list-style-type: none;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+    list-style-type: none;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
 
-  gap: 10px;
-  padding: 10px 0;
+    gap: 10px;
+    padding: 10px 0;
 }
 
 .chore {
-  padding: 5px 10px;
-  text-align: left;
-  border-top: 2px solid white;
-  border-left: 2px solid white;
-  border-bottom: 2px solid #828282;
-  border-right: 2px solid #828282;
+    padding: 5px 10px;
+    text-align: left;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid #828282;
+    border-right: 2px solid #828282;
 }
 
 .userName {
-  font-weight: bold;
+    font-weight: bold;
 }