How to overwrite data on localStorage? - reactjs

Question

I'm building a store app where I can have a list of pokemon and data that belongs to each pokemon. I use localStorage to save my data. The data is like this on localStorage.
{
pokemonName: name,
pcs: stockPcs,
dozen: stockDozen,
dozenToPcs: stockDozenToPcs,
total: totalPcs,
history: [
{
date: new Date().toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }),
hour: new Date().getHours(),
minute: new Date().getMinutes(),
activity: '',
note: '',
count: 0,
totalStock: 0
}
]
}
my question is how do I overwrite the data from the same pokemon and add the history of data. I tried, but instead of overwriting, it adds a whole new object with the same pokemon name (but different data.
I want to add new data only on history array so i can track it.
I want to overwrite pcs, dozen, dozenToPcs, and total properties.
Where is my mistake and what should I do to achieve this? Thank you so much.
import React, { useEffect, useState } from 'react'
import Button from 'react-bootstrap/Button';
import prevPageIcon from '../images/prevPage.svg'
import { Table, Modal, Container, Row, Col, Form } from 'react-bootstrap';
import { useNavigate, useParams } from 'react-router-dom'
This is where I input my data:
function UpdateStockModal(props) {
let { name } = useParams()
const [input, setInput] = useState({})
let stockPcs = 1 * input.pcs
let stockDozen = 1 * input.dozen
let stockDozenToPcs = 12 * input.dozen
let totalPcs = stockPcs + stockDozenToPcs
let navigate = useNavigate();
const handleChange = e => {
let newValue = {
...input,
[e.target.name]: e.target.value,
};
setInput(newValue);
};
const saveChange = () => {
navigate(`/update-stock/${name}`)
var pokemonData = [];
pokemonData = JSON.parse(localStorage.getItem("pokemon") || "[]");
pokemonData.push({
pokemonName: name,
pcs: stockPcs,
dozen: stockDozen,
dozenToPcs: stockDozenToPcs,
total: totalPcs,
history: [
{
date: new Date().toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }),
hour: new Date().getHours(),
minute: new Date().getMinutes(),
activity: '',
note: '',
count: 0,
totalStock: 0
}
]
})
localStorage.setItem('pokemon', JSON.stringify(pokemonData));
}
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
className="modal"
centered
>
<Modal.Header closeButton>
<Modal.Title className="modal-title">
Update stock
</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Masukkan jumlah stok yang tersedia di rak saat ini.</h4>
<Container>
<Row>
<Col>Kemasan</Col>
<Col>Jumlah</Col>
<Col>Stok</Col>
</Row>
<Row className="modal-table-body">
<Col >Pcs</Col>
<Col className="d-flex align-items-center">1 x <Form.Control className="modal-input pcs" type="number" name="pcs" value={input.pcs} onChange={handleChange} /> = </Col>
<Col>{input.pcs || 0}</Col>
</Row>
<Row className="modal-table-body">
<Col>Lusin</Col>
<Col className="d-flex align-items-center">12 x <Form.Control name="dozen" className="modal-input dozen" type="number" value={input.dozen} onChange={handleChange} /> = </Col>
<Col>{12 * input.dozen || 0}</Col>
</Row>
<Row className="modal-table-body">
<Col>Total Stok <span>(dalam pcs)</span></Col>
<Col>Lusin</Col>
<Col>{(12 * input.dozen) + (1 * input.pcs) || 0}</Col>
</Row>
</Container>
</Modal.Body>
<Modal.Footer>
<Button
variant="primary"
onClick={saveChange} >
Simpan
</Button>
<Button
variant="secondary"
onClick={saveChange}>
Batal
</Button>
</Modal.Footer >
</Modal >
);
}
export default function PokemonDetail() {
let navigate = useNavigate();
let { name } = useParams()
const [modalShow, setModalShow] = useState(false);
const [pokemonData, setPokemonData] = useState([])
useEffect(() => {
let pokemonData = JSON.parse(localStorage.getItem('pokemon') || "[]");
console.log(pokemonData, "ini di detail")
setPokemonData(pokemonData)
}, [])
return (
<div className="pokemon-detail-page">
<div className="pokemon-detail_button-group">
<Button variant="outline-light" className="prev-button" onClick={() => {
navigate('/')
}}><img src={prevPageIcon}></img>Stok Pokémon</Button>
<Button className="update-stock-button" onClick={() => setModalShow(true)}>Update Stok</Button>
</div>
<p className="pokemon-detail-title" style={{ textTransform: 'capitalize' }}>{name}</p>
<div className="pokemon-detail-subtitle">
<p className="pokemon-detail-sub1">Sisa Stok</p>
<p className="pokemon-detail-sub2">10 pcs</p>
</div>
<div className="pokemon-detail-history">
<p className="pokemon-detail-history1">Riwayat Stok</p>
<p className="pokemon-detail-history2">Satuan stok dalam pcs</p>
</div>
<div>
<Table className='col-xs-12 mt-4' responsive>
<thead>
<tr className="th-border ">
<th scope="col">Waktu</th>
<th scope="col">Kegiatan</th>
<th scope="col">Catatan</th>
<th scope="col">Jumlah</th>
<th scope="col">Stok</th>
</tr>
</thead>
<tbody>
{
pokemonData.map(pokemon => {
if (pokemon.pokemonName == name) {
console.log(pokemon.history[0].date, "pokemon di update")
return (
<tr className="align-items-center">
<td className="">{`${pokemon.history[0].date}, ${pokemon.history[0].hour}:${pokemon.history[0].minute}`}</td>
<td className="table-link">Update Stok</td>
<td className=""></td>
<td className="table-count-stock">+10</td>
<td className="table-bold">10</td>
</tr>
)
}
})
}
</tbody>
</Table>
</div>
<UpdateStockModal
show={modalShow}
onHide={() => setModalShow(false)}
/>
</div >
)
}
This is where I show my data:
function EditStockModal(props) {
let { name } = useParams()
const [input, setInput] = useState({})
// let stockPcs = 1 * input.pcs
// let stockLusin = 1 * input.lusin
// let stockLusinToPcs = 12 * input.lusin
// let totalPcs = stockPcs + stockLusinToPcs
let navigate = useNavigate();
const handleChange = e => {
let newValue = {
...input,
[e.target.name]: e.target.value,
};
setInput(newValue);
};
const saveChange = () => {
navigate(`/update-stock/${name}`)
var pokemonData = [];
pokemonData = JSON.parse(localStorage.getItem("pokemon") || "[]");
localStorage.setItem('pokemon', JSON.stringify(pokemonData));
}
}
export default function UpdateStock() {
let { name } = useParams()
const [pokemonData, setPokemonData] = useState([]);
const [note, setNote] = useState({})
let navigate = useNavigate();
const [modalShow, setModalShow] = useState(false);
useEffect(() => {
let pokemon = JSON.parse(localStorage.getItem('pokemon'));
setPokemonData(pokemon)
console.log(pokemon, "ini data apa")
// if (pokemonData) {
// pokemonData.map(pokemon => {
// setPokemonData(pokemonData);
// })
// }
}, []);
const handleChange = e => {
let newValue = {
...note,
[e.target.name]: e.target.value,
};
// console.log(newValue)
// setNote(newValue);
};
// function updateNote(updatedData) {
// const pokemonUpdatedData = {
// ...JSON.parse(localStorage.getItem('pokemon')),
// ...updatedData
// };
// localStorage.setItem('pokemon', JSON.stringify(pokemonUpdatedData));
// }
const saveChange = () => {
navigate(`/pokemon/${name}`)
console.log(pokemonData, "//arr kosong")
// pokemonData.push({
// pokemonName: name,
// pcs: stockPcs,
// lusin: stockLusin,
// lusinToPcs: stockLusinToPcs,
// total: totalPcs,
// history: [
// {
// date: new Date().toLocaleString(),
// activity: '',
// note: note,
// count: totalPcs - count,
// totalStock: totalPcs + count
// }
// ]
// })
// updateNote(pokemonData)
}
return (
<div className="update-stock-page">
<h1 className="update-stock-title">Konfirmasi update stok</h1>
{
pokemonData.map((pokemon, i) => {
if (pokemon.pokemonName == name) {
console.log(pokemon.pokemonName, "pokemonName", name, "name")
return (
<>
<div>
<p className="update-stock-subtitle">Selisih</p>
<p className="update-stock-difference">{`${pokemon.total} pcs`}</p>
</div>
<div className="row d-flex justify-content-center ">
<div className="col">
<p>Di sistem</p>
<p>{`10 pcs`}</p>
</div>
<div className="col-1 align-center ">
<img width="21" height="21" src={arrowIcon} />
</div>
<div className="col">
<p>Hasil update stok</p>
<p>544 pcs</p>
</div>
</div>
</>
)
}
})
}
<Table className='col-xs-12 mt-4' responsive>
<thead>
<tr className="th-border">
<th scope="col">Keterangan</th>
<th scope="col">Detail</th>
<th scope="col">Jumlah</th>
</tr>
</thead>
<tbody>
{
pokemonData.map(pokemon => {
if (pokemon.pokemonName == name) {
console.log(pokemon.pokemonName, "pokemonName di confirm", name, "name di confirm")
return (
<>
<tr className="align-items-center">
<td className="table-link">Hasil update stock</td>
<td className="">{`${pokemon.pcs} pcs, ${pokemon.dozen} lusin (12s)`}</td>
<td className="">{pokemon.total}</td>
<td>
<img src={editIcon} onClick={() => setModalShow(true)}></img>
</td>
</tr>
<tr className="align-items-center">
<td className="table-link">Total hasil stok opname</td>
<td></td>
<td className="">{pokemon.total}</td>
</tr>
</>
)
}
})
}
</tbody>
</Table>
<div className="update-stock-note-group">
<p className="update-stock-note-title">Catatan</p>
<textarea className="update-stock-note-input" onChange={handleChange} placeholder="Contoh: stok awal"></textarea>
</div>
<div className="d-flex justify-content-end gap-2">
<Button variant="primary" onClick={saveChange}>Simpan</Button>
<Button variant="secondary">Batal</Button>
</div>
</div>
)
}