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 { .App-header {
background-color: #282c34; background-color: #555555;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

2
src/App.js
View File

@ -10,6 +10,8 @@ import { createContext } from 'react';
import './styles.css' import './styles.css'
export const AppContext = createContext(); export const AppContext = createContext();
export const PRIMARY_COLOR = '#333';
export const SECONDARY_COLOR = '#ffffff';
function App() { function App() {
const [token, setToken] = useState(localStorage.getItem('token')); 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 { Delete as DeleteIcon } from '@mui/icons-material';
import { Link as RouterLink } from 'react-router-dom'; // Import Link from react-router-dom import { Link as RouterLink } from 'react-router-dom'; // Import Link from react-router-dom
import axios from 'axios'; import axios from 'axios';
import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
export default function Boxes({ token }) { export default function Boxes({ token }) {
const [boxes, setBoxes] = useState([]); const [boxes, setBoxes] = useState([]);
const [newBoxName, setNewBoxName] = useState(''); const [newBoxName, setNewBoxName] = useState('');
const apiUrl = `${process.env.REACT_APP_API_URL}/boxes`; 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(() => { useEffect(() => {
console.log('Token:' + token); //console.log('Token:' + token);
axios.get(`${process.env.REACT_APP_API_URL}/boxes`, { axios.get(`${process.env.REACT_APP_API_URL}/boxes`, {
headers: { Authorization: `Bearer ${token}` } headers: { Authorization: `Bearer ${token}` }
}).then(response => { }).then(response => {
@ -21,7 +29,7 @@ export default function Boxes({ token }) {
// Log boxes state changes outside the useEffect // Log boxes state changes outside the useEffect
useEffect(() => { useEffect(() => {
console.log('Boxes updated:', boxes); //console.log('Boxes updated:', boxes);
}, [boxes]); }, [boxes]);
const handleCreateBox = () => { const handleCreateBox = () => {
@ -50,7 +58,7 @@ export default function Boxes({ token }) {
value={newBoxName} value={newBoxName}
onChange={(e) => setNewBoxName(e.target.value)} 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 Add Box
</Button> </Button>
<List> <List>
@ -62,7 +70,7 @@ export default function Boxes({ token }) {
}> }>
<ListItemText <ListItemText
primary={ 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} {box.name}
</RouterLink> </RouterLink>
} }

7
src/components/ItemDetails.js
View File

@ -2,6 +2,7 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { TextField, Button, Container, Avatar } from '@mui/material'; import { TextField, Button, Container, Avatar } from '@mui/material';
import axios from 'axios'; import axios from 'axios';
import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
//import { useNavigate } from 'react-router-dom'; // Import useNavigate //import { useNavigate } from 'react-router-dom'; // Import useNavigate
export default function ItemDetails({ item, token, onSave, onClose, boxId }) { 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' }} style={{ display: 'none' }}
id="editItemImageUpload" // Unique ID 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 Upload Image
<input <input
type="file" type="file"
@ -179,10 +180,10 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
/> />
</Button> </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 Save Changes
</Button> </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> </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 axios from 'axios';
import { useParams, useLocation } from 'react-router-dom'; import { useParams, useLocation } from 'react-router-dom';
import ItemDetails from './ItemDetails'; import ItemDetails from './ItemDetails';
import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
export default function Items({ token }) { export default function Items({ token }) {
const { id: boxId } = useParams(); const { id: boxId } = useParams();
@ -30,11 +30,22 @@ export default function Items({ token }) {
const [editingItem, setEditingItem] = useState(null); const [editingItem, setEditingItem] = useState(null);
const location = useLocation(); const location = useLocation();
const boxName = location.state?.boxName || 'Unknown Box'; const boxName = location.state?.boxName || 'Unknown Box';
// const boxID = location.state?.boxId; // used in handleClose function
const [itemImages, setItemImages] = useState({}); const [itemImages, setItemImages] = useState({});
const fileInputRef = useRef(null); const fileInputRef = useRef(null);
const [openAddItemDialog, setOpenAddItemDialog] = useState(false); // For Add Item dialog 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) => { // const handleSelectItem = (item) => {
// setSelectedItem(item); // setSelectedItem(item);
// }; // };
@ -63,7 +74,7 @@ export default function Items({ token }) {
'Content-Type': 'multipart/form-data' 'Content-Type': 'multipart/form-data'
} }
}); });
console.log('Image uploaded successfully!'); // console.log('Image uploaded successfully!');
return response.data.imagePath; // Indicate successful upload return response.data.imagePath; // Indicate successful upload
} catch (error) { } catch (error) {
console.error('Image upload failed:', error); console.error('Image upload failed:', error);
@ -82,7 +93,7 @@ export default function Items({ token }) {
Authorization: `Bearer ${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 // 2. If item creation is successful, upload the image
if (newItemResponse.status === 200 && fileInputRef.current.files[0]) { 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]); const uploadedImagePath = await handleImageUpload(newItemId, fileInputRef.current.files[0]);
if (uploadedImagePath) { 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 // You might want to update your item in the backend with the image path
// For example: // For example:
@ -170,7 +181,7 @@ export default function Items({ token }) {
}, [token]); }, [token]);
const fetchItems = useCallback(() => { const fetchItems = useCallback(() => {
axios.get(`${process.env.REACT_APP_API_URL}/boxes/${boxId}/items`, { axios.get( url, {
headers: { Authorization: `Bearer ${token}` } headers: { Authorization: `Bearer ${token}` }
}).then(response => { }).then(response => {
setItems(response.data); 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(() => { useEffect(() => {
fetchItems(); fetchItems();
@ -237,7 +249,7 @@ export default function Items({ token }) {
return ( return (
<Container> <Container>
<h2>Items in Box: {boxName}</h2> <h2>Items in Box: {boxName === "Unknown Box" ? "All Boxes" : boxName}</h2>
<input <input
type="file" type="file"
@ -247,7 +259,7 @@ export default function Items({ token }) {
id="newItemImageUpload" // Unique ID 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 Add Item
</Button> </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 { Button, TextField, Container, Typography, Alert } from '@mui/material';
import axios from 'axios'; import axios from 'axios';
import { useNavigate } from 'react-router-dom'; // Import useNavigate import { useNavigate } from 'react-router-dom'; // Import useNavigate
import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
export default function Login({ setToken }) { export default function Login({ setToken }) {
const [username, setUsername] = useState(''); const [username, setUsername] = useState('');
@ -51,7 +52,7 @@ export default function Login({ setToken }) {
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} 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 Login
</Button> </Button>
</form> </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 { AppBar, Toolbar, Typography, Button } from '@mui/material';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { useContext } from 'react'; import { useContext } from 'react';
import { AppContext } from '../App'; import { AppContext, PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
export default function Navbar() { export default function Navbar() {
const navigate = useNavigate(); const navigate = useNavigate();
const context = useContext(AppContext); const context = useContext(AppContext);
console.log('Context:', context); const debugLog = (message) => {
if (process.env.DEBUG_API) {
console.log(message);
}
};
debugLog('Context:', context);
if (!context) { if (!context) {
throw new Error('AppContext is not available'); throw new Error('AppContext is not available');
@ -24,9 +29,9 @@ export default function Navbar() {
return ( return (
<AppBar position="static"> <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 }}> <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
Boxes App Boxes
</Typography> </Typography>
<Button color="inherit" component={Link} to="/login">Login</Button> <Button color="inherit" component={Link} to="/login">Login</Button>
<Button color="inherit" component={Link} to="/boxes">Boxes</Button> <Button color="inherit" component={Link} to="/boxes">Boxes</Button>