fix sorting of chores

src/components/Flatastic/Flatastic.tsx

@@ -1,35 +1,10 @@
+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";
 
-export default function Flatastic() {
-    const fetchFlatasticData = useFlatasticStore((state) => state.fetch);
-    const flatasticData = useFlatasticStore((state) => state.flatasticData);
-    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) => {
-        idToNameMap[user.id] = user.firstName;
-    });
-
-    useEffect(() => {
-        fetchFlatasticData();
-        const interval = setInterval(() => {
-            fetchFlatasticData();
-        }, 60000);
-        return () => clearInterval(interval);
-    }, [fetchFlatasticData]);
-
-    const choresRender = chores.map((chore) => {
+function choreItem(chore: FlatasticChore, idToNameMap: Record<number, string>) {
     let className = "";
     let timeLeftInDays = null;
 
@@ -47,7 +22,7 @@ export default function Flatastic() {
     return (
         <li
             key={chore.id}
-                className={[style.chore, style[className]].join(" ")}
+            className={classNames(style.chore, style[className])}
         >
             <span className={style.userName}>
                 {`${idToNameMap[chore.currentUser]}`}
@@ -55,12 +30,55 @@ export default function Flatastic() {
             : {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.forEach((chore) => {
+        if (chore.rotationTime === -1) {
+            irregularChores.push(chore);
+        } else {
+            regularChores.push(chore);
+        }
+    });
+
+    regularChores.sort((a, b) => a.lastDoneDate - b.lastDoneDate);
+
+    const users = flatasticData?.users;
+    const idToNameMap: Record<number, string> = {};
+    users.forEach((user: FlatasticUser) => {
+        idToNameMap[user.id] = user.firstName;
+    });
+
+    useEffect(() => {
+        fetchFlatasticData();
+
+        const interval = setInterval(() => {
+            fetchFlatasticData();
+        }, 60000);
+
+        return () => clearInterval(interval);
+    }, [fetchFlatasticData]);
+
+    const regularChoresRender = regularChores.map((chore) => {
+        return choreItem(chore, idToNameMap);
+    });
+
+    const irregularChoresRender = irregularChores.map((chore) => {
+        return choreItem(chore, idToNameMap);
     });
 
     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;
 }