1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import { ChangeEvent, useMemo, useState } from "react";
import { Button, Form, InputOnChangeData, Segment } from "semantic-ui-react";
import { PantryItem } from "../model";
const defaultPantryItem = () =>
({
name: "",
description: "",
quantity: 1,
quantityUnitType: "oz",
} as PantryItem);
interface AddItemProps {
addItem: (item: PantryItem) => Promise<void>;
}
const AddItem = ({ addItem }: AddItemProps) => {
const [additionItem, setAdditionItem] = useState<PantryItem | undefined>();
const [additionItemLoading, setAdditionItemLoading] = useState(false);
const handleItemChange = (
_: ChangeEvent<HTMLInputElement>,
{ name, value }: InputOnChangeData
) =>
setAdditionItem((item) => ({
...(item !== undefined ? item : defaultPantryItem()),
[name]: value,
}));
const newItem = useMemo(
() => additionItem ?? defaultPantryItem(),
[additionItem]
);
return (
<>
<Segment attached="top" hidden={additionItem !== undefined}>
<Button primary onClick={() => setAdditionItem(defaultPantryItem())}>
Add Item
</Button>
</Segment>
<Segment attached="top" hidden={additionItem === undefined}>
<Form
loading={additionItemLoading}
onSubmit={() => {
setAdditionItemLoading(true);
addItem(newItem).then(() => {
setAdditionItem(undefined);
setAdditionItemLoading(false);
});
}}
>
<Form.Group widths="equal">
<Form.Input
name="name"
label="Item Name"
placeholder="Item name"
value={newItem.name}
onChange={handleItemChange}
/>
<Form.Input
fluid
name="description"
label="Item Description"
placeholder="Item description"
value={newItem.description}
onChange={handleItemChange}
/>
<Form.Input
fluid
name="quantity"
label="Item Quantity"
placeholder="Item quantity"
value={newItem.quantity}
onChange={handleItemChange}
/>
<Form.Input
name="quantityUnitType"
label="Quantity Type"
placeholder="Quantity type"
value={newItem.quantityUnitType}
onChange={handleItemChange}
/>
</Form.Group>
<Form.Group>
<Form.Button primary content="Submit Item" type="submit" />
<Form.Button
content="Cancel"
onClick={(e) => {
e.preventDefault();
setAdditionItem(undefined);
}}
/>
</Form.Group>
</Form>
</Segment>
</>
);
};
export default AddItem;
|
