sort chores using due date, color tasks according to due level

src/components/Flatastic/Flatastic.tsx

@@ -8,7 +8,11 @@ import style from "./style.module.css";
 export default function Flatastic() {
     const fetchFlatasticData = useFlatasticStore((state) => state.fetch);
     const flatasticData = useFlatasticStore((state) => state.flatasticData);
-    const chores = flatasticData?.chores;
+    const chores = (flatasticData?.chores as FlatasticChore[]) || [];
+    chores.sort(
+        (a, b) =>
+            a.timeLeftNext - b.timeLeftNext && b.rotationTime - a.rotationTime,
+    );
     const users = flatasticData?.users;
     const idToNameMap: Record<number, string> = {};
     users.forEach((user: FlatasticUser) => {
@@ -23,19 +27,36 @@ export default function Flatastic() {
         return () => clearInterval(interval);
     }, [fetchFlatasticData]);
 
+    const choresRender = chores.map((chore) => {
+        let className = "";
+        let timeLeftInDays = null;
+
+        if (chore.rotationTime === -1) {
+            className = "irregular";
+        } else {
+            className = chore.timeLeftNext <= 0 ? "due" : "notDue";
+            timeLeftInDays = Math.abs(
+                Math.floor(chore.timeLeftNext / (60 * 60 * 24)),
+            );
+        }
+
+        return (
+            <li
+                key={chore.id}
+                className={[style.chore, style[className]].join(" ")}
+            >
+                <span className={style.userName}>
+                    {`${idToNameMap[chore.currentUser]}`}
+                </span>
+                : {chore.title} {timeLeftInDays} {"🪙".repeat(chore.points)}
+            </li>
+        );
+    });
+
     return (
         <div>
             <h1>Chores</h1>
-            <ul className={style.choreList}>
-                {chores.map((chore: FlatasticChore) => (
-                    <li key={chore.id} className={style.chore}>
-                        <span className={style.userName}>
-                            {idToNameMap[chore.currentUser]}
-                        </span>
-                        : {chore.title} - {"🪙".repeat(chore.points)}
-                    </li>
-                ))}
-            </ul>
+            <ul className={style.choreList}>{choresRender}</ul>
         </div>
     );
 }