How to get the pokemon stock dynamically from homepage to detailpage? - reactjs

Question

I'm developing an app that can track pokemon stocks in the store. I fetch the name of data from pokeAPI. Each pokemon is supposed to have its own stock (my pokemon stock is still static) that can be updated in the next page when i click the pokemon's name.
This is the second page:
All in this page is still static. the only dinamic is the pokemons name that I get from params.
How can I update stock of each pokemon and save it? and show it in certain page? Using params (but i think it's not the best practice)? I read I can save the stock to localStorage and accessit later but where should I start from my code?
This is the modal that i will use to update my stock and pass the value to the second page.
first page:
export default function Homepage() {
const [pokemons, setPokemons] = useState([])
const [query, setQuery] = useState("")
const [search, setSearch] = useState("")
let navigate = useNavigate();
const getPokemons = async () => {
try {
let response = await axios.get(`${baseUrl}`)
let pokemons = await response.data.results
setPokemons(pokemons)
} catch (err) {
console.log(err.message)
}
}
const searchPokemon = async (pokemon, e) => {
console.log("masuk seacrh")
try {
if (e.key === 'Enter') {
let response = await axios.get(`${baseUrl} ${pokemon}`)
let data = await response.json()
setSearch(search)
}
} catch (err) {
console.log(err.message)
}
}
useEffect(() => {
getPokemons()
}, [])
// useEffect(() => {
// searchPokemon()
// }, [])
return (
<div className="app-container">
<h1 className="title">Stok Pokémon</h1>
<div className="">
<img src={searchIcon} className="search-icon" />
<input type="text"
className="search-box"
placeholder="Cari Pokémon"
onChange={(e) => setQuery(e.target.value)}
onKeyUp={searchPokemon} />
</div>
<div className="row">
<div className="col">
<Table className="table d-flex row">
<thead>
<tr className="d-flex justify-content-between th-border">
<th scope="col">Nama</th>
<th scope="col" className="d-flex text-right">Stok</th>
</tr>
</thead>
<tbody>
{
pokemons.filter(pokemon => pokemon.name.toLowerCase().includes(query)).map((pokemon, i) => {
console.log(pokemon)
return (
<tr className="d-flex justify-content-between">
<td key={i + 1} className="table-link" onClick={() => {
navigate(`/pokemon/${pokemon.name}`)
}} style={{ textTransform: 'capitalize' }}>{pokemon.name}</td>
<td className="pokemon-stock">10 pcs</td>
</tr>
)
})
}
</tbody>
</Table>
</div>
</div>
</div >
)
}
second page:
function UpdateStockModal(props) {
const [input, setInput] = useState({
pcs: 0,
lusin: 0
})
let navigate = useNavigate();
const [pcs, setPcs] = useState("")
const handleChange = e => {
let newValue = {
...input,
[e.target.name]: e.target.value,
};
setInput(newValue);
};
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="text" name="pcs" value={input.pcs} onChange={handleChange} /> = </Col>
<Col>{input.pcs}</Col>
</Row>
<Row className="modal-table-body">
<Col>Lusin</Col>
<Col className="d-flex align-items-center">12 x <Form.Control name="lusin" className="modal-input lusin" type="text" value={input.lusin} onChange={handleChange} /> = </Col>
<Col>{12 * input.lusin}</Col>
</Row>
<Row className="modal-table-body">
<Col>Total Stok <span>(dalam pcs)</span></Col>
<Col>Lusin</Col>
<Col>{parseInt(12 * input.lusin) + parseInt(input.pcs)}</Col>
</Row>
</Container>
</Modal.Body>
<Modal.Footer>
<Button
variant="primary"
onClick={() => {
navigate(`/update-stock/`)
}} >
Simpan
</Button>
<Button
variant="secondary"
onClick={props.onHide}>
Batal
</Button>
</Modal.Footer>
</Modal>
);
}
export default function PokemonDetail() {
let navigate = useNavigate();
let { name } = useParams()
const [modalShow, setModalShow] = React.useState(false);
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>
<tr className="align-items-center">
<td className="">2 Apr 2021, 08:00</td>
<td className="table-link">Update Stok</td>
<td className="">"Stok Awal"</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>
)
}

Answer 1

Sounds like a shopping cart. I'm assuming you'd like to update the stock for each pokemon. Then on another page, check all the updates before sending an update to the backend. For this I recommend redux saga or rtk query. The state will be globally accessible via the store so you can create your shopping cart securely without using local storage. You can google "redux saga shopping cart" for more examples but these are a couple I've found.
Redux saga
https://github.com/franklsm1/redux-saga-shopping-cart
RTK query
https://codesandbox.io/s/xed9r?file=/README.md