wisesplit/components/SplitBetween.tsx

56 lines
1.5 KiB
TypeScript
Raw Normal View History

2022-10-25 18:26:48 +00:00
import { atom, PrimitiveAtom, useAtom } from "jotai";
import { SyntheticEvent, useState } from "react";
import { Button, Form } from "react-bootstrap";
2022-10-24 18:27:34 +00:00
import Person, { IPerson } from "./Person";
export interface Props {
2022-10-25 18:26:48 +00:00
splitBetweenAtom: PrimitiveAtom<PrimitiveAtom<IPerson>[]>;
2022-10-24 18:27:34 +00:00
}
export default function SplitBetween({ splitBetweenAtom }: Props) {
const [splitBetween, setSplitBetween] = useAtom(splitBetweenAtom);
const [input, setInput] = useState("");
const [editing, setEditing] = useState(false);
2022-10-25 18:26:48 +00:00
const startEditing = (_: any) => {
2022-10-24 18:27:34 +00:00
setInput("");
setEditing(true);
};
2022-10-25 18:26:48 +00:00
const addPerson = (e: SyntheticEvent) => {
2022-10-24 18:27:34 +00:00
e.preventDefault();
2022-10-25 18:26:48 +00:00
const person: IPerson = { name: atom(input) };
2022-10-24 19:00:16 +00:00
setSplitBetween([...splitBetween, atom(person)]);
2022-10-24 18:27:34 +00:00
setEditing(false);
};
return (
<div>
Split between ({splitBetween.length}):
2022-10-24 19:00:16 +00:00
{splitBetween.map((a, i) => (
<Person
personAtom={a}
key={`split-${i}`}
splitBetweenAtom={splitBetweenAtom}
/>
))}
<Button onClick={startEditing} variant="default">
{editing ? (
<Form onSubmit={addPerson}>
<Form.Control
autoFocus={true}
type="text"
value={input}
placeholder="Add person to split with..."
onBlur={(_) => setEditing(false)}
2022-10-25 18:26:48 +00:00
onInput={(e) => setInput(e.currentTarget.value)}
2022-10-24 19:00:16 +00:00
/>
</Form>
) : (
"[+]"
)}
</Button>
2022-10-24 18:27:34 +00:00
</div>
);
}