nicholas/storage-manager
1
0
Fork 0
Code Issues Pull Requests Activity

add edit items

Browse Source
This commit is contained in:
np.w
2020-12-11 18:21:48 -06:00
parent a5dff80d8d
commit f45230b970
4 changed files with 95 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/app.js
+80 -24
View File
@@ -15,8 +15,18 @@ function App() {
const [showModalItem, setShowModalItem] = useState(false);
const [editBoxBool, setEditBoxBool] = useState(false);
const [editDataBox, setEditDataBox] = useState({});
const [editItemBool, setEditItemBool] = useState(false);
const [itemID, setItemID] = useState();
const [itemName, setItemName] = useState('');
const [itemDescription, setItemDescription] = useState('');
const handleName = (e) => {
setItemName(e.target.value)
}
const handleDescription = (e) => {
setItemDescription(e.target.value)
}
//fetch all box data
useEffect(() => {
@@ -36,6 +46,7 @@ function App() {
}
}
// BOX FUNCTIONS ///////////////////////////////////////////////////////////////
const createBox = async (boxData) => {
try {
const response = await axios.post(api.baseApiUrl, boxData);
@@ -54,6 +65,7 @@ function App() {
}
}
const removeBox = async (id) => {
try {
const response = await axios.delete(`${api.baseApiUrl}/${id}`);
@@ -94,15 +106,8 @@ function App() {
removeBox(id);
}
const handleAddBox = () => {
//open modal
setShowModalBox(true);
}
const clearForm = () => {
setEditBoxBool(false);
setBoxName('');
setBoxDescription('');
setBoxID(null);
}
const handleEditBox = (id) => {
const box = data.find(box => box._id === id);
setEditBoxBool(true);
@@ -111,6 +116,13 @@ function App() {
setBoxID(id);
setShowModalBox(true);
}
const clearForm = () => {
setEditBoxBool(false);
setBoxName('');
setBoxDescription('');
setBoxID(null);
}
const boxHandler = {
handleSubmit: handleSubmitBox,
handleRemove: handleRemoveBox,
@@ -118,12 +130,13 @@ function App() {
handleDescription: handleBoxDescription,
handleEdit: handleEditBox
};
// ITEM FUNCTIONS ///////////////////////////////////////////////////////////////
const createItem = async (id, itemData) => {
const createItem = async (boxID, itemData) => {
try {
const response = await axios.post(`${api.baseApiUrl}/${id}/item`, itemData);
const response = await axios.post(`${api.baseApiUrl}/${boxID}/item`, itemData);
const boxData = [...data];
boxData.splice(boxData.findIndex(box => box._id === id), 1, response.data);
boxData.splice(boxData.findIndex(box => box._id === boxID), 1, response.data);
setData(boxData);
}
catch (error) {
@@ -131,6 +144,18 @@ function App() {
}
}
const editItem = async (boxID, itemID, itemData) => {
try {
const response = await axios.put(`${api.baseApiUrl}/${boxID}/item/${itemID}`, itemData);
const boxData = [...data];
boxData.splice(boxData.findIndex(box => box._id === boxID), 1, response.data);
setData(boxData);
}
catch (error) {
}
}
const removeItem = async (boxID, itemID) => {
try {
const boxData = [...data];
@@ -142,33 +167,50 @@ function App() {
console.log(error);
}
}
const handleAddItem = (id) => {
const boxData = [...data];
const index = boxData.findIndex(box => box._id === id);
boxData.forEach((box, boxIndex) => box.showItemForm = index === boxIndex);
setData(boxData);
setBoxID(id);
setEditItemBool(false);
setShowModalItem(true);
}
const handleEditItem = (boxID, itemID) => {
const box = data.find(box => box._id === boxID);
const item = box.item.find(item => item._id === itemID);
setItemID(itemID);
setBoxID(boxID);
setItemName(item.name);
setItemDescription(item.description);
setEditItemBool(true);
setShowModalItem(true);
}
const handleRemoveItem = (boxID, itemID) => {
removeItem(boxID, itemID);
}
const handleSubmitItem = (event) => {
event.preventDefault();
clearForm();
const formData = new FormData(event.target);
const id = formData.get('id');
setShowModalItem(false);
const itemData = {
name: formData.get('name'),
description: formData.get('description')
id: itemID,
name: itemName,
description: itemDescription
}
createItem(id, itemData);
if (editItemBool)
editItem(boxID, itemID, itemData);
else
createItem(boxID, itemData);
clearForm();
return false;
}
const itemHandler = {
handleSubmit: handleSubmitItem,
handleRemove: handleRemoveItem,
handleAddItem: handleAddItem,
handleAdd: handleAddItem,
handleEdit: handleEditItem,
};
const boxForm =
@@ -186,9 +228,23 @@ function App() {
<button type="submit">submit</button>
</form>
const itemForm = <form onSubmit={itemHandler.handleSubmit}>
<legend>New Item</legend>
<fieldset>
<input id="id" name="id" value={itemID} readOnly hidden></input>
<label htmlFor="item-name">name
<input onChange={handleName} value={itemName} id="item-name" name="name" type="text"></input>
</label>
<label htmlFor="item-description">description
<input onChange={handleDescription} value={itemDescription} id="item-description" name="description" type="text"></input>
</label>
</fieldset>
<button type="submit">submit</button>
</form>
return (
<>
{<Modal show={showModalBox} edit={editBoxBool} content={boxForm} /> }
{<Modal show={showModalItem} edit={editItemBool} content={itemForm} />}
{<Modal show={showModalBox} edit={editBoxBool} content={boxForm} />}
<ul className="list-box">
{data && data.map((box, index) => {
return (
client/src/box.js
+2 -27
View File
@@ -3,46 +3,21 @@ import Item from './item';
import Modal from './modal';
const Box = ({ boxData, boxHandler, itemHandler }) => {
const [itemName, setItemName] = useState('');
const [itemDescription, setItemDescription] = useState('');
const handleName = (e) => {
setItemName(e.target.value)
}
const handleDescription = (e) => {
setItemDescription(e.target.value)
}
const formNewItem = <form onSubmit={itemHandler.handleSubmit}>
<legend>New Item</legend>
<fieldset>
<input id="id" name="id" value={boxData._id} readOnly hidden></input>
<label htmlFor="item-name">name
<input onChange={handleName} value={itemName} id="item-name" name="name" type="text"></input>
</label>
<label htmlFor="item-description">description
<input onChange={handleDescription} value={itemDescription} id="item-description" name="description" type="text"></input>
</label>
</fieldset>
<button type="submit">submit</button>
</form>
return (
<>
{<Modal content={formNewItem} show={boxData.showItemForm} />}
<li className="box">
<h2 className="box-title">{boxData.name}</h2>
<div className="box-subtitle">
<h3>{boxData.description}</h3>
<button onClick={() => itemHandler.handleAddItem(boxData._id)}>add item</button>
<button onClick={() => itemHandler.handleAdd(boxData._id)}>add item</button>
</div>
<ul className="list-box-item">
{boxData.item.map(((item, index) => {
return <Item
key={index}
data={item}
boxID={boxData._id}
handleRemove={itemHandler.handleRemove} />
itemHandler={itemHandler}/>
}))}
</ul>
<button className="edit-box" onClick={() => boxHandler.handleEdit(boxData._id)}>edit</button>
client/src/item.js
+3 -3
View File
@@ -1,10 +1,10 @@
import React from 'react';
const item = ({ data, handleRemove, handleEdit, boxID }) => {
const item = ({ data, itemHandler, boxID }) => {
return (<li className="item">
<p className="item-name">{data.name}</p>
<button onClick={() => console.log('edit')}>edit</button>
<button onClick={() => handleRemove(boxID, data._id)}>remove</button>
<button onClick={() => itemHandler.handleEdit(boxID, data._id)}>edit</button>
<button onClick={() => itemHandler.handleRemove(boxID, data._id)}>remove</button>
</li>);
};
server/server.js
+10 -2
View File
@@ -80,14 +80,22 @@ app.post('/box/:id/item', async (request, response) => {
const updatedBox = await getBox(id);
response.send(updatedBox);
});
//edit item
app.put('/box/:boxId/item/:itemId', async (request, response) => {
const boxID = request.params.boxId;
const itemID = request.params.itemId;
await Box.updateOne({ 'item._id': itemID }, {
$set: { item: request.body }
})
const updatedBox = await getBox(boxID);
response.send(updatedBox);
});
//delete item
app.delete('/box/:boxId/item/:itemId', async (request, response) => {
const boxID = request.params.boxId;
const itemID = request.params.itemId;
await Box.update({ _id: boxID }, { $pull: { item: { _id: itemID } } });
const box = await getBox(boxID);
console.log(box);
response.send(box);
});