src/components/ItemDetails.js

@@ -1,5 +1,5 @@
 // src/components/ItemDetails.js
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { TextField, Button, Container, Avatar, Typography } from '@mui/material';
 import axios from 'axios';
 import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
@@ -31,8 +31,10 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
     fetchBoxes();
   }, [token]);
 
+
   const handleBoxChange = (event) => {
     setSelectedBoxId(event.target.value);
+    updateItemBoxId();
     console.log('Selected box ID:', event.target.value);
   };
 
@@ -55,7 +57,7 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
     };
     
     // Fetch the box details when the component mounts or the selectedBoxId changes
-    if (selectedBoxId !== null) {
+    if (selectedBoxId !== boxId) {
       getBoxDetails(selectedBoxId);
     }
   }, [selectedBoxId, token, boxId]);
@@ -107,7 +109,7 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
   //   navigate(`/boxes/${boxId}/items`); // Navigate back to the items list
   // };
 
-  const handleImageUpload = async () => {
+  const handleImageUpload = useCallback(async () => {
     const formData = new FormData();
     formData.append('image', fileInputRef.current.files[0]);
 
@@ -125,15 +127,29 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
       // Handle upload error (e.g., show an error message)
       console.error('Image upload failed:', error);
     }
+  }, [item.ID, token]);
+
+  const updateItemBoxId = async () => {
+    try {
+      const response = await axios.put(`${process.env.REACT_APP_API_URL}/items/${item.id}`, {
+        box_id: selectedBoxId,
+      }, {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      // Update the item's boxId
+      item.box_id = selectedBoxId;
+    } catch (error) {
+      console.error('Error updating item boxId:', error);
+    }
   };
 
-  const handleSave = async () => {
+  const handleSave = useCallback( async () => {
     let imagePath;
     // 1. Handle image upload first if a new image is selected
     if (fileInputRef.current.files[0]) {
       imagePath = await handleImageUpload();
     }
-    console.log(selectedBoxId)
+    console.log("Selected box ID:", selectedBoxId)
 
     // 2. Update item details (name, description, etc.)
     try {
@@ -148,7 +164,7 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
       // Handle update error
       console.error('Item update failed:', error);
     }
-  };
+  }, [item.ID, name, description, selectedBoxId, token, onSave, handleImageUpload]);
 
   const handleImageError = (e) => {
     e.target.src = '/images/default.jpg'; // Fallback to default image on error
@@ -216,12 +232,13 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
       <select value={selectedBoxId} onChange={handleBoxChange}>
         <option value="">No box</option>
         {boxes.map((box) => (
-          console.log('Box:', box.ID),
+          // eslint-disable-next-line 
+          console.log('Box at the selection point:', box.ID),
           <option key={box.ID} value={box.ID}>
             {box.name}
           </option>
         ))}
-      </select>
+      </select>     
       <br/>
       <br/>
       <Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" component="label" htmlFor="editItemImageUpload">