Fixed item creation and display

src/App.js

@@ -17,7 +17,7 @@ function App() {
         <Route path="/login" element={<Login setToken={setToken} />} />
         <Route path="/boxes" element={<Boxes token={token} />} />
         <Route path="/items" element={<Items token={token} />} />
-        <Route path="/boxes/:id/items" element={<Items boxId={useParams().id} token={token} />} />
+        <Route path="/boxes/:id/items" element={<Items box_id={useParams().id} token={token} />} />
       </Routes>
     </Router>
   );

src/components/Items.js

@@ -1,28 +1,130 @@
 // src/components/Items.js
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
-import { Container, List, ListItem, ListItemText } from '@mui/material';
+import { 
+  Container, 
+  List, 
+  ListItem, 
+  ListItemText,
+  TextField,
+  Button,
+  IconButton, 
+  Typography, // Import Typography for displaying image paths
+} from '@mui/material';
+import { Delete as DeleteIcon } from '@mui/icons-material';
 import axios from 'axios';
-import { useParams } from 'react-router-dom'; // Import useParams
+import { useParams } from 'react-router-dom'; 
 
 
 export default function Items({ token }) {
-  const { id: boxId } = useParams(); // Get boxId from URL parameters
+  const { id: boxId } = useParams(); 
   const [items, setItems] = useState([]);
-  console.log("boxId is " + boxId)
+  const [newItemName, setNewItemName] = useState('');
-  useEffect(() => {
+  const [newItemDescription, setNewItemDescription] = useState('');
+  const [newItemImagePath, setNewItemImagePath] = useState(`/images/default.jpg`); 
+
+  // Use useCallback to memoize fetchItems
+  const fetchItems = useCallback(() => {
+    console.log('Fetching items for box:', boxId);
     axios.get(`${process.env.REACT_APP_API_URL}/boxes/${boxId}/items`, {
-      headers: { Authorization: `Bearer ${token}` }
+        headers: { Authorization: `Bearer ${token}` }
     }).then(response => {
-      setItems(response.data);
+        console.log('Items:', response.data);
+        setItems(response.data);
     });
-  }, [boxId, token]);
+    }, [boxId, token]); // Include dependencies for fetchItems
+
+  useEffect(() => {
+    fetchItems();
+  }, [boxId, token, fetchItems]);
+
+  const handleAddItem = () => {
+    console.log('Adding item to box:', boxId);
+    console.log('Item Name:', newItemName);
+    console.log('Item Description:', newItemDescription);
+    console.log('Item Image Path:', newItemImagePath);
+    console.log('Token:', token);
+
+    axios.post(`${process.env.REACT_APP_API_URL}/items`, 
+      { 
+        name: newItemName, 
+        description: newItemDescription,
+        box_id: parseInt(boxId, 10), // Assuming your API needs box_id to associate the item
+        //image_path: newItemImagePath // Include the image path in the request
+      }, 
+      {
+        headers: { Authorization: `Bearer ${token}` }
+      }
+    ).then(response => {
+      setNewItemName('');
+      setNewItemDescription('');
+      setNewItemImagePath(''); // Clear the image path field
+      fetchItems(); // Refresh the item list after adding
+    });
+  };
+
+  const handleDeleteItem = (itemId) => {
+    axios.delete(`${process.env.REACT_APP_API_URL}/items/${itemId}`, {
+      headers: { Authorization: `Bearer ${token}` }
+    }).then(() => {
+      fetchItems(); // Refresh the item list after deleting
+    });
+  };
 
   return (
     <Container>
+      <h2>Items in Box: {boxId}</h2>
+
+      {/* Add Item Form */}
+      <TextField
+        label="Item Name"
+        variant="outlined"
+        fullWidth
+        margin="normal"
+        value={newItemName}
+        onChange={(e) => setNewItemName(e.target.value)}
+      />
+      <TextField
+        label="Item Description"
+        variant="outlined"
+        fullWidth
+        margin="normal"
+        value={newItemDescription}
+        onChange={(e) => setNewItemDescription(e.target.value)}
+      />
+      <TextField 
+        label="Item Image Path" 
+        variant="outlined" 
+        fullWidth 
+        margin="normal"
+        value={newItemImagePath}
+        onChange={(e) => setNewItemImagePath(e.target.value)} 
+      />
+      <Button variant="contained" color="primary" onClick={handleAddItem}>
+        Add Item
+      </Button>
+
+      {console.log("Items List:", items)} 
+
+      {/* Item List */}
       <List>
-        {items.map((item) => (
+      {items.map((item) => (
-          <ListItem key={item.id}>
+          console.log("Item ID:", item.ID),
-            <ListItemText primary={item.name} secondary={item.description} />
+          <ListItem key={item.ID} secondaryAction={
+            <IconButton edge="end" onClick={() => handleDeleteItem(item.ID)}>
+              <DeleteIcon />
+            </IconButton>
+          }>
+            <ListItemText 
+              primary={item.name} 
+              secondary={
+                <>
+                  <Typography variant="body2">{item.description}</Typography>
+                  {item.image_path && ( // Conditionally render image path
+                    <Typography variant="caption">Image: {item.image_path}</Typography>
+                  )}
+                </>
+              } 
+            />
           </ListItem>
         ))}
       </List>