From 90924073edd4beff72fb919e35c67dac8b5f0b61 Mon Sep 17 00:00:00 2001 From: Michael Zhang Date: Mon, 24 Oct 2022 13:27:34 -0500 Subject: [PATCH] Changes --- components/EditBox.tsx | 1 - components/Layout.tsx | 19 ++++++++ components/Person.tsx | 3 +- components/ReceiptItem.tsx | 90 +++++++++++-------------------------- components/SplitBetween.tsx | 55 +++++++++++++++++++++++ pages/index.tsx | 8 +--- 6 files changed, 102 insertions(+), 74 deletions(-) create mode 100644 components/SplitBetween.tsx diff --git a/components/EditBox.tsx b/components/EditBox.tsx index f762c27..7523cc3 100644 --- a/components/EditBox.tsx +++ b/components/EditBox.tsx @@ -1,6 +1,5 @@ import { Atom, useAtom } from "jotai"; import { useState } from "react"; -import { Form } from "react-bootstrap"; import styled from "styled-components"; export interface Props { diff --git a/components/Layout.tsx b/components/Layout.tsx index 228c252..305bf51 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -12,6 +12,25 @@ export default function Layout({ children }) {
{children}
+ + ); } diff --git a/components/Person.tsx b/components/Person.tsx index de2029b..c424828 100644 --- a/components/Person.tsx +++ b/components/Person.tsx @@ -1,4 +1,4 @@ -import { Atom, useAtom } from "jotai"; +import { Atom, useAtom, WritableAtom } from "jotai"; import { Badge, ListGroup } from "react-bootstrap"; export interface IPerson { @@ -7,6 +7,7 @@ export interface IPerson { export interface Props { personAtom: Atom; + splitBetweenAtom: WritableAtom[]>; } export default function Person({ personAtom, splitBetweenAtom }: Props) { diff --git a/components/ReceiptItem.tsx b/components/ReceiptItem.tsx index 624c9cb..9cb3650 100644 --- a/components/ReceiptItem.tsx +++ b/components/ReceiptItem.tsx @@ -1,9 +1,9 @@ -import { atom, Atom, useAtom, useAtomValue } from "jotai"; -import { useState } from "react"; -import { Badge, Card, ListGroup } from "react-bootstrap"; +import { Atom, useAtom } from "jotai"; +import { Badge, Card } from "react-bootstrap"; import { receiptAtom } from "../lib/state"; import EditBox from "./EditBox"; -import Person, { IPerson } from "./Person"; +import { IPerson } from "./Person"; +import SplitBetween from "./SplitBetween"; export interface IReceiptItem { name: string; @@ -11,61 +11,14 @@ export interface IReceiptItem { splitBetween: Atom[]>; } -export interface Props { - itemAtom: Atom; -} - -function SplitBetween({ splitBetweenAtom }) { - const [splitBetween, setSplitBetween] = useAtom(splitBetweenAtom); - const [input, setInput] = useState(""); - const [editing, setEditing] = useState(false); - - const startEditing = (_) => { - setInput(""); - setEditing(true); - }; - - const addPerson = (e) => { - e.preventDefault(); - setSplitBetween([...splitBetween, atom({ name: input })]); - setEditing(false); - }; - - return ( -
- Split between ({splitBetween.length}): - - {splitBetween.map((a, i) => ( - - ))} - - {editing ? ( -
- setEditing(false)} - onInput={(e) => setInput(e.target.value)} - /> -
- ) : ( - "[+]" - )} -
-
-
- ); -} - function Price({ priceAtom }) { return ; } +export interface Props { + itemAtom: Atom; +} + export default function ReceiptItem({ itemAtom }: Props) { const [receipt, setReceipt] = useAtom(receiptAtom); const [item, _] = useAtom(itemAtom); @@ -76,17 +29,24 @@ export default function ReceiptItem({ itemAtom }: Props) { return ( + + +

{item.name}

+ + + + × + + +
+
+ - {item.name} - Item price: - - × -
diff --git a/components/SplitBetween.tsx b/components/SplitBetween.tsx new file mode 100644 index 0000000..413b6db --- /dev/null +++ b/components/SplitBetween.tsx @@ -0,0 +1,55 @@ +import { atom, Atom, useAtom } from "jotai"; +import { useState } from "react"; +import { ListGroup } from "react-bootstrap"; +import Person, { IPerson } from "./Person"; + +export interface Props { + splitBetweenAtom: Atom[]>; +} + +export default function SplitBetween({ splitBetweenAtom }: Props) { + const [splitBetween, setSplitBetween] = useAtom(splitBetweenAtom); + const [input, setInput] = useState(""); + const [editing, setEditing] = useState(false); + + const startEditing = (_) => { + setInput(""); + setEditing(true); + }; + + const addPerson = (e) => { + e.preventDefault(); + setSplitBetween([...splitBetween, atom({ name: input })]); + setEditing(false); + }; + + return ( +
+ Split between ({splitBetween.length}): + + {splitBetween.map((a, i) => ( + + ))} + + {editing ? ( +
+ setEditing(false)} + onInput={(e) => setInput(e.target.value)} + /> +
+ ) : ( + "[+]" + )} +
+
+
+ ); +} diff --git a/pages/index.tsx b/pages/index.tsx index 3c0027c..9992d6c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -42,7 +42,7 @@ const Home: NextPage = () => { placeholder="Add item..." onInput={(e) => setInput(e.target.value)} value={input} - style={{ padding: "8px", fontSize: "1.5em" }} + style={{ padding: "8px 16px", fontSize: "1.5em" }} /> @@ -70,12 +70,6 @@ const Home: NextPage = () => { )} - - - [source] - · - [license] - ); };