src/components/ItemDetails.js

@@ -33,13 +33,13 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
 
 
   const handleBoxChange = (event) => {
-    setSelectedBoxId(event.target.value);
-    updateItemBoxId();
-    console.log('Selected box ID:', event.target.value);
+    const newBoxId = event.target.value;
+    setSelectedBoxId(newBoxId); // Update only this state
+    console.log('Selected box ID:', newBoxId);
   };
 
   useEffect(() => {
-    // Function to fetch box details
+    // Fetch box details only when the selectedBoxId changes
     const getBoxDetails = async (boxId) => {
       try {
         const boxIdNumber = +boxId;
@@ -47,7 +47,7 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
           console.error('Invalid boxId:', boxId);
           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}` }
         });
         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 !== boxId) {
-      getBoxDetails(selectedBoxId);
+    if (selectedBoxId) {
+      getBoxDetails(selectedBoxId);  // Fetch when selected box changes
     }
-  }, [selectedBoxId, token, boxId]);
+  }, [selectedBoxId, token]); // Removed `boxId` from dependencies
 
   useEffect(() => {
     // 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.)
     try {
-      await axios.put(`${process.env.REACT_APP_API_URL}/items/${item.ID}`,
-        { name, description, image_path: imagePath, BoxID: selectedBoxId }, // Use teh uploaded image path
-        {
-          headers: { Authorization: `Bearer ${token}` }
-        }
-      );
+      await axios.put(`${process.env.REACT_APP_API_URL}/items/${item.ID}`, {
+        name,
+        description,
+        box_id: +selectedBoxId, // Ensure the updated selected box is saved
+      }, {
+        headers: { Authorization: `Bearer ${token}` }
+      });
       onSave(); // Notify parent to refresh items
     } catch (error) {
       // Handle update error

src/components/Items.js

@@ -249,8 +249,7 @@ export default function Items({ token }) {
 
   return (
     <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 
         type="file" 
         accept="image/*"