File size: 1,635 Bytes
050d2e1 |
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 |
import { useCallback, useEffect, useState } from 'react';
import { AddItemForm } from './AddNewItemForm';
import { ItemDisplay } from './ItemDisplay';
export function TodoListCard() {
const [items, setItems] = useState(null);
useEffect(() => {
fetch('/api/items')
.then((r) => r.json())
.then(setItems);
}, []);
const onNewItem = useCallback(
(newItem) => {
setItems([...items, newItem]);
},
[items],
);
const onItemUpdate = useCallback(
(item) => {
const index = items.findIndex((i) => i.id === item.id);
setItems([
...items.slice(0, index),
item,
...items.slice(index + 1),
]);
},
[items],
);
const onItemRemoval = useCallback(
(item) => {
const index = items.findIndex((i) => i.id === item.id);
setItems([...items.slice(0, index), ...items.slice(index + 1)]);
},
[items],
);
if (items === null) return 'Loading...';
return (
<>
<AddItemForm onNewItem={onNewItem} />
{items.length === 0 && (
<p className="text-center">No items yet! Add one above!</p>
)}
{items.map((item) => (
<ItemDisplay
key={item.id}
item={item}
onItemUpdate={onItemUpdate}
onItemRemoval={onItemRemoval}
/>
))}
</>
);
}
|