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

Set many console.log messages to work only if DEBUG_API environment variable is set. Fixed "all items"

This commit is contained in:
Steve White 2024-10-13 11:51:53 -05:00
parent ba57c40471
commit ee411cdc30
7 changed files with 51 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.css
View File

@ -14,7 +14,7 @@
}
.App-header {
background-color: #282c34;
background-color: #555555;
min-height: 100vh;
display: flex;
flex-direction: column;

2
src/App.js
View File

@ -10,6 +10,8 @@ import { createContext } from 'react';
import './styles.css'
export const AppContext = createContext();
export const PRIMARY_COLOR = '#333';
export const SECONDARY_COLOR = '#ffffff';
function App() {
const [token, setToken] = useState(localStorage.getItem('token'));

18
src/components/Boxes.js
View File

@ -4,14 +4,22 @@ import { Container, Button, TextField, List, ListItem, ListItemText, IconButton
import { Delete as DeleteIcon } from '@mui/icons-material';
import { Link as RouterLink } from 'react-router-dom'; // Import Link from react-router-dom
import axios from 'axios';
import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
export default function Boxes({ token }) {
const [boxes, setBoxes] = useState([]);
const [newBoxName, setNewBoxName] = useState('');
const apiUrl = `${process.env.REACT_APP_API_URL}/boxes`;
console.log("URL is" + apiUrl)
const debugApi = () => {
if (process.env.DEBUG_API) {
console.log("URL is " + apiUrl);
}
};
debugApi();
useEffect(() => {
console.log('Token:' + token);
//console.log('Token:' + token);
axios.get(`${process.env.REACT_APP_API_URL}/boxes`, {
headers: { Authorization: `Bearer ${token}` }
}).then(response => {
@ -21,7 +29,7 @@ export default function Boxes({ token }) {
// Log boxes state changes outside the useEffect
useEffect(() => {
console.log('Boxes updated:', boxes);
//console.log('Boxes updated:', boxes);
}, [boxes]);
const handleCreateBox = () => {
@ -50,7 +58,7 @@ export default function Boxes({ token }) {
value={newBoxName}
onChange={(e) => setNewBoxName(e.target.value)}
/>
<Button variant="contained" color="primary" onClick={handleCreateBox}>
<Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" onClick={handleCreateBox}>
Add Box
</Button>
<List>
@ -62,7 +70,7 @@ export default function Boxes({ token }) {
}>
<ListItemText
primary={
<RouterLink to={`/boxes/${box.ID}/items`} state={{ boxName: box.name}}> {/* Use Link component */}
<RouterLink to={`/boxes/${box.ID}/items`} state={{ boxName: box.name, boxID: box.ID }}> {/* Use Link component */}
{box.name}
</RouterLink>
}

7
src/components/ItemDetails.js
View File

@ -2,6 +2,7 @@
import React, { useState, useEffect, useRef } from 'react';
import { TextField, Button, Container, Avatar } from '@mui/material';
import axios from 'axios';
import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
//import { useNavigate } from 'react-router-dom'; // Import useNavigate
export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
@ -165,7 +166,7 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
style={{ display: 'none' }}
id="editItemImageUpload" // Unique ID
/>
<Button variant="contained" component="label" htmlFor="editItemImageUpload">
<Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" component="label" htmlFor="editItemImageUpload">
Upload Image
<input
type="file"
@ -179,10 +180,10 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
/>
</Button>
<Button variant="contained" color="primary" onClick={handleSave}>
<Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" onClick={handleSave}>
Save Changes
</Button>
<Button variant="contained" color="primary" onClick={onClose}>Close</Button>
<Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" onClick={onClose}>Close</Button>
</Container>
);
}

28
src/components/Items.js
View File

@ -19,7 +19,7 @@ import { Delete as DeleteIcon, Edit as EditIcon } from '@mui/icons-material';
import axios from 'axios';
import { useParams, useLocation } from 'react-router-dom';
import ItemDetails from './ItemDetails';
import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
export default function Items({ token }) {
const { id: boxId } = useParams();
@ -30,11 +30,22 @@ export default function Items({ token }) {
const [editingItem, setEditingItem] = useState(null);
const location = useLocation();
const boxName = location.state?.boxName || 'Unknown Box';
// const boxID = location.state?.boxId; // used in handleClose function
const [itemImages, setItemImages] = useState({});
const fileInputRef = useRef(null);
const [openAddItemDialog, setOpenAddItemDialog] = useState(false); // For Add Item dialog
const { id } = useParams();
const boxID = id;
const url = boxId === undefined ? `${process.env.REACT_APP_API_URL}/items` : `${process.env.REACT_APP_API_URL}/boxes/${boxId}/items`;
const debugLog = (message) => {
if (process.env.DEBUG_API) {
console.log(message);
}
};
debugLog("Box ID: " + boxID);
// const handleSelectItem = (item) => {
// setSelectedItem(item);
// };
@ -63,7 +74,7 @@ export default function Items({ token }) {
'Content-Type': 'multipart/form-data'
}
});
console.log('Image uploaded successfully!');
// console.log('Image uploaded successfully!');
return response.data.imagePath; // Indicate successful upload
} catch (error) {
console.error('Image upload failed:', error);
@ -82,7 +93,7 @@ export default function Items({ token }) {
Authorization: `Bearer ${token}`
}
});
console.log('New item created:', newItemResponse.status);
//console.log('New item created:', newItemResponse.status);
// 2. If item creation is successful, upload the image
if (newItemResponse.status === 200 && fileInputRef.current.files[0]) {
@ -90,7 +101,7 @@ export default function Items({ token }) {
const uploadedImagePath = await handleImageUpload(newItemId, fileInputRef.current.files[0]);
if (uploadedImagePath) {
console.log("Image path to save:", uploadedImagePath);
// console.log("Image path to save:", uploadedImagePath);
// You might want to update your item in the backend with the image path
// For example:
@ -170,7 +181,7 @@ export default function Items({ token }) {
}, [token]);
const fetchItems = useCallback(() => {
axios.get(`${process.env.REACT_APP_API_URL}/boxes/${boxId}/items`, {
axios.get( url, {
headers: { Authorization: `Bearer ${token}` }
}).then(response => {
setItems(response.data);
@ -185,7 +196,8 @@ export default function Items({ token }) {
});
});
});
}, [boxId, token, getImageSrc]);
}, [token, getImageSrc, url]);
// lint says I don't need boxId here
useEffect(() => {
fetchItems();
@ -237,7 +249,7 @@ export default function Items({ token }) {
return (
<Container>
<h2>Items in Box: {boxName}</h2>
<h2>Items in Box: {boxName === "Unknown Box" ? "All Boxes" : boxName}</h2>
<input
type="file"
@ -247,7 +259,7 @@ export default function Items({ token }) {
id="newItemImageUpload" // Unique ID
/>
<Button variant="contained" color="primary" onClick={handleAddItem}>
<Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}variant="contained" color="primary" onClick={handleAddItem}>
Add Item
</Button>

3
src/components/Login.js
View File

@ -3,6 +3,7 @@ import React, { useState } from 'react';
import { Button, TextField, Container, Typography, Alert } from '@mui/material';
import axios from 'axios';
import { useNavigate } from 'react-router-dom'; // Import useNavigate
import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
export default function Login({ setToken }) {
const [username, setUsername] = useState('');
@ -51,7 +52,7 @@ export default function Login({ setToken }) {
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Button variant="contained" color="primary" type="submit" fullWidth>
<Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" type="submit" fullWidth>
Login
</Button>
</form>

13
src/components/Navbar.js
View File

@ -3,12 +3,17 @@ import React from 'react';
import { AppBar, Toolbar, Typography, Button } from '@mui/material';
import { Link, useNavigate } from 'react-router-dom';
import { useContext } from 'react';
import { AppContext } from '../App';
import { AppContext, PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
export default function Navbar() {
const navigate = useNavigate();
const context = useContext(AppContext);
console.log('Context:', context);
const debugLog = (message) => {
if (process.env.DEBUG_API) {
console.log(message);
}
};
debugLog('Context:', context);
if (!context) {
throw new Error('AppContext is not available');
@ -24,9 +29,9 @@ export default function Navbar() {
return (
<AppBar position="static">
<Toolbar>
<Toolbar sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
Boxes App
Boxes
</Typography>
<Button color="inherit" component={Link} to="/login">Login</Button>
<Button color="inherit" component={Link} to="/boxes">Boxes</Button>