working on assigning a box to an item

src/components/ItemDetails.js

@@ -1,6 +1,6 @@
 // src/components/ItemDetails.js
 import React, { useState, useEffect, useRef } from 'react';
-import { TextField, Button, Container, Avatar } from '@mui/material';
+import { TextField, Button, Container, Avatar, Typography } from '@mui/material';
 import axios from 'axios';
 import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
 //import { useNavigate } from 'react-router-dom'; // Import useNavigate
@@ -13,6 +13,52 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
   const fileInputRef = useRef(null); // Add this line to define fileInputRef
   const [imageOverlayVisible, setImageOverlayVisible] = useState(false);
   // const navigate = useNavigate(); // Initialize useNavigate
+  const [boxName, setBoxName] = useState('');
+  const [boxes, setBoxes] = useState([]);
+  const [selectedBoxId, setSelectedBoxId] = useState(boxId);
+
+  useEffect(() => {
+    const fetchBoxes = async () => {
+      try {
+        const response = await axios.get(`${process.env.REACT_APP_API_URL}/boxes`, {
+          headers: { Authorization: `Bearer ${token}` }
+        });
+        setBoxes(response.data);
+      } catch (error) {
+        console.error('Error fetching boxes:', error);
+      }
+    };
+    fetchBoxes();
+  }, [token]);
+
+  const handleBoxChange = (event) => {
+    setSelectedBoxId(event.target.value);
+    console.log('Selected box ID:', event.target.value);
+  };
+
+  useEffect(() => {
+    // Function to fetch box details
+    const getBoxDetails = async (boxId) => {
+      try {
+        const boxIdNumber = +boxId;
+        if (isNaN(boxIdNumber)) {
+          console.error('Invalid boxId:', boxId);
+          return;
+        }
+        const response = await axios.get(`${process.env.REACT_APP_API_URL}/boxes/${+boxId}`, {
+          headers: { Authorization: `Bearer ${token}` }
+        });
+        setBoxName(response.data.name);
+      } catch (error) {
+        console.error('Error fetching box details:', error);
+      }
+    };
+    
+    // Fetch the box details when the component mounts or the selectedBoxId changes
+    if (selectedBoxId !== null) {
+      getBoxDetails(selectedBoxId);
+    }
+  }, [selectedBoxId, token, boxId]);
 
   useEffect(() => {
     // Function to fetch image similar to getImageSrc in Items.js
@@ -87,11 +133,12 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
     if (fileInputRef.current.files[0]) {
       imagePath = await handleImageUpload();
     }
+    console.log(selectedBoxId)
 
     // 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 }, // Use teh uploaded image path
+        { name, description, image_path: imagePath, BoxID: selectedBoxId }, // Use teh uploaded image path
         {
           headers: { Authorization: `Bearer ${token}` }
         }
@@ -166,6 +213,17 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
         style={{ display: 'none' }} 
         id="editItemImageUpload" // Unique ID
       />
+      <select value={selectedBoxId} onChange={handleBoxChange}>
+        <option value="">No box</option>
+        {boxes.map((box) => (
+          console.log('Box:', box.ID),
+          <option key={box.ID} value={box.ID}>
+            {box.name}
+          </option>
+        ))}
+      </select>
+      <br/>
+      <br/>
       <Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" component="label" htmlFor="editItemImageUpload"> 
         Upload Image
         <input