wisesplit/pages/index.tsx

85 lines
2.1 KiB
TypeScript
Raw Normal View History

2022-10-24 19:00:16 +00:00
import { useAtom } from "jotai";
2022-10-24 07:10:52 +00:00
import type { NextPage } from "next";
import { useState } from "react";
2022-10-24 07:40:14 +00:00
import { Form } from "react-bootstrap";
2022-10-24 19:00:16 +00:00
import NumberEditBox from "../components/NumberEditBox";
import ReceiptItem from "../components/ReceiptItem";
import { moneyFormatter } from "../lib/formatter";
import { ParsedInputDisplay } from "../lib/parseInput";
2022-10-24 07:40:14 +00:00
import {
addLine,
receiptAtom,
receiptTotalAtom,
totalAtom,
} from "../lib/state";
2022-10-24 07:10:52 +00:00
const Home: NextPage = () => {
const [receipt, setReceipt] = useAtom(receiptAtom);
const [input, setInput] = useState("");
2022-10-24 19:00:16 +00:00
const [total] = useAtom(totalAtom);
const [calculated] = useAtom(receiptTotalAtom);
2022-10-24 07:10:52 +00:00
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
});
const add = (e) => {
e.preventDefault();
2022-10-24 07:40:14 +00:00
addLine(input, setReceipt);
2022-10-24 07:10:52 +00:00
setInput("");
return false;
};
return (
<main>
2022-10-24 07:40:14 +00:00
<h1>Items</h1>
2022-10-24 07:10:52 +00:00
2022-10-24 07:40:14 +00:00
<Form onSubmit={add}>
2022-10-24 07:10:52 +00:00
<ParsedInputDisplay input={input} />
2022-10-24 07:40:14 +00:00
<Form.Control
2022-10-24 07:18:22 +00:00
autoFocus={true}
2022-10-24 07:10:52 +00:00
type="text"
placeholder="Add item..."
onInput={(e) => setInput(e.target.value)}
value={input}
2022-10-24 18:27:34 +00:00
style={{ padding: "8px 16px", fontSize: "1.5em" }}
2022-10-24 07:10:52 +00:00
/>
2022-10-24 07:40:14 +00:00
</Form>
2022-10-24 07:10:52 +00:00
2022-10-24 07:18:22 +00:00
<div>
Receipt Total:
2022-10-24 19:00:16 +00:00
<span style={total < calculated.subtotal ? { color: "red" } : {}}>
<NumberEditBox
valueAtom={totalAtom}
formatter={moneyFormatter.format}
/>
</span>
2022-10-24 07:18:22 +00:00
</div>
{receipt.map((itemAtom, i) => {
return <ReceiptItem itemAtom={itemAtom} key={`receiptItem-${i}`} />;
})}
2022-10-24 07:10:52 +00:00
2022-10-24 19:00:16 +00:00
{calculated.totalMap.size > 0 && (
<>
<h3>Weighted Breakdown</h3>
<div>
<ul>
2022-10-24 19:00:16 +00:00
{[...calculated.totalMap.entries()].map(([person, value], i) => (
<li key={`breakdown-${i}`}>
<b>{person}</b>: {formatter.format(value)}
</li>
))}
</ul>
</div>
</>
)}
2022-10-24 07:10:52 +00:00
</main>
);
};
export default Home;