https://codesandbox.io/s/warehouse-shop-managing-system-5w9b3?file=/src/App.js
I’m making a dialog that automatically stores the inventory of the warehouse.
{
"area1": {
"warehouse": [
{ "type": "coffee", "quantity": "1000" },
{ "type": "beef", "quantity": "200" },
{ "type": "sugar", "quantity": "750" }
],
"shop": [
{ "type": "coffee", "quantity": "15" },
{ "type": "beef", "quantity": "3" },
{ "type": "sugar", "quantity": "90" }
]
}
}
Q1) There are two objects in the list. How can I store it in the list sequentially using forEach, map, etc?
(ReactHooks or ClassComponent)
function autoLoad() {
db.area1.warehouse.forEach(
(item) => {
setInputType(...inputType, item.type);
setInputQuantity(...inputQuantity, item.quantity);
},
setItemList([
...itemList,
{
itemType: "warehouse",
itemId: Date.now()
}
])
);
}
Q2) I want to delete it only when I press the Hide_button and finally press the Final_Save button.
For example, you can’t see it in the dialog by pressing the DELETE button, but if you press the cancel button, it won’t be deleted. And if you open the dialog again, you can see the added items.
Is it right to make a separate list for deletion and a list for hiding?
or using Callback?
const renderItemList = itemList.length
? itemList.map((item) => {
return (
<>
<div>
<div style={{ height: "60px" }}>
<TextField
value={item.inputType}
type="text"
style={{ marginBottom: "30px" }}
/>
</div>
<div style={{ height: "60px" }}>
<TextField
value={item.inputQuantity}
type="text"
style={{ marginBottom: "30px" }}
/>
</div>
<div>{hideButton(item)}</div>
</div>
</>
);
})
: "";
function hideButton(item) {
return (
<Button
onClick={() => removeItemInList(item.itemId)}
style={{
backgroundColor: "#2db7e2",
fontSize: "14px",
marginBottom: "30px"
}}
>
{"Hide_Item"}
</Button>
);
}
const removeItemInList = (itemId) => {
setItemList(
itemList.filter((item) => {
return item.itemId !== itemId;
})
);
};
import "./styles.css";
import {
TextField,
Tooltip,
MuiButton,
Button,
Dialog,
DialogContent,
DialogActions
} from "@material-ui/core";
import React, { useState, useRef, useEffect } from "react";
import { Map, List } from "immutable";
import db from "./db.json";
export default function App() {
const [showDialog, setShowDialog] = useState(false);
const [inputType, setInputType] = useState("");
const [inputQuantity, setInputQuantity] = useState("");
const [itemList, setItemList] = useState([]);
const [jsonData, setJsonData] = useState({});
useEffect(() => {
setJsonData(db);
autoLoad();
console.log("itemList:", itemList);
}, []);
function autoLoad() {
db.area1.warehouse.forEach(
(item) => {
setInputType(...inputType, item.type);
setInputQuantity(...inputQuantity, item.quantity);
},
setItemList([
...itemList,
{
itemType: "warehouse",
itemId: Date.now()
}
])
);
}
function resetForm() {
setInputType("");
setInputQuantity("");
}
function addList(e) {
e.preventDefault();
setItemList([
...itemList,
{
itemType: "shop",
itemId: Date.now(),
inputType: inputType,
inputQuantity: inputQuantity
}
]);
resetForm();
}
const renderItemList = itemList.length
? itemList.map((item) => {
return (
<>
<div>
<div style={{ height: "60px" }}>
<TextField
value={item.inputType}
type="text"
style={{ marginBottom: "30px" }}
/>
</div>
<div style={{ height: "60px" }}>
<TextField
value={item.inputQuantity}
type="text"
style={{ marginBottom: "30px" }}
/>
</div>
<div>{hideButton(item)}</div>
</div>
</>
);
})
: "";
function openDialog() {
setShowDialog(!showDialog);
}
function onDismiss() {
setShowDialog(false);
setInputType("");
setInputQuantity("");
}
const removeItemInList = (itemId) => {
setItemList(
itemList.filter((item) => {
return item.itemId !== itemId;
})
);
};
function hideButton(item) {
return (
<Button
onClick={() => removeItemInList(item.itemId)}
style={{
backgroundColor: "#2db7e2",
fontSize: "14px",
marginBottom: "30px"
}}
>
{"Hide_Item"}
</Button>
);
}
function onSubmit() {}
return (
<>
<Button onClick={openDialog} style={{ backgroundColor: "#4cb7f3" }}>
{"Here"}
</Button>
<Dialog open={showDialog} onClose={onDismiss}>
<div
className="App"
style={{ height: "500px", width: "500px", alignItems: "center" }}
>
{renderItemList}
<div style={{ height: "100px" }}>
<TextField
type="text"
// value={}
placeholder="Please, Input the Type"
onChange={(e) => setInputType(e.target.value)}
style={{ marginTop: "30px", marginBottom: "30px" }}
/>
</div>
<div style={{ height: "60px" }}>
<TextField
type="text"
// value={inputQuantity}
placeholder="Please, Input theQuantity"
onChange={(e) => setInputQuantity(e.target.value)}
style={{ marginBottom: "30px" }}
/>
</div>
<div style={{ height: "40px" }}>
<Button
type="submit"
onClick={addList}
style={{ backgroundColor: "#fc7090", fontSize: "14px" }}
>
{"add"}
</Button>
<br />
<br />
<Button
type="submit"
onClick={onSubmit}
style={{ backgroundColor: "#80cbc4", fontSize: "14px" }}
>
{"final_save"}
</Button>
</div>
</div>
</Dialog>
</>
);
}