stwhite
/
boxes-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

error-handling #1

Merged
stwhite merged 24 commits from error-handling into main 2024-10-30 15:19:49 +00:00
Conversation 0 Commits 24 Files Changed 24 +17 -18
2 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8424579dcb - Show all commits

30
src/components/ItemDetails.js
View File

@ -33,13 +33,13 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
const handleBoxChange = (event) => { const handleBoxChange = (event) => {
setSelectedBoxId(event.target.value); const newBoxId = event.target.value;
updateItemBoxId(); setSelectedBoxId(newBoxId); // Update only this state
console.log('Selected box ID:', event.target.value); console.log('Selected box ID:', newBoxId);
}; };
useEffect(() => { useEffect(() => {
// Function to fetch box details // Fetch box details only when the selectedBoxId changes
const getBoxDetails = async (boxId) => { const getBoxDetails = async (boxId) => {
try { try {
const boxIdNumber = +boxId; const boxIdNumber = +boxId;
@ -47,7 +47,7 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
console.error('Invalid boxId:', boxId); console.error('Invalid boxId:', boxId);
return; return;
} }
const response = await axios.get(`${process.env.REACT_APP_API_URL}/boxes/${+boxId}`, { const response = await axios.get(`${process.env.REACT_APP_API_URL}/boxes/${boxIdNumber}`, {
headers: { Authorization: `Bearer ${token}` } headers: { Authorization: `Bearer ${token}` }
}); });
setBoxName(response.data.name); setBoxName(response.data.name);
@ -56,11 +56,10 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
} }
}; };
// Fetch the box details when the component mounts or the selectedBoxId changes if (selectedBoxId) {
if (selectedBoxId !== boxId) { getBoxDetails(selectedBoxId); // Fetch when selected box changes
getBoxDetails(selectedBoxId);
} }
}, [selectedBoxId, token, boxId]); }, [selectedBoxId, token]); // Removed `boxId` from dependencies
useEffect(() => { useEffect(() => {
// Function to fetch image similar to getImageSrc in Items.js // Function to fetch image similar to getImageSrc in Items.js
@ -153,12 +152,13 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
// 2. Update item details (name, description, etc.) // 2. Update item details (name, description, etc.)
try { try {
await axios.put(`${process.env.REACT_APP_API_URL}/items/${item.ID}`, await axios.put(`${process.env.REACT_APP_API_URL}/items/${item.ID}`, {
{ name, description, image_path: imagePath, BoxID: selectedBoxId }, // Use teh uploaded image path name,
{ description,
headers: { Authorization: `Bearer ${token}` } box_id: +selectedBoxId, // Ensure the updated selected box is saved
} }, {
); headers: { Authorization: `Bearer ${token}` }
});
onSave(); // Notify parent to refresh items onSave(); // Notify parent to refresh items
} catch (error) { } catch (error) {
// Handle update error // Handle update error

3
src/components/Items.js
View File

@ -249,8 +249,7 @@ export default function Items({ token }) {
return ( return (
<Container> <Container>
<h2>Items in Box: {boxName === "Unknown Box" ? "All Boxes" : boxName}</h2> <h2>Items in Box: {boxName === "Unknown Box" ? "All Boxes" : `${boxName} (${items.length} items)`}</h2>
<input <input
type="file" type="file"
accept="image/*" accept="image/*"