Untitled
javascript
a month ago
6.5 kB
1
Indexable
Never
import React, { useState, useEffect } from 'react'; import axios from 'axios'; import './pageLayout.css'; import './inventory.css'; // Defining a functional component named 'Inventory' const Inventory = () => { // Using the useState hook to create and manage state for the component const [data, setData] = useState([]); // To store fetched data const [skuSearch, setSkuSearch] = useState(''); // SKU search string const [nameSearch, setNameSearch] = useState(''); // Name search string // useEffect hook runs side-effects in functional components, similar to componentDidMount and componentDidUpdate combined in class components useEffect(() => { const fetchData = async () => { // Defining an async function to fetch data from the API // Setting a default endpoint URL let endpoint = `http://localhost:8080/api/stock`; // If either skuSearch or nameSearch has a value, we modify the endpoint to search with that value if (skuSearch || nameSearch) { const search = `${skuSearch}${nameSearch}`; endpoint = `http://localhost:8080/api/stock/search/${search}`; } try { // Making an asynchronous GET request to the endpoint const response = await axios.get(endpoint); // Mapping the response data to add/update some fields before setting the state const updatedData = response.data.map(item => { return { ...item, stockRoom: item.stockRoom || "Placeholder", supplier: item.supplierName || "Placeholder", totalValue: `$${item.unit_price * item.stock_quantity}` }; }); // Updating the state with the fetched data setData(updatedData); } catch (error) { // Logging any errors during the fetch process console.error(`Error fetching data: ${error}`); } }; fetchData(); // Calling the fetchData function to initiate the fetch process }, [skuSearch, nameSearch]); // useEffect's dependency array, ensures this useEffect runs whenever skuSearch or nameSearch values change // Handler function to clear current data and initiate a new fetch (which happens automatically due to useEffect's dependency array) const handleFilterClick = () => { // triggers re-fetch of data with updated search strings setData([]); }; // JSX to render the component return ( <> <div className='header'> <h1>Table Filters</h1> </div> <div className='content'> <table className='inventoryFilterTable'> <tr className='filterRow'> <div className='filterRowDiv'> <h3>SKU:  </h3> <input type='text' value={skuSearch} onChange={(e) => setSkuSearch(e.target.value)} /> </div> <div className='filterRowDiv'> <h3>Category:  </h3> <input type='text' /> </div> <div className='filterRowDiv'> <h3>Supplier:  </h3> <input type='text' /> </div> </tr> <tr className='filterRow'> <div className='filterRowDiv'> <h3>Name:  </h3> <input type='text' value={nameSearch} onChange={(e) => setNameSearch(e.target.value)} /> </div> <div className='filterRowDiv'> <h3>Last Update:  </h3> <input type='text' /> </div> <div className='filterRowDiv'> <h3>Location:  </h3> <input type='text' /> </div> </tr> <tr className='rowButton'> <button className='applyFilterButton' onClick={handleFilterClick}>APPLY FILTERS</button> </tr> </table> </div> <div className='header'> <h1>Inventory Table</h1> </div> <div className='content'> {data.length > 0 && ( <div> <table className='inventoryTable'> <tr> <th>SKU</th> <th>Name</th> <th>Category</th> <th>Supplier</th> <th>Location</th> <th>Last Update</th> <th>Quantity</th> <th>Price</th> <th>Total Value</th> </tr> {data.map((item) => (// We use the map function to iterate over the data array and render a table row for each item // We use the item's id as the key for each row // We use the item's fields to populate the table cells <tr> <td>{item.stockId || "Placeholder"}</td> <td>{item.stock_name || "Placeholder"}</td> <td>{item.stock_type}</td> <td>{item.supplierName}</td> <td>{item.location}</td> <td>"Placeholder"</td> <td>{item.stock_quantity}</td> <td>{`$${item.unit_price.toFixed(2)}`}</td> <td>{`$${(item.unit_price * item.stock_quantity).toFixed(2)}`}</td> </tr> ))} </table> </div> )} </div> </> ); }; export default Inventory;