134 lines
3.9 KiB
TypeScript
134 lines
3.9 KiB
TypeScript
import classNames from "classnames";
|
|
import { useEffect } from "react";
|
|
import { useFlatasticStore } from "@/store/flatastic";
|
|
import type {
|
|
FlatasticChore,
|
|
FlatasticShoppingItem,
|
|
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 {
|
|
const negativeTimeFix = chore.timeLeftNext < 0 ? 1 : 0; // Floats are rounded down, so we need to add 1 to the days if the time is negative
|
|
const timeInDays =
|
|
Math.abs(chore.timeLeftNext) / (60 * 60 * 24) + negativeTimeFix;
|
|
|
|
const bigG = Math.trunc(timeInDays / 100);
|
|
const days = Math.trunc(timeInDays % 100);
|
|
|
|
timeLeftInDays = (
|
|
<span className={style.timeLeft}>
|
|
{bigG > 0 && `${bigG} g${bigG > 1 ? "s" : ""} `}
|
|
{days >= 0 && `${days} d`}
|
|
</span>
|
|
);
|
|
|
|
if (days === 0) {
|
|
className = "dueToday";
|
|
timeLeftInDays = <span className={style.timeLeft}>today</span>;
|
|
} else if (chore.timeLeftNext < 0) {
|
|
className = "due";
|
|
} else {
|
|
className = "notDue";
|
|
}
|
|
}
|
|
|
|
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);
|
|
|
|
console.log("flatasticData", 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);
|
|
});
|
|
|
|
const shoppingList = flatasticData?.shoppingList || [];
|
|
|
|
const shoppingListRender = shoppingList.map(
|
|
(item: FlatasticShoppingItem) => {
|
|
return shoppingItem(item);
|
|
},
|
|
);
|
|
const shoppingListContainer = shoppingList.length > 0 && (
|
|
<div className={style.shoppingListContainer}>
|
|
<h1>Shopping List</h1>
|
|
<ul className={style.shoppingList}>{shoppingListRender}</ul>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className={style.container}>
|
|
<div className={style.choreContainer}>
|
|
<h1>Chores</h1>
|
|
<ul className={style.choreList}>
|
|
{[...regularChoresRender, ...irregularChoresRender]}
|
|
</ul>
|
|
</div>
|
|
|
|
{shoppingListContainer}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function shoppingItem(item: FlatasticShoppingItem) {
|
|
return (
|
|
<li key={item.id} className={style.shoppingListItem}>
|
|
{item.itemName}
|
|
</li>
|
|
);
|
|
}
|