move toward single source of truth
This commit is contained in:
np.w
+64
-10
@@ -7,6 +7,12 @@ import Modal from './modal';
|
||||
|
||||
function App() {
|
||||
|
||||
const [data, setData] = useState();
|
||||
const [boxName, setBoxName] = useState('');
|
||||
const [boxDescription, setBoxDescription] = useState('');
|
||||
const [showFormBox, setShowFormBox] = useState(false);
|
||||
const [showBox, setShowBox] = useState(false);
|
||||
|
||||
//fetch all box data
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
@@ -15,13 +21,6 @@ function App() {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const [data, setData] = useState();
|
||||
|
||||
const [boxName, setBoxName] = useState('');
|
||||
const [boxDescription, setBoxDescription] = useState('');
|
||||
|
||||
const [showFormBox, setShowFormBox] = useState(false);
|
||||
|
||||
const fetchDataAsync = async () => {
|
||||
try {
|
||||
const resp = await axios.get(api.baseApiUrl);
|
||||
@@ -45,7 +44,9 @@ function App() {
|
||||
const removeBox = async (id) => {
|
||||
try {
|
||||
const response = await axios.delete(`${api.baseApiUrl}/${id}`);
|
||||
setData(data.filter(box => box._id !== id));
|
||||
const storageData = response.data;
|
||||
console.log(storageData);
|
||||
setData(storageData);
|
||||
}
|
||||
catch (error) {
|
||||
console.log(error);
|
||||
@@ -88,6 +89,56 @@ function App() {
|
||||
handleName: handleBoxName,
|
||||
handleDescription: handleBoxDescription
|
||||
};
|
||||
|
||||
|
||||
|
||||
const [itemName, setItemName] = useState('');
|
||||
const [itemDescription, setItemDescription] = useState('');
|
||||
|
||||
|
||||
const createItem = async (id, itemData) => {
|
||||
try {
|
||||
const response = await axios.post(`${api.baseApiUrl}/${id}/item`, itemData);
|
||||
}
|
||||
catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
const removeItem = async (id) => {
|
||||
try {
|
||||
const response = await axios.delete(`${api.baseApiUrl}/${data._id}/item/${id}`);
|
||||
//box data copy
|
||||
let boxData = Object.assign({}, data);
|
||||
boxData = Object.assign(boxData, {item: response.data})
|
||||
}
|
||||
catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
const handleAddItem = () => {
|
||||
//setShowFormItem(true);
|
||||
}
|
||||
const handleRemoveItem = (id) => {
|
||||
removeItem(id);
|
||||
}
|
||||
const handleSubmitItem = (event) => {
|
||||
event.preventDefault();
|
||||
clearForm();
|
||||
const id = (event.target).querySelector("#id").value;
|
||||
const itemData = {
|
||||
name: itemName,
|
||||
description: itemDescription
|
||||
}
|
||||
createItem(id, itemData);
|
||||
return false;
|
||||
}
|
||||
|
||||
const itemHandler = {
|
||||
handleSubmit: handleSubmitItem,
|
||||
handleRemove: handleRemoveItem,
|
||||
};
|
||||
|
||||
const formNewBox =
|
||||
<form onSubmit={boxHandler.handleSubmit}>
|
||||
<legend>New Box</legend>
|
||||
@@ -104,12 +155,15 @@ function App() {
|
||||
|
||||
return (
|
||||
<>
|
||||
{<Modal />}
|
||||
{showBox && <Modal />}
|
||||
|
||||
<ul className="list-box">
|
||||
{data && data.map((box) => {
|
||||
return (
|
||||
<Box boxData={box} handleRemove={boxHandler.handleRemove} />
|
||||
<Box
|
||||
boxData={box}
|
||||
handleRemoveBox={boxHandler.handleRemove}
|
||||
itemHandler={itemHandler} />
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
|
||||
+16
-75
@@ -3,83 +3,24 @@ import Item from './item';
|
||||
import api from './api';
|
||||
import axios from 'axios';
|
||||
|
||||
const Box = ({ boxData, handleRemove }) => {
|
||||
console.log(boxData);
|
||||
const [data, setData] = useState(boxData);
|
||||
const [showFormItem, setShowFormItem] = useState(false);
|
||||
|
||||
const [itemName, setItemName] = useState('');
|
||||
const [itemDescription, setItemDescription] = useState('');
|
||||
|
||||
|
||||
const createItem = async (id, itemData) => {
|
||||
try {
|
||||
const response = await axios.post(`${api.baseApiUrl}/${id}/item`, itemData);
|
||||
setData(response.data);
|
||||
const Box = ({ boxData, handleRemoveBox, itemHandler }) => {
|
||||
const [itemName, setItemName] = useState();
|
||||
const [itemDescription, setItemDescription] = useState();
|
||||
const handleName = (e) => {
|
||||
setItemName(e.target.value)
|
||||
}
|
||||
catch (error) {
|
||||
console.log(error);
|
||||
const handleDescription = (e) => {
|
||||
setItemDescription(e.target.value)
|
||||
}
|
||||
}
|
||||
|
||||
const removeItem = async (id) => {
|
||||
try {
|
||||
const response = await axios.delete(`${api.baseApiUrl}/${data._id}/item/${id}`);
|
||||
//box data copy
|
||||
let boxData = Object.assign({}, data);
|
||||
boxData = Object.assign(boxData, {item: response.data})
|
||||
setData(boxData);
|
||||
}
|
||||
catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
const clearForm = () => {
|
||||
setItemName();
|
||||
setItemDescription();
|
||||
}
|
||||
const handleItemName = (e) => {
|
||||
setItemName(e.target.value);
|
||||
}
|
||||
const handleItemDescription = (e) => {
|
||||
setItemDescription(e.target.value);
|
||||
}
|
||||
|
||||
const handleAddItem = () => {
|
||||
setShowFormItem(true);
|
||||
}
|
||||
const handleRemoveItem = (id) => {
|
||||
removeItem(id);
|
||||
}
|
||||
const handleSubmitItem = (event) => {
|
||||
event.preventDefault();
|
||||
setShowFormItem(false);
|
||||
clearForm();
|
||||
const id = (event.target).querySelector("#id").value;
|
||||
const itemData = {
|
||||
name: itemName,
|
||||
description: itemDescription
|
||||
}
|
||||
createItem(id, itemData);
|
||||
return false;
|
||||
}
|
||||
|
||||
const itemHandler = {
|
||||
handleSubmit: handleSubmitItem,
|
||||
handleRemove: handleRemoveItem,
|
||||
handleName: handleItemName,
|
||||
handleDescription: handleItemDescription
|
||||
};
|
||||
|
||||
const formNewItem = <form onSubmit={itemHandler.handleSubmit}>
|
||||
<legend>New Item</legend>
|
||||
<fieldset>
|
||||
<input id="id" name="id" value={data._id} hidden></input>
|
||||
<input id="id" name="id" value={boxData._id} hidden></input>
|
||||
<label htmlFor="item-name">name
|
||||
<input onChange={itemHandler.handleName} value={itemName} id="item-name" name="name" type="text"></input>
|
||||
<input onChange={handleName} value={itemName} id="item-name" name="name" type="text"></input>
|
||||
</label>
|
||||
<label htmlFor="item-description">description
|
||||
<input onChange={itemHandler.handleDescription} value={itemDescription} id="item-description" name="description" type="text"></input>
|
||||
<input onChange={handleDescription} value={itemDescription} id="item-description" name="description" type="text"></input>
|
||||
</label>
|
||||
</fieldset>
|
||||
<button type="submit">submit</button>
|
||||
@@ -87,19 +28,19 @@ const Box = ({ boxData, handleRemove }) => {
|
||||
|
||||
return (
|
||||
<li className="box">
|
||||
<h2 className="box-title">{data.name}</h2>
|
||||
<h2 className="box-title">{boxData.name}</h2>
|
||||
<div className="box-subtitle">
|
||||
<h3>{data.description}</h3>
|
||||
<button onClick={handleAddItem}>add item</button>
|
||||
<h3>{boxData.description}</h3>
|
||||
<button onClick={() => console.log('show form')}>add item</button>
|
||||
</div>
|
||||
<ul className="list-box-item">
|
||||
|
||||
{data.item.map(((item) => {
|
||||
{boxData.item.map(((item) => {
|
||||
return <Item data={item} handleRemove={itemHandler.handleRemove} />
|
||||
}))}
|
||||
</ul>
|
||||
<button className="remove-box" onClick={() => handleRemove(data._id)}>remove box</button>
|
||||
{showFormItem && formNewItem}
|
||||
<button className="remove-box" onClick={() => handleRemoveBox(boxData._id)}>remove box</button>
|
||||
{true && formNewItem}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -43,6 +43,7 @@ ul.list-box {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
padding: 0 0 0 1em;
|
||||
margin: 0;
|
||||
gap: 1em;
|
||||
}
|
||||
ul.list-box-item {
|
||||
padding: 0 0 0 1em;
|
||||
|
||||
Reference in New Issue
Block a user