fix sorting of chores

src/components/Flatastic/Flatastic.tsx

@@ -1,19 +1,53 @@
+import classNames from "classnames";
 import { useEffect } from "react";
 import { useFlatasticStore } from "@/store/flatastic";
-
 import type { FlatasticChore, FlatasticUser } from "@/types/flatasticChore";
-
 import style from "./style.module.css";
 
+function choreItem(chore: FlatasticChore, idToNameMap: Record<number, string>) {
+    let className = "";
+    let timeLeftInDays = null;
+
+    if (chore.rotationTime === -1) {
+        className = "irregular";
+    } else {
+        className = chore.timeLeftNext <= 0 ? "due" : "notDue";
+        timeLeftInDays = (
+            <span className={style.timeLeft}>
+                {Math.abs(Math.floor(chore.timeLeftNext / (60 * 60 * 24)))}d
+            </span>
+        );
+    }
+
+    return (
+        <li
+            key={chore.id}
+            className={classNames(style.chore, style[className])}
+        >
+            <span className={style.userName}>
+                {`${idToNameMap[chore.currentUser]}`}
+            </span>
+            : {chore.title} {timeLeftInDays} {"🪙".repeat(chore.points)}
+        </li>
+    );
+}
+
 export default function Flatastic() {
     const fetchFlatasticData = useFlatasticStore((state) => state.fetch);
     const flatasticData = useFlatasticStore((state) => state.flatasticData);
     const chores = (flatasticData?.chores as FlatasticChore[]) || [];
+    const regularChores: FlatasticChore[] = [];
+    const irregularChores: FlatasticChore[] = [];
 
-    chores.sort(
+    chores.forEach((chore) => {
-        (a, b) =>
+        if (chore.rotationTime === -1) {
-            a.timeLeftNext - b.timeLeftNext && b.rotationTime - a.rotationTime,
+            irregularChores.push(chore);
-    );
+        } else {
+            regularChores.push(chore);
+        }
+    });
+
+    regularChores.sort((a, b) => a.lastDoneDate - b.lastDoneDate);
 
     const users = flatasticData?.users;
     const idToNameMap: Record<number, string> = {};
@@ -23,44 +57,28 @@ export default function Flatastic() {
 
     useEffect(() => {
         fetchFlatasticData();
+
         const interval = setInterval(() => {
             fetchFlatasticData();
         }, 60000);
+
         return () => clearInterval(interval);
     }, [fetchFlatasticData]);
 
-    const choresRender = chores.map((chore) => {
+    const regularChoresRender = regularChores.map((chore) => {
-        let className = "";
+        return choreItem(chore, idToNameMap);
-        let timeLeftInDays = null;
+    });
 
-        if (chore.rotationTime === -1) {
+    const irregularChoresRender = irregularChores.map((chore) => {
-            className = "irregular";
+        return choreItem(chore, idToNameMap);
-        } else {
-            className = chore.timeLeftNext <= 0 ? "due" : "notDue";
-            timeLeftInDays = (
-                <span className={style.timeLeft}>
-                    {Math.abs(Math.floor(chore.timeLeftNext / (60 * 60 * 24)))}d
-                </span>
-            );
-        }
-
-        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 className={style.container}>
             <h1>Chores</h1>
-            <ul className={style.choreList}>{choresRender}</ul>
+            <ul className={style.choreList}>
+                {[...regularChoresRender, ...irregularChoresRender]}
+            </ul>
         </div>
     );
 }

src/types/flatasticChore.ts

@@ -16,7 +16,7 @@ interface FlatasticChore {
     points: number;
     rotationTime: number;
     currentUser: number;
-    lastDoneDate: string;
+    lastDoneDate: number;
     timeLeftNext: number;
 }