65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
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) => {
|
|
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={[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>
|
|
</div>
|
|
);
|
|
}
|