From 8314c4daf8af28ac02b03c61aae3f7277906d56d Mon Sep 17 00:00:00 2001
From: Arif Hasanic <arif@hasanic.com>
Date: Wed, 3 Sep 2025 14:57:35 +0200
Subject: [PATCH] fix sorting of chores

---
 src/components/Flatastic/Flatastic.tsx | 82 ++++++++++++++++----------
 src/types/flatasticChore.ts            |  2 +-
 2 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/src/components/Flatastic/Flatastic.tsx b/src/components/Flatastic/Flatastic.tsx
index 270db81..1615215 100644
--- a/src/components/Flatastic/Flatastic.tsx
+++ b/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(
-        (a, b) =>
-            a.timeLeftNext - b.timeLeftNext && b.rotationTime - a.rotationTime,
-    );
+    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> = {};
@@ -23,44 +57,28 @@ export default function Flatastic() {
 
     useEffect(() => {
         fetchFlatasticData();
+
         const interval = setInterval(() => {
             fetchFlatasticData();
         }, 60000);
+
         return () => clearInterval(interval);
     }, [fetchFlatasticData]);
 
-    const choresRender = chores.map((chore) => {
-        let className = "";
-        let timeLeftInDays = null;
+    const regularChoresRender = regularChores.map((chore) => {
+        return choreItem(chore, idToNameMap);
+    });
 
-        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={[style.chore, style[className]].join(" ")}
-            >
-                <span className={style.userName}>
-                    {`${idToNameMap[chore.currentUser]}`}
-                </span>
-                : {chore.title} {timeLeftInDays} {"🪙".repeat(chore.points)}
-            </li>
-        );
+    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>
     );
 }
diff --git a/src/types/flatasticChore.ts b/src/types/flatasticChore.ts
index 11495a9..0f69788 100644
--- a/src/types/flatasticChore.ts
+++ b/src/types/flatasticChore.ts
@@ -16,7 +16,7 @@ interface FlatasticChore {
     points: number;
     rotationTime: number;
     currentUser: number;
-    lastDoneDate: string;
+    lastDoneDate: number;
     timeLeftNext: number;
 }