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

Compare commits

base: stwhite:main
Branches Tags
stwhite:main
stwhite:skeleton
stwhite:error-handling
stwhite:api
stwhite:ChatGPT
..
compare: stwhite:ChatGPT
Branches Tags
stwhite:main
stwhite:skeleton
stwhite:error-handling
stwhite:api
stwhite:ChatGPT

No commits in common. "main" and "ChatGPT" have entirely different histories.
main ... ChatGPT

28 changed files with 909 additions and 1584 deletions
Show Stats Expand all files Collapse all files

5
.dockerignore
View File

@ -1,5 +0,0 @@
node_modules
.git
*.log
build
.DS_Store

5
.env
View File

@ -1,2 +1,5 @@
REACT_APP_API_URL=http://nebula1:8080
# URL of the API
REACT_APP_API_URL=http://localhost:8080
# Base URL of the webapp
REACT_APP_BASE_URL="/"

7
Dockerfile
View File

@ -1,7 +0,0 @@
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY .env .
COPY . .
CMD ["npm", "run", "build"]

23
Dockerfile.build
View File

@ -1,23 +0,0 @@
# Stage 1: Install dependencies
FROM node:14 AS build-stage
WORKDIR /app
# Copy package.json and package-lock.json first to leverage caching
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the rest of your application code
COPY .env .
COPY . .
# Build the application
RUN npm run build
# Final stage: Use a minimal base image
FROM alpine:latest
# Copy the build output from the previous stage
COPY --from=build-stage /app/build ./build

20
Dockerfile.create
View File

@ -1,20 +0,0 @@
# Dockerfile.create
FROM node:14 AS builder
# Set working directory
WORKDIR /app
# Copy package.json and package-lock.json
COPY package*.json ./
# Install dependencies
RUN npm install
RUN npm install -g serve
# Copy the rest of the application code
COPY . .
COPY .env .
RUN npm build .
CMD ["serve", "-s", "build"]

4
Dockerfile.nginx
View File

@ -1,4 +0,0 @@
FROM nginx:alpine
COPY build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

18
Dockerfile.update
View File

@ -1,18 +0,0 @@
# Dockerfile.update
FROM node:14
# Set working directory
WORKDIR /app
# Copy package.json and package-lock.json
COPY package*.json ./
ENV REACT_APP_API_URL=http://zbox.local:8080
# Install dependencies
RUN npm install
# Copy the rest of the application code
COPY . .
COPY .env .
CMD ["npm", "run", "build"]

18
README.md
View File

@ -27,21 +27,3 @@ This is the frontend application for the Boxes App, built with React. It allows
1. **Clone the repository:**
```bash
git clone git@gitea.r8z.us:stwhite/boxes-fe.git
2. create the docker builder
```bash
docker build -f Dockerfile.build -t boxes-fe-builder .
```
3. build the application using the docker builder
```bash
docker run box-builder:latest
docker container create --name tmp-con boxes-fe-builder -- sleep 1200
docker cp tmp-con:/app/build ./boxes-fe/build
docker rm tmp-con
```
4. copy the appliction to the boxes-api /build directory
```bash
cp -r ./boxes-fe/build/* ../boxes-api/build/
```

7
build.bash
View File

@ -1,7 +0,0 @@
#!/bin/bash
# Create teh react-builder image
docker build -f Dockerfile.create -t react-builder:latest .
# Run the react-builder image with local build/ dir mounted
docker run -v $(pwd)/build:/app/build react-builder:latest
# create the nginx container:
docker build --no-cache -f Dockerfile.nginx -t boxes-fe:latest .

10
package-lock.json generated
View File

@ -16,7 +16,6 @@
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.7.7",
"lucide-react": "^0.454.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.2",
@ -13982,15 +13981,6 @@
"yallist": "^3.0.2"
}
},
"node_modules/lucide-react": {
"version": "0.454.0",
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.454.0.tgz",
"integrity": "sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==",
"license": "ISC",
"peerDependencies": {
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
}
},
"node_modules/lz-string": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",

1
package.json
View File

@ -11,7 +11,6 @@
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.7.7",
"lucide-react": "^0.454.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.2",

2
public/index.html
View File

@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Boxes</title>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

38
src/App.js
View File

@ -8,9 +8,7 @@ import Items from './components/Items';
import Navbar from './components/Navbar'; // Correct import here
import Admin from './components/Admin'; // Correct import here
import { createContext } from 'react';
import ErrorBoundary from './components/ErrorBoundary';
import './styles.css'
import { EnhancedThemeProvider } from './components/themeProvider';
export const AppContext = createContext();
export const PRIMARY_COLOR = '#333';
@ -27,16 +25,12 @@ function App() {
}, [token]);
return (
<EnhancedThemeProvider>
<AppContext.Provider value={{ token, setToken }}>
<ErrorBoundary>
<Router>
<Navbar />
<AppRoutes token={token} setToken={setToken} />
</Router>
</ErrorBoundary>
</AppContext.Provider>
</EnhancedThemeProvider>
<AppContext.Provider value={{ token, setToken }}>
<Router>
<Navbar />
<AppRoutes token={token} setToken={setToken} />
</Router>
</AppContext.Provider>
);
}
@ -46,24 +40,24 @@ function AppRoutes({ token, setToken }) {
return (
<>
<Routes>
<Route path="/api/v1/login" element={<Login setToken={setToken} />} />
<Route path="/login" element={<Login setToken={setToken} />} />
<Route
path="/api/v1/boxes"
element={token ? <Boxes token={token} /> : <Navigate to="/api/v1/login" replace />}
path="/boxes"
element={token ? <Boxes token={token} /> : <Navigate to="/login" replace />}
/>
<Route
path="/api/v1/items"
element={token ? <Items token={token} /> : <Navigate to="/api/v1/login" replace />}
path="/items"
element={token ? <Items token={token} /> : <Navigate to="/login" replace />}
/>
<Route
path="/api/v1/boxes/:id/items"
element={token ? <Items box_id={id} token={token} /> : <Navigate to="/api/v1/login" replace />}
path="/boxes/:id/items"
element={token ? <Items box_id={id} token={token} /> : <Navigate to="/login" replace />}
/>
<Route
path="/api/v1/admin"
element={token ? <Admin token={token}/> : <Navigate to="/api/v1/login" replace />}
path="/admin"
element={token ? <Admin token={token}/> : <Navigate to="/login" replace />}
/>
<Route path="*" element={<Navigate to={token ? "/api/v1/boxes" : "/api/v1/login"} replace />} />
<Route path="*" element={<Navigate to={token ? "/boxes" : "/login"} replace />} />
</Routes>
</>
);

29
src/Dockerfile Normal file
View File

@ -0,0 +1,29 @@
# Use an official Node runtime as the base image
FROM node:14 as build
# Set the working directory in the container
WORKDIR /app
# Copy package.json and package-lock.json
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the rest of the application code
COPY . .
# Build the app
RUN npm run build
# Use nginx to serve the static files
FROM nginx:alpine
# Copy the build output to replace the default nginx contents
COPY --from=build /app/build /usr/share/nginx/html
# Expose port 80
EXPOSE 80
# Start nginx
CMD ["nginx", "-g", "daemon off;"]

422
src/components/Admin.js
View File

@ -1,309 +1,235 @@
// src/components/Admin.js
import React, { useState, useEffect, useRef } from 'react';
// import axios from 'axios';
import axios from 'axios';
import { Link, useNavigate } from 'react-router-dom';
import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
import './Admin.css';
import { useApiCall } from './hooks/useApiCall';
import { api } from '../services/api';
import './Admin.css'; // Import the CSS file
import {
Typography,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Button,
Alert,
Container,
Box,
TextField,
CircularProgress,
Tab,
Tabs
} from '@mui/material';
Typography,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Button,
Alert,
Container,
Box,
TextField,
Tab
} from '@mui/material';
export default function Admin() {
const [users, setUsers] = useState([]);
const [tags, setTags] = useState([]);
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [activeTab, setActiveTab] = useState(0);
const navigate = useNavigate();
const fileInputRef = useRef(null);
const { execute: fetchUsers, loading: loadingUsers, error: usersError } = useApiCall();
const { execute: fetchTags, loading: loadingTags, error: tagsError } = useApiCall();
const { execute: createUser, loading: creatingUser, error: createError } = useApiCall();
const { execute: deleteUser, loading: deletingUser, error: deleteError } = useApiCall();
const { execute: deleteTag, loading: deletingTag, error: deleteTagError } = useApiCall();
const { execute: backupDB, loading: backingUp, error: backupError } = useApiCall();
const { execute: restoreDB, loading: restoring, error: restoreError } = useApiCall();
useEffect(() => {
const getInitialData = async () => {
try {
const [usersResponse, tagsResponse] = await Promise.all([
fetchUsers(() => api.admin.getUsers(localStorage.getItem('token'))),
fetchTags(() => api.tags.getAll(localStorage.getItem('token')))
]);
setUsers(usersResponse.data);
setTags(tagsResponse.data);
} catch (err) {}
};
getInitialData();
axios.get(`${process.env.REACT_APP_API_URL}/admin/user`, {
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
})
.then(response => {
setUsers(response.data);
})
.catch(error => {
console.error(error);
});
}, []);
const fetchUsers = async () => {
try {
const response = await axios.get(`${process.env.REACT_APP_API_URL}/admin/user`, {
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
});
setUsers(response.data);
} catch (error) {
console.error('Error fetching users:', error);
// Optionally, set an error message
// setErrorMessage('Failed to fetch users. Please try again.');
}
};
const handleCreateUser = async (e) => {
e.preventDefault();
try {
const response = await createUser(() =>
api.admin.createUser(
localStorage.getItem('token'),
{ username, password, email }
)
);
const response = await axios.post(`${process.env.REACT_APP_API_URL}/admin/user`, {
username,
password,
email
}, {
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
});
setUsers([...users, response.data]);
setUsername('');
setPassword('');
setEmail('');
} catch (err) {}
} catch (error) {
console.error(error);
}
};
const handleDeleteUser = async (id) => {
try {
await deleteUser(() =>
api.admin.deleteUser(localStorage.getItem('token'), id)
);
await axios.delete(`${process.env.REACT_APP_API_URL}/admin/user/${id}`, {
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
});
setUsers(users.filter(user => user.id !== id));
} catch (err) {}
};
//setUsers(prevUsers => prevUsers.filter(user => user.id !== id));
fetchUsers();
const handleDeleteTag = async (tagId) => {
if (!window.confirm('Are you sure you want to delete this tag? This will remove it from all items.')) {
return;
} catch (error) {
console.error(error);
}
try {
await deleteTag(() =>
api.tags.delete(localStorage.getItem('token'), tagId)
);
setTags(tags.filter(tag => tag.ID !== tagId));
} catch (err) {}
};
const handleBackupDatabase = async () => {
try {
const response = await backupDB(() =>
api.admin.backupDB(localStorage.getItem('token'))
);
const response = await axios.get(`${process.env.REACT_APP_API_URL}/admin/db`, {
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
responseType: 'blob'
});
const blob = new Blob([response.data], { type: 'application/x-sqlite3' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'database.db';
a.click();
} catch (err) {}
} catch (error) {
console.error(error);
}
};
const handleRestoreDatabase = async (e) => {
e.preventDefault();
if (!fileInputRef.current?.files?.[0]) return;
try {
const file = fileInputRef.current.files[0];
const formData = new FormData();
formData.append('database', fileInputRef.current.files[0]);
formData.append('database', file);
console.log("sending request to restore db")
await restoreDB(() =>
api.admin.restoreDB(localStorage.getItem('token'), formData)
);
alert('Database restored successfully');
navigate('/admin');
} catch (err) {}
const token = localStorage.getItem('token');
if (!token) {
throw new Error('No token found in local storage');
}
const response = await axios.post(`${process.env.REACT_APP_API_URL}/admin/db`, formData, {
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'multipart/form-data'
}
});
if (response.status === 200) {
alert('Database restored successfully');
navigate('/admin');
} else {
throw new Error(`Failed to restore database: ${response.statusText}`);
}
} catch (error) {
console.error(error);
}
};
return (
<Container maxWidth="md">
<Typography variant="h4" gutterBottom>
Admin Dashboard
Admin
</Typography>
{(usersError || createError || deleteError || backupError || restoreError || tagsError || deleteTagError) && (
<Alert severity="error" sx={{ mb: 2 }}>
{usersError?.message || createError?.message || deleteError?.message ||
backupError?.message || restoreError?.message || tagsError?.message || deleteTagError?.message}
</Alert>
)}
<Box component="form" onSubmit={handleCreateUser} sx={{ mb: 4 }}>
<Typography variant="h6" gutterBottom>
Add New User
</Typography>
<TextField
label="Username"
variant="outlined"
value={username}
onChange={(e) => setUsername(e.target.value)}
sx={{ mr: 2 }}
/>
<TextField
label="Password"
type="password"
variant="outlined"
value={password}
onChange={(e) => setPassword(e.target.value)}
sx={{ mr: 2 }}
/>
<TextField
label="Email"
variant="outlined"
value={email}
onChange={(e) => setEmail(e.target.value)}
sx={{ mr: 2 }}
/>
<Button type="submit" sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary">
Add User
</Button>
</Box>
<Tabs value={activeTab} onChange={(e, newValue) => setActiveTab(newValue)} sx={{ mb: 3 }}>
<Tab label="Users" />
<Tab label="Tags" />
<Tab label="Database" />
</Tabs>
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Username</TableCell>
<TableCell>Email</TableCell>
<TableCell>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{users.map(user => (
<TableRow key={user.ID}>
<TableCell style={{ width: '30px' }}>{user.ID}</TableCell>
<TableCell style={{ width: '100px'}}>{user.username}</TableCell>
<TableCell style={{ width: '300px'}}>{user.email}</TableCell>
<TableCell>
<Button
variant="contained"
color="error"
onClick={() => handleDeleteUser(user.ID)}
>
Delete User
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
{activeTab === 0 && (
<>
<Box component="form" onSubmit={handleCreateUser} sx={{ mb: 4 }}>
<Typography variant="h6" gutterBottom>
Add New User
</Typography>
<TextField
label="Username"
variant="outlined"
value={username}
onChange={(e) => setUsername(e.target.value)}
sx={{ mr: 2 }}
disabled={creatingUser}
/>
<TextField
label="Password"
type="password"
variant="outlined"
value={password}
onChange={(e) => setPassword(e.target.value)}
sx={{ mr: 2 }}
disabled={creatingUser}
/>
<TextField
label="Email"
variant="outlined"
value={email}
onChange={(e) => setEmail(e.target.value)}
sx={{ mr: 2 }}
disabled={creatingUser}
/>
<Button
type="submit"
sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
variant="contained"
disabled={creatingUser}
>
{creatingUser ? <CircularProgress size={24} /> : 'Add User'}
</Button>
</Box>
<Box sx={{ mt: 4 }}>
<Button
variant="contained"
color="primary"
onClick={handleBackupDatabase}
sx={{ mr: 2, backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
>
Backup Database
</Button>
{loadingUsers ? (
<CircularProgress />
) : (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Username</TableCell>
<TableCell>Email</TableCell>
<TableCell>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{users.map(user => (
<TableRow key={user.ID}>
<TableCell>{user.ID}</TableCell>
<TableCell>{user.username}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>
<Button
variant="contained"
color="error"
onClick={() => handleDeleteUser(user.ID)}
disabled={deletingUser}
>
{deletingUser ? <CircularProgress size={24} /> : 'Delete User'}
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
</>
)}
{activeTab === 1 && (
<>
<Typography variant="h6" gutterBottom>
Manage Tags
</Typography>
{loadingTags ? (
<CircularProgress />
) : (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Color</TableCell>
<TableCell>Name</TableCell>
<TableCell>Description</TableCell>
<TableCell>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{tags.map(tag => (
<TableRow key={tag.ID}>
<TableCell>
<Box
sx={{
width: 24,
height: 24,
backgroundColor: tag.color,
borderRadius: '50%'
}}
/>
</TableCell>
<TableCell>{tag.name}</TableCell>
<TableCell>{tag.description}</TableCell>
<TableCell>
<Button
variant="contained"
color="error"
onClick={() => handleDeleteTag(tag.ID)}
disabled={deletingTag}
>
{deletingTag ? <CircularProgress size={24} /> : 'Delete Tag'}
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
</>
)}
{activeTab === 2 && (
<Box sx={{ mt: 4 }}>
<Typography variant="h6" gutterBottom>
Database Management
</Typography>
<Button
variant="contained"
onClick={handleBackupDatabase}
sx={{ mr: 2, backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
disabled={backingUp}
>
{backingUp ? <CircularProgress size={24} /> : 'Backup Database'}
</Button>
<Button
variant="contained"
component="label"
sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
disabled={restoring}
>
{restoring ? <CircularProgress size={24} /> : 'Restore Database'}
<input
type="file"
hidden
ref={fileInputRef}
onChange={handleRestoreDatabase}
/>
</Button>
</Box>
)}
<Button
variant="contained"
color="secondary"
component="label"
sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
>
Restore Database
<input
type="file"
hidden
ref={fileInputRef}
onChange={handleRestoreDatabase}
/>
</Button>
</Box>
</Container>
);
}

202
src/components/Boxes.js
View File

@ -1,161 +1,93 @@
// src/components/Boxes.js
import React, { useEffect, useState } from 'react';
import {
Container,
Button,
TextField,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Alert,
CircularProgress,
Avatar,
Box
} from '@mui/material';
import { Delete as DeleteIcon, Inventory as InventoryIcon } from '@mui/icons-material';
import { Link as RouterLink } from 'react-router-dom';
import { Container, Button, TextField, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
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';
import { useApiCall } from './hooks/useApiCall';
import { api } from '../services/api';
export default function Boxes({ token }) {
const [boxes, setBoxes] = useState([]);
const [newBoxName, setNewBoxName] = useState('');
const apiUrl = `${process.env.REACT_APP_API_URL}/boxes`;
const { execute: fetchBoxes, loading: loadingBoxes, error: boxesError } = useApiCall();
const { execute: createBox, loading: creatingBox, error: createError } = useApiCall();
const { execute: deleteBox, loading: deletingBox, error: deleteError } = useApiCall();
const debugApi = () => {
if (process.env.DEBUG_API) {
console.log("URL is " + apiUrl);
}
};
debugApi();
useEffect(() => {
const getBoxes = async () => {
try {
const response = await fetchBoxes(() =>
api.boxes.getAll(token)
);
setBoxes(response.data);
} catch (err) {}
};
getBoxes();
//console.log('Token:' + token);
axios.get(`${process.env.REACT_APP_API_URL}/boxes`, {
headers: { Authorization: `Bearer ${token}` }
}).then(response => {
setBoxes(response.data);
});
}, [token]);
const handleCreateBox = async () => {
if (!newBoxName.trim()) return;
// Log boxes state changes outside the useEffect
useEffect(() => {
//console.log('Boxes updated:', boxes);
}, [boxes]);
try {
const response = await createBox(() =>
api.boxes.create(token, { name: newBoxName })
);
const handleCreateBox = () => {
axios.post(`${process.env.REACT_APP_API_URL}/boxes`, { name: newBoxName }, {
headers: { Authorization: `Bearer ${token}` }
}).then(response => {
setBoxes([...boxes, response.data]);
setNewBoxName('');
} catch (err) {}
});
};
const handleDeleteBox = async (id) => {
try {
await deleteBox(() =>
api.boxes.delete(token, id)
);
const handleDeleteBox = (id) => {
axios.delete(`${process.env.REACT_APP_API_URL}/boxes/${id}`, {
headers: { Authorization: `Bearer ${token}` }
}).then(() => {
setBoxes(boxes.filter(box => box.ID !== id));
} catch (err) {}
});
};
return (
<Container>
{(boxesError || createError || deleteError) && (
<Alert severity="error" sx={{ mb: 2 }}>
{boxesError?.message || createError?.message || deleteError?.message}
</Alert>
)}
{loadingBoxes ? (
<CircularProgress />
) : (
<TableContainer>
<Table size="small">
<TableHead>
<TableRow>
<TableCell width="48px"></TableCell>
<TableCell>Box Name</TableCell>
<TableCell align="right">Actions</TableCell>
<TableContainer>
<Table size="small">
<TableHead>
<TableRow>
<TableCell>Box Name</TableCell>
<TableCell>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{boxes.map((box) => (
<TableRow key={box.ID}>
<TableCell>
<RouterLink to={`/boxes/${box.ID}/items`} state={{ boxName: box.name, boxID: box.ID }}>
{box.name}
</RouterLink>
</TableCell>
<TableCell>
<Button onClick={() => handleDeleteBox(box.ID)} startIcon={<DeleteIcon />}>
Delete
</Button>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{boxes.map((box) => (
<TableRow key={box.ID}>
<TableCell>
<Avatar
sx={{
bgcolor: PRIMARY_COLOR,
width: 32,
height: 32
}}
>
<InventoryIcon sx={{ color: SECONDARY_COLOR, fontSize: 20 }} />
</Avatar>
</TableCell>
<TableCell>
<Box
component={RouterLink}
to={`/api/v1/boxes/${box.ID}/items`}
state={{ boxName: box.name, boxID: box.ID }}
sx={{
textDecoration: 'none',
color: 'inherit',
display: 'flex',
alignItems: 'center',
'&:hover': {
textDecoration: 'underline'
}
}}
>
{box.name}
</Box>
</TableCell>
<TableCell align="right">
<Button
onClick={() => handleDeleteBox(box.ID)}
startIcon={<DeleteIcon />}
disabled={deletingBox}
color="error"
size="small"
>
{deletingBox ? <CircularProgress size={20} /> : 'Delete'}
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
<Box sx={{ mt: 2 }}>
<TextField
label="New Box"
variant="outlined"
fullWidth
value={newBoxName}
onChange={(e) => setNewBoxName(e.target.value)}
disabled={creatingBox}
sx={{ mb: 1 }}
/>
<Button
sx={{
backgroundColor: PRIMARY_COLOR,
borderBottom: '1px solid',
borderColor: '#444',
color: SECONDARY_COLOR
}}
variant="contained"
onClick={handleCreateBox}
disabled={creatingBox || !newBoxName.trim()}
fullWidth
>
{creatingBox ? <CircularProgress size={24} /> : 'Add Box'}
</Button>
</Box>
))}
</TableBody>
</Table>
</TableContainer>
<TextField
label="New Box"
variant="outlined"
fullWidth
value={newBoxName}
onChange={(e) => setNewBoxName(e.target.value)}
/>
<Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" onClick={handleCreateBox}>
Add Box
</Button>
</Container>
);
}

36
src/components/ErrorBoundary.js
View File

@ -1,36 +0,0 @@
import React from 'react';
import { Alert, Button, Container } from '@mui/material';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false, error: null };
}
static getDerivedStateFromError(error) {
return { hasError: true, error };
}
render() {
if (this.state.hasError) {
return (
<Container>
<Alert severity="error" sx={{ mt: 2 }}>
Something went wrong
<Button
onClick={() => window.location.reload()}
variant="outlined"
size="small"
sx={{ ml: 2 }}
>
Reload Page
</Button>
</Alert>
</Container>
);
}
return this.props.children;
}
}
export default ErrorBoundary;

426
src/components/ItemDetails.js
View File

@ -1,230 +1,280 @@
import React, { useState, useEffect, useRef } from 'react';
import {
TextField,
Button,
Container,
Avatar,
Tooltip,
Alert,
CircularProgress,
Box,
Typography
} from '@mui/material';
// src/components/ItemDetails.js
import React, { useState, useEffect, useRef, useCallback } from 'react';
import { TextField, Button, Container, Avatar, Tooltip } from '@mui/material';
import axios from 'axios';
import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
import { useApiCall } from './hooks/useApiCall';
import { api } from '../services/api';
import TagManager from './tagManager';
//import { useNavigate } from 'react-router-dom'; // Import useNavigate
export default function ItemDetails({ item: initialItem, token, onSave, onClose }) {
const [item, setItem] = useState(initialItem);
const [name, setName] = useState(initialItem.name);
const [description, setDescription] = useState(initialItem.description);
const [imagePath, setImagePath] = useState(initialItem.image_path || '');
const [imageSrc, setImageSrc] = useState('/images/default.jpg');
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const fileInputRef = useRef(null);
export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
const [name, setName] = useState(item.name);
const [description, setDescription] = useState(item.description);
const [imagePath, setImagePath] = useState(item.image_path || '');
const [imageSrc, setImageSrc] = useState('/images/default.jpg'); // Initial default image
const fileInputRef = useRef(null); // Add this line to define fileInputRef
const [imageOverlayVisible, setImageOverlayVisible] = useState(false);
// const navigate = useNavigate(); // Initialize useNavigate
// eslint says boxName is defined but never used, but when I remove it it fails to compile
// because boxName is undefined
// eslint-disable-next-line
const [boxName, setBoxName] = useState('');
const [boxes, setBoxes] = useState([]);
const [selectedBoxId, setSelectedBoxId] = useState(initialItem.box_id);
const [selectedBoxId, setSelectedBoxId] = useState(item.box_id);
const { execute: fetchBoxes, loading: loadingBoxes, error: boxesError } = useApiCall();
const { execute: fetchItem, loading: loadingItem } = useApiCall();
const { execute: updateItem, loading: savingItem, error: saveError } = useApiCall();
const { execute: uploadImage, loading: uploadingImage, error: uploadError } = useApiCall();
//console.log("item.box_id: " + item.box_id);
// Single effect to load initial data
useEffect(() => {
const loadInitialData = async () => {
const fetchBoxes = async () => {
try {
// Fetch item and boxes in parallel
const [itemResponse, boxesResponse] = await Promise.all([
fetchItem(() => api.items.getOne(token, initialItem.ID)),
fetchBoxes(() => api.boxes.getAll(token))
]);
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 updatedItem = itemResponse.data;
setItem(updatedItem);
setName(updatedItem.name);
setDescription(updatedItem.description);
setImagePath(updatedItem.image_path || '');
setBoxes(boxesResponse.data);
// Load image
try {
const imageResponse = await api.items.getImage(token, initialItem.ID);
const reader = new FileReader();
reader.onload = () => {
setImageSrc(reader.result);
setLoading(false);
};
reader.readAsDataURL(imageResponse.data);
} catch (err) {
setImageSrc('/default.jpg');
setLoading(false);
const handleBoxChange = (event) => {
const newBoxId = event.target.value;
setSelectedBoxId(newBoxId); // Update only this state
//console.log('Selected box ID:', newBoxId);
};
useEffect(() => {
// Fetch box details only when the selectedBoxId changes
const getBoxDetails = async (boxId) => {
try {
const boxIdNumber = +boxId;
if (isNaN(boxIdNumber)) {
console.error('Invalid boxId:', boxId);
return;
}
} catch (err) {
setError(err);
setLoading(false);
const response = await axios.get(`${process.env.REACT_APP_API_URL}/boxes/${boxIdNumber}`, {
headers: { Authorization: `Bearer ${token}` }
});
setBoxName(response.data.name);
} catch (error) {
console.error('Error fetching box details:', error);
}
};
loadInitialData();
}, []); // Empty dependency array - only run once on mount
if (selectedBoxId !== item.box_id) {
getBoxDetails(selectedBoxId); // Fetch when selected box changes
//console.log("selectedBoxId:", selectedBoxId);
} else if (item.box_id) {
getBoxDetails(item.box_id); // Fetch when boxId exists and selectedBoxId is empty
//console.log("item.box_id:", item.box_id);
}
}, [selectedBoxId, token, item.box_id]); // Removed `boxId` from dependencies
const handleImageUpload = async () => {
if (!fileInputRef.current?.files?.[0]) return null;
useEffect(() => {
// Function to fetch image similar to getImageSrc in Items.js
const getImageSrc = (itemId) => {
return axios.get(`${process.env.REACT_APP_API_URL}/items/${itemId}/image`, {
headers: { Authorization: `Bearer ${token}` },
responseType: 'blob'
})
.then(response => {
if (response.status === 200) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(response.data);
});
} else {
throw new Error('Image fetch failed');
}
})
.catch(() => {
// Return the data URL of the default image if image fetch fails
return new Promise((resolve, reject) => {
const img = new Image();
img.src = '/default.jpg';
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const dataURL = canvas.toDataURL();
resolve(dataURL);
};
img.onerror = reject;
});
});
};
// Fetch the image when the component mounts or the item changes
getImageSrc(item.ID).then(dataUrl => setImageSrc(dataUrl));
}, [item.ID, token]);
// const handleCloseItemDetails = () => {
// onClose(); // Call the onClose prop to close the modal
// navigate(`/boxes/${boxId}/items`); // Navigate back to the items list
// };
const handleImageUpload = useCallback(async () => {
const formData = new FormData();
formData.append('image', fileInputRef.current.files[0]);
try {
const response = await uploadImage(() =>
api.items.uploadImage(token, item.ID, formData)
);
return response.data.imagePath;
} catch (err) {
return null;
const response = await axios.post(`${process.env.REACT_APP_API_URL}/items/${item.ID}/upload`, formData, {
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'multipart/form-data'
}
});
// Handle successful upload (e.g., show a success message)
//console.log('Image uploaded successfully!', response.data.imagePath);
return response.data.imagePath; // Indicate successful upload
} catch (error) {
// Handle upload error (e.g., show an error message)
console.error('Image upload failed:', error);
}
}, [item.ID, token]);
// eslint-disable-next-line
const updateItemBoxId = async () => {
try {
// eslint-disable-next-line
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 () => {
if (fileInputRef.current?.files?.[0]) {
await handleImageUpload();
const handleSave = useCallback( async () => {
let imagePath;
// 1. Handle image upload first if a new image is selected
if (fileInputRef.current.files[0]) {
// eslint-disable-next-line
imagePath = await handleImageUpload();
}
//console.log("Selected box ID:", selectedBoxId)
// 2. Update item details (name, description, etc.)
try {
await updateItem(() => api.items.update(token, item.ID, {
await axios.put(`${process.env.REACT_APP_API_URL}/items/${item.ID}`, {
name,
description,
box_id: +selectedBoxId,
}));
onSave();
} catch (err) {}
box_id: +selectedBoxId, // Ensure the updated selected box is saved
}, {
headers: { Authorization: `Bearer ${token}` }
});
onSave(); // Notify parent to refresh items
} catch (error) {
// 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
};
const handleBoxChange = (event) => {
setSelectedBoxId(event.target.value);
const handleAvatarClick = () => {
setImageOverlayVisible(true);
};
const handleTagsChange = (newTags) => {
setItem(prev => ({...prev, tags: newTags}));
const handleCloseOverlay = () => {
setImageOverlayVisible(false);
};
return (
<Container>
<h3>Edit Item: {name}</h3>
<h3>Edit Item: {item.name}</h3>
{(error || boxesError || saveError || uploadError) && (
<Alert severity="error" sx={{ mb: 2 }}>
{error?.message || boxesError?.message || saveError?.message || uploadError?.message}
</Alert>
{/* Display the item image as an avatar */}
<Tooltip title="Click to enlarge">
<Avatar
src={imageSrc}
alt={name}
onError={handleImageError}
sx={{ width: 200, height: 200, marginBottom: '16px' }} // Style the Avatar
onClick={handleAvatarClick}
/>
</Tooltip>
{imageOverlayVisible && (
<div className="image-overlay">
<img src={imageSrc} alt={name} />
<button className="close-button" onClick={handleCloseOverlay}>
Close
</button>
</div>
)}
<TextField
label="Item Name"
variant="outlined"
fullWidth
margin="normal"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<TextField
label="Item Description"
variant="outlined"
fullWidth
margin="normal"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<TextField
label="Item Image Path"
variant="outlined"
fullWidth
margin="normal"
value={imagePath}
onChange={(e) => setImagePath(e.target.value)}
sx={{ display: 'none' }}
/>
<input
type="file"
accept="image/*"
ref={fileInputRef}
style={{ display: 'none' }}
id="editItemImageUpload" // Unique ID
/>
<select value={selectedBoxId} onChange={handleBoxChange}>
<option value="">No box</option>
{boxes.map((box) => (
// eslint-disable-next-line
//console.log('Box at the selection point:', box.ID),
//console.log("Box name:", box.name),
<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
type="file"
accept="image/*"
id="image-upload"
style={{ display: 'none' }}
onChange={(e) => {
// You can handle image preview here if needed
setImagePath(e.target.files[0].name);
}}
/>
</Button>
{loading ? (
<CircularProgress />
) : (
/* Rest of your JSX remains the same */
// ... existing JSX code ...
<Box>
{/* Image section */}
<Tooltip title="Click to enlarge">
<Avatar
src={imageSrc}
alt={name}
sx={{ width: 200, height: 200, marginBottom: '16px' }}
onClick={() => setImageOverlayVisible(true)}
/>
</Tooltip>
{/* Form fields */}
<TextField
label="Item Name"
variant="outlined"
fullWidth
margin="normal"
value={name}
onChange={(e) => setName(e.target.value)}
disabled={savingItem}
/>
<TextField
label="Item Description"
variant="outlined"
fullWidth
margin="normal"
value={description}
onChange={(e) => setDescription(e.target.value)}
disabled={savingItem}
/>
{/* Box selection */}
{loadingBoxes ? (
<CircularProgress size={24} />
) : (
<select
value={selectedBoxId}
onChange={handleBoxChange}
disabled={savingItem}
>
<option value="">No box</option>
{boxes.map((box) => (
<option key={box.ID} value={box.ID}>
{box.name}
</option>
))}
</select>
)}
{/* Tags section */}
<Box sx={{ my: 2 }}>
<Typography variant="subtitle1" gutterBottom>Tags</Typography>
<TagManager
token={token}
itemId={item.ID}
initialTags={item.tags || []}
onTagsChange={handleTagsChange}
/>
</Box>
{/* Buttons */}
<Box sx={{ mt: 2 }}>
<Button
sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR, mr: 1 }}
variant="contained"
component="label"
disabled={uploadingImage || savingItem}
>
{uploadingImage ? <CircularProgress size={24} /> : 'Upload Image'}
<input
type="file"
accept="image/*"
ref={fileInputRef}
style={{ display: 'none' }}
onChange={(e) => setImagePath(e.target.files[0]?.name || '')}
/>
</Button>
<Button
sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR, mr: 1 }}
variant="contained"
onClick={handleSave}
disabled={savingItem}
>
{savingItem ? <CircularProgress size={24} /> : 'Save Changes'}
</Button>
<Button
sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
variant="contained"
onClick={onClose}
disabled={savingItem}
>
Close
</Button>
</Box>
</Box>
)}
<Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" onClick={handleSave}>
Save Changes
</Button>
<Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" onClick={onClose}>Close</Button>
</Container>
);
}

630
src/components/Items.js
View File

@ -1,9 +1,19 @@
import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
import React, { useEffect, useState, useCallback, useRef } from 'react';
import {
Container,
List,
ListItem,
ListItemText,
TextField,
Button,
IconButton,
TextField,
Typography,
Avatar,
ListItemAvatar,
Dialog,
DialogTitle,
DialogContent,
DialogActions,
TableContainer,
Table,
TableHead,
@ -11,299 +21,327 @@ import {
TableCell,
TableBody,
Box,
Tooltip,
Avatar,
Dialog,
DialogTitle,
DialogContent,
DialogActions,
Alert,
CircularProgress,
Chip,
Typography,
FormGroup
Tooltip
} from '@mui/material';
import { Delete as DeleteIcon, Edit as EditIcon } from '@mui/icons-material';
import { useParams, useLocation } from 'react-router-dom';
import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
import { useApiCall } from './hooks/useApiCall';
import { api } from '../services/api';
import ItemDetails from './ItemDetails';
import TagManager from './tagManager';
const Item = React.memo(({ item, onDelete, onEdit, itemImages }) => (
<TableRow>
<TableCell>
<Avatar src={itemImages[item.ID] || '/images/default.jpg'} />
</TableCell>
<TableCell>{item.name}</TableCell>
<TableCell>{item.description}</TableCell>
<TableCell>
{item.tags?.map(tag => (
<Chip
key={tag.ID}
label={tag.name}
size="small"
style={{
backgroundColor: tag.color,
color: '#fff',
margin: '0 2px'
}}
/>
))}
</TableCell>
<TableCell>
<Box display="flex" justifyContent="space-between" width="100%">
<Tooltip title="Edit Item">
<IconButton onClick={() => onEdit(item)} size="large" sx={{ mr: 1 }}>
<EditIcon />
</IconButton>
</Tooltip>
<Tooltip title="Delete Item">
<IconButton onClick={() => onDelete(item.ID)} size="large" color="error">
<DeleteIcon />
</IconButton>
</Tooltip>
</Box>
</TableCell>
</TableRow>
));
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();
const [items, setItems] = useState([]);
const [newItemName, setNewItemName] = useState('');
const [newItemDescription, setNewItemDescription] = useState('');
// const [newItemImagePath, setNewItemImagePath] = useState('/images/default.jpg');
const [editingItem, setEditingItem] = useState(null);
const location = useLocation();
const boxName = location.state?.boxName || 'All Boxes';
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);
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 [searchQuery, setSearchQuery] = useState('');
const [availableTags, setAvailableTags] = useState([]);
const [selectedTags, setSelectedTags] = useState([]);
const { execute: fetchItems, loading: loadingItems, error: itemsError } = useApiCall();
const { execute: fetchTags, loading: loadingTags, error: tagsError } = useApiCall();
const { execute: createItem, loading: creatingItem, error: createError } = useApiCall();
const { execute: deleteItem, loading: deletingItem, error: deleteError } = useApiCall();
const { execute: uploadImage, loading: uploadingImage, error: uploadError } = useApiCall();
const debugLog = (message) => {
if (process.env.DEBUG_API) {
console.log(message);
}
};
debugLog("Box ID: " + boxID);
// Fetch items and tags on component mount
useEffect(() => {
const loadData = async () => {
try {
// Fetch items and tags in parallel
const [itemsResponse, tagsResponse] = await Promise.all([
fetchItems(() => boxId ? api.items.getByBox(token, boxId) : api.items.getAll(token)),
fetchTags(() => api.tags.getAll(token))
]);
setItems(itemsResponse.data);
setAvailableTags(tagsResponse.data);
// Fetch images for each item
itemsResponse.data.forEach(item => {
api.items.getImage(token, item.ID)
.then(response => {
const reader = new FileReader();
reader.onload = () => {
setItemImages(prev => ({
...prev,
[item.ID]: reader.result
}));
};
reader.readAsDataURL(response.data);
})
.catch(() => {
setItemImages(prev => ({
...prev,
[item.ID]: '/default.jpg'
}));
});
});
} catch (err) {}
};
loadData();
}, [token, boxId]);
// Filter items based on search query and selected tags
const filteredItems = useMemo(() => {
return items.filter(item => {
// Text search match
const textMatch =
item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
item.description.toLowerCase().includes(searchQuery.toLowerCase());
// Tag match - if no tags selected, show all items
const tagMatch = selectedTags.length === 0 ||
selectedTags.every(tagId =>
item.tags?.some(itemTag => itemTag.ID === tagId)
);
return textMatch && tagMatch;
});
}, [items, searchQuery, selectedTags]);
// Handle tag selection
const handleTagSelect = (tagId) => {
setSelectedTags(prev =>
prev.includes(tagId)
? prev.filter(id => id !== tagId)
: [...prev, tagId]
);
// const handleSelectItem = (item) => {
// setSelectedItem(item);
// };
const handleAddItem = () => {
setOpenAddItemDialog(true);
};
// Rest of the component remains the same...
// (keeping all existing functions like handleAddItem, handleDeleteItem, etc.)
const handleAddItem = useCallback(() => {
setOpenAddItemDialog(true);
}, []);
const handleCloseAddItemDialog = useCallback(() => {
const handleCloseAddItemDialog = () => {
setOpenAddItemDialog(false);
setNewItemName('');
setNewItemDescription('');
// setNewItemImagePath('');
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
}, []);
};
const generateUniqueImageName = useCallback((imageName) => {
/**
* This function takes an image name and returns a unique image name.
* The purpose of this function is to prevent overwriting of images with the same name.
* If the image name is 'image.jpg', a random string is generated and appended to the image name.
* This is used to prevent overwriting of images with the same name.
* For example, if an image named 'image.jpg' is uploaded, the function will return 'image_8xgu6hcu.jpg'
* This ensures that the image will not overwrite any existing image with the same name.
* @param {string} imageName - The name of the image
* @return {string} - The unique image name
*/
const generateUniqueImageName = (imageName) => {
if (imageName.toLowerCase() === 'image.jpg') {
// Generate a random string
const randomString = Math.random().toString(36).substr(2, 9);
// Append the random string to the image name
return `image_${randomString}.jpg`;
}
// Return the original image name if it's not 'image.jpg'
return imageName;
}, []);
const handleDeleteItem = useCallback(async (itemId) => {
};
const handleImageUpload = async (itemId, imageFile, newImageName) => {
const formData = new FormData();
//const imageFile = fileInputRef.current.files[0];
//const newImageName = generateUniqueImageName(imageFile.name);
formData.append('image', new File([imageFile], newImageName, {
type: imageFile.type,
}));
// Create a new file with the unique name
// eslint-disable-next-line
const newImageFile = new File([imageFile], newImageName, {
type: imageFile.type,
});
try {
await deleteItem(() => api.items.delete(token, itemId));
setItems(prev => prev.filter(item => item.ID !== itemId));
} catch (err) {}
}, [token, deleteItem]);
const response = await axios.post(`${process.env.REACT_APP_API_URL}/items/${itemId}/upload`, formData, {
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'multipart/form-data'
}
});
// console.log('Image uploaded successfully!');
return response.data.imagePath; // Indicate successful upload
} catch (error) {
console.error('Image upload failed:', error);
return null; // Indicate upload failure
}
};
const handleEditItem = useCallback((item) => {
setEditingItem(item);
}, []);
const handleSaveEdit = useCallback(async () => {
setEditingItem(null);
// Refresh the items list after editing
/**
* Handle saving a new item.
*
* This function first creates the item without the image, then if the item creation is successful,
* it uploads the image associated with the item.
*
* @return {Promise<void>}
*/
const handleSaveNewItem = async () => {
try {
const response = await fetchItems(() =>
boxId ? api.items.getByBox(token, boxId) : api.items.getAll(token)
);
setItems(response.data);
} catch (err) {}
}, [token, boxId, fetchItems]);
// Step 1: Create the item first
// This sends a request to the API to create a new item with the
// name and description provided. The box_id is set to the selected
// box ID.
const newItemResponse = await axios.post(`${process.env.REACT_APP_API_URL}/items`, {
name: newItemName,
description: newItemDescription,
box_id: parseInt(boxId, 10) // Ensure boxId is converted to an integer
}, {
headers: {
Authorization: `Bearer ${token}`
}
});
const handleSaveNewItem = useCallback(async () => {
try {
const newItemResponse = await createItem(() =>
api.items.create(token, {
name: newItemName,
description: newItemDescription,
box_id: parseInt(boxId, 10)
})
);
console.log('New item created:', newItemResponse.status);
if (newItemResponse.status === 200 && fileInputRef.current?.files?.[0]) {
// Step 2: If item creation is successful, upload the image
if (newItemResponse.status === 200 && fileInputRef.current.files[0]) {
// Get the ID of the newly created item
const newItemId = newItemResponse.data.id;
// Get the image file that was uploaded
const imageFile = fileInputRef.current.files[0];
const newImageName = generateUniqueImageName(imageFile.name);
const formData = new FormData();
formData.append('image', new File([imageFile], newImageName, {
type: imageFile.type,
}));
await uploadImage(() =>
api.items.uploadImage(token, newItemResponse.data.id, formData)
);
if (newItemResponse.data.id) {
try {
const imageResponse = await api.items.getImage(token, newItemResponse.data.id);
const reader = new FileReader();
reader.onload = () => {
setItemImages(prev => ({
...prev,
[newItemResponse.data.id]: reader.result
}));
};
reader.readAsDataURL(imageResponse.data);
} catch (err) {
setItemImages(prev => ({
...prev,
[newItemResponse.data.id]: '/default.jpg'
}));
}
// Generate a unique image name by appending a random string
// to the image file name. This is used to prevent overwriting
// of images with the same name.
const newImageName = generateUniqueImageName(imageFile.name);
// Upload the image file with the unique name to the server
const uploadedImagePath = await handleImageUpload(newItemId, fileInputRef.current.files[0], newImageName);
if (uploadedImagePath) {
// The image was uploaded successfully. Log the uploaded image path
console.log("Image path to save:", uploadedImagePath);
// You might want to update your item in the backend with the image path
// For example:
// await axios.put(...);
} else {
// The image upload failed. Log an error message
console.error('Failed to upload image for the new item.');
}
}
// Close the add item dialog
handleCloseAddItemDialog();
const response = await fetchItems(() =>
boxId ? api.items.getByBox(token, boxId) : api.items.getAll(token)
);
setItems(response.data);
} catch (err) {}
}, [token, boxId, newItemName, newItemDescription, createItem, uploadImage, fetchItems, generateUniqueImageName]);
// Fetch the items again to get the latest data
fetchItems();
} catch (error) {
// Catch any errors that may occur during the item creation
// and image upload process. Log the error message
console.error('Error adding item:', error);
}
};
//const [selectedItem, setSelectedItem] = React.useState(null);
const handleCloseItemDetails = () => {
setEditingItem(null); // Close the ItemDetails modal
};
const handleImageError = (e) => {
if (e.target.src.startsWith('data:image/')) {
console.error("Default image failed to load. Check the file path.");
return;
}
const reader = new FileReader();
reader.onload = () => {
e.target.onerror = null;
e.target.src = reader.result;
};
fetch('/default.jpg')
.then(res => res.blob())
.then(blob => reader.readAsDataURL(blob))
.catch(error => console.error("Error loading default image:", error));
};
const getImageSrc = useCallback((itemId) => {
return axios.get(`${process.env.REACT_APP_API_URL}/items/${itemId}/image`, {
headers: { Authorization: `Bearer ${token}` },
responseType: 'blob'
})
.then(response => {
if (response.status === 200) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(response.data);
});
} else {
throw new Error('Image fetch failed');
}
})
.catch(() => {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = '/default.jpg';
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
resolve(canvas.toDataURL());
};
img.onerror = reject;
});
});
}, [token]);
const fetchItems = useCallback(() => {
axios.get( url, {
headers: { Authorization: `Bearer ${token}` }
}).then(response => {
setItems(response.data);
// Fetch images for each item
response.data.forEach(item => {
getImageSrc(item.ID).then(imageDataUrl => {
setItemImages(prevItemImages => ({
...prevItemImages,
[item.ID]: imageDataUrl
}));
});
});
});
}, [token, getImageSrc, url]);
// lint says I don't need boxId here
useEffect(() => {
fetchItems();
}, [boxId, token, fetchItems]);
// const handleAddItem = () => {
// const formData = new FormData();
// formData.append('name', newItemName);
// formData.append('description', newItemDescription);
// formData.append('box_id', parseInt(boxId, 10));
// // Append image only if a new one is selected
// if (fileInputRef.current.files[0]) {
// formData.append('image', fileInputRef.current.files[0]);
// }
// axios.post(`${process.env.REACT_APP_API_URL}/items`, formData, {
// headers: {
// Authorization: `Bearer ${token}`,
// 'Content-Type': 'multipart/form-data' // Important for file uploads
// }
// }).then(() => {
// setNewItemName('');
// setNewItemDescription('');
// setNewItemImagePath('');
// // Clear the file input
// if (fileInputRef.current) {
// fileInputRef.current.value = '';
// }
// fetchItems();
// });
// };
const handleDeleteItem = (itemId) => {
axios.delete(`${process.env.REACT_APP_API_URL}/items/${itemId}`, {
headers: { Authorization: `Bearer ${token}` }
}).then(() => {
fetchItems();
});
};
const handleEditItem = (item) => {
setEditingItem(item);
};
const handleSaveEdit = () => {
setEditingItem(null);
fetchItems();
};
return (
<Container>
{(itemsError || tagsError || createError || deleteError || uploadError) && (
<Alert severity="error" sx={{ mb: 2 }}>
{itemsError?.message || tagsError?.message || createError?.message ||
deleteError?.message || uploadError?.message}
</Alert>
)}
<TextField
label="Search"
variant="outlined"
fullWidth
margin="normal"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
<h2>Items in Box: {boxName === "Unknown Box" ? "All Boxes" : `${boxName} (${items.length} items)`}</h2>
<input
type="file"
accept="image/*"
ref={fileInputRef}
style={{ display: 'none' }}
id="newItemImageUpload" // Unique ID
/>
<Box sx={{ mb: 3 }}>
<TextField
label="Search items..."
variant="outlined"
fullWidth
margin="normal"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
<Box sx={{ mt: 2, mb: 2 }}>
<Typography variant="subtitle1" gutterBottom>Filter by tags:</Typography>
<Box display="flex" flexWrap="wrap" gap={1}>
{availableTags.map(tag => (
<Chip
key={tag.ID}
label={tag.name}
style={{
backgroundColor: selectedTags.includes(tag.ID) ? tag.color : 'transparent',
color: selectedTags.includes(tag.ID) ? '#fff' : 'inherit',
border: `1px solid ${tag.color}`
}}
onClick={() => handleTagSelect(tag.ID)}
clickable
/>
))}
</Box>
</Box>
</Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
<Typography variant="h6">
{boxName === "All Boxes" ? "All Items" : `Items in ${boxName}`}
({filteredItems.length} items)
</Typography>
<Button
sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
variant="contained"
onClick={handleAddItem}
disabled={creatingItem}
>
{creatingItem ? <CircularProgress size={24} /> : 'Add Item'}
</Button>
</Box>
<Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}variant="contained" color="primary" onClick={handleAddItem}>
Add Item
</Button>
{/* Dialog for adding new item */}
<Dialog open={openAddItemDialog} onClose={handleCloseAddItemDialog}>
<DialogTitle>Add New Item</DialogTitle>
<DialogContent>
@ -327,58 +365,76 @@ export default function Items({ token }) {
type="file"
accept="image/*"
ref={fileInputRef}
style={{ display: 'block', margin: '10px 0' }}
// capture="environment" // Capture the image from the user's camera
style={{ display: 'block', margin: '10px 0' }} // Style as needed
id="newItemImageUpload"
/>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseAddItemDialog}>Cancel</Button>
<Button
onClick={handleSaveNewItem}
color="primary"
disabled={creatingItem || !newItemName.trim()}
>
{creatingItem ? <CircularProgress size={24} /> : 'Save'}
<Button onClick={handleSaveNewItem} color="primary">
Save
</Button>
</DialogActions>
</Dialog>
{editingItem && (
{editingItem ? (
<ItemDetails
item={editingItem}
token={token}
onSave={handleSaveEdit}
onClose={() => setEditingItem(null)}
onClose={handleCloseItemDetails}
boxId={boxId}
/>
)}
{loadingItems ? (
<CircularProgress />
/>
) : (
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell style={{ width: '40px' }}>Image</TableCell>
<TableCell style={{ width: '100px' }}>Name</TableCell>
<TableCell>Description</TableCell>
<TableCell>Tags</TableCell>
<TableCell>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredItems.map((item) => (
<Item
key={item.ID}
item={item}
itemImages={itemImages}
onDelete={handleDeleteItem}
onEdit={handleEditItem}
/>
<Table>
<TableHead>
<TableRow>
<TableCell style={{ width: '40px' }}>Image</TableCell>
<TableCell style={{ width: '100px' }}>Name</TableCell>
<TableCell>Description</TableCell>
<TableCell>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{items
.filter(item =>
item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
item.description.toLowerCase().includes(searchQuery.toLowerCase())
)
.map((item) => (
<TableRow key={item.ID}>
<TableCell>
<Avatar src={itemImages[item.ID] || '/images/default.jpg'} />
</TableCell>
<TableCell>{item.name}</TableCell>
<TableCell>{item.description}</TableCell>
<Box display="flex" justifyContent="space-between" width="100%">
<Tooltip title="Edit Item">
<IconButton
onClick={() => handleEditItem(item)}
size="large"
sx={{ mr: 1 }}
>
<EditIcon />
</IconButton>
</Tooltip>
<Tooltip title="Delete Item">
<IconButton
onClick={() => handleDeleteItem(item.ID)}
size="large"
color="error"
>
<DeleteIcon />
</IconButton>
</Tooltip>
</Box>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</TableBody>
</Table>
</TableContainer>
)}
</Container>
)};
);
}

39
src/components/Login.js
View File

@ -1,26 +1,27 @@
// src/components/Login.js
import React, { useState } from 'react';
import { Button, TextField, Container, Typography, Alert, CircularProgress } from '@mui/material';
import { useNavigate } from 'react-router-dom';
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';
import { api } from '../services/api';
import { useApiCall } from './hooks/useApiCall';
export default function Login({ setToken }) {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const navigate = useNavigate();
const { execute, loading, error } = useApiCall();
const [loginError, setLoginError] = useState(false); // State for login error
const navigate = useNavigate(); // Initialize useNavigate
const handleLogin = async (e) => {
e.preventDefault();
setLoginError(false); // Reset error state on each login attempt
try {
const response = await execute(() => api.login({ username, password }));
// eslint-disable-next-line no-template-curly-in-string
const response = await axios.post(`${process.env.REACT_APP_API_URL}/login`, { username, password });
setToken(response.data.token);
navigate('/boxes');
} catch (err) {
// Error handling is now managed by useApiCall
console.error('Login attempt failed');
} catch (error) {
console.error('Login failed', error);
setLoginError(true); // Set error state if login fails
}
};
@ -28,10 +29,9 @@ export default function Login({ setToken }) {
<Container maxWidth="xs">
<Typography variant="h4" gutterBottom>Login</Typography>
{error && (
<Alert severity="error">
{error.status === 401 ? 'Invalid username or password' : error.message}
</Alert>
{/* Display error message if loginError is true */}
{loginError && (
<Alert severity="error">Login Failed</Alert>
)}
<form onSubmit={handleLogin}>
@ -52,15 +52,8 @@ export default function Login({ setToken }) {
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Button
sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
variant="contained"
color="primary"
type="submit"
fullWidth
disabled={loading}
>
{loading ? <CircularProgress size={24} /> : 'Login'}
<Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" type="submit" fullWidth>
Login
</Button>
</form>
</Container>

8
src/components/Navbar.js
View File

@ -33,10 +33,10 @@ export default function Navbar() {
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
Boxes
</Typography>
<Button color="inherit" component={Link} to="/api/v1/login">Login</Button>
<Button color="inherit" component={Link} to="/api/v1/boxes">Boxes</Button>
<Button color="inherit" component={Link} to="/api/v1/items">Items</Button>
<Button color="inherit" component={Link} to="/api/v1/admin">Admin</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="/items">Items</Button>
<Button color="inherit" component={Link} to="/admin">Admin</Button>
<Button color="inherit" onClick={handleLogout}>Logout</Button>
</Toolbar>
</AppBar>

43
src/components/hooks/useApiCall.js
View File

@ -1,43 +0,0 @@
import { useState } from 'react';
/**
* useApiCall hook.
*
* This hook helps to wrap API calls in a way that makes it easier to manage
* loading state and errors.
*
* @returns {Object} An object with `execute`, `loading`, and `error`
* properties. `execute` is a function that wraps the API call and sets the
* `loading` and `error` states accordingly. `loading` is a boolean that is
* `true` while the API call is in progress and `false` otherwise. `error` is
* `null` if the API call was successful and an error object if the API call
* failed.
*
* @example
* const { execute, loading, error } = useApiCall();
*
* const fetchData = async () => {
* const response = await execute(api.items.getAll());
* // Do something with the response
* };
*/
export const useApiCall = () => {
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const execute = async (apiCall) => {
setLoading(true);
setError(null);
try {
const result = await apiCall();
return result;
} catch (err) {
setError(err);
throw err;
} finally {
setLoading(false);
}
};
return { execute, loading, error };
};

181
src/components/tagManager.js
View File

@ -1,181 +0,0 @@
import React, { useState, useEffect, useCallback } from 'react';
import {
Chip,
Dialog,
DialogTitle,
DialogContent,
DialogActions,
TextField,
Button,
Box,
CircularProgress,
Alert
} from '@mui/material';
import { LocalOffer as TagIcon } from '@mui/icons-material';
import { useApiCall } from './hooks/useApiCall';
import { api } from '../services/api';
const TagManager = React.memo(({ token, itemId, initialTags = [], onTagsChange }) => {
const [tags, setTags] = useState([]);
const [itemTags, setItemTags] = useState(initialTags);
const [openDialog, setOpenDialog] = useState(false);
const [newTagName, setNewTagName] = useState('');
const [newTagDescription, setNewTagDescription] = useState('');
const [newTagColor, setNewTagColor] = useState('#3366ff');
const { execute: fetchTags, loading: loadingTags, error: tagsError } = useApiCall();
const { execute: createTag, loading: creatingTag, error: createError } = useApiCall();
const { execute: addTags, loading: addingTags, error: addError } = useApiCall();
const { execute: removeTag, loading: removingTag, error: removeError } = useApiCall();
// Only fetch tags once when component mounts
useEffect(() => {
const getTags = async () => {
try {
const response = await fetchTags(() => api.tags.getAll(token));
setTags(response.data);
} catch (err) {}
};
getTags();
}, []); // Empty dependency array - only run once on mount
// Update itemTags when initialTags prop changes
useEffect(() => {
setItemTags(initialTags);
}, [initialTags]);
const handleCreateTag = async () => {
try {
const response = await createTag(() => api.tags.create(token, {
name: newTagName,
description: newTagDescription,
color: newTagColor
}));
setTags(prevTags => [...prevTags, response.data]);
setOpenDialog(false);
setNewTagName('');
setNewTagDescription('');
setNewTagColor('#3366ff');
} catch (err) {}
};
const handleAddTag = async (tagId) => {
if (!itemId) return;
try {
await addTags(() => api.items.addTags(token, itemId, [tagId]));
const newTag = tags.find(t => t.ID === tagId);
if (newTag) {
const updatedTags = [...itemTags, newTag];
setItemTags(updatedTags);
onTagsChange?.(updatedTags);
}
} catch (err) {}
};
const handleRemoveTag = async (tagId) => {
if (!itemId) return;
try {
await removeTag(() => api.items.removeTag(token, itemId, tagId));
const updatedTags = itemTags.filter(tag => tag.ID !== tagId);
setItemTags(updatedTags);
onTagsChange?.(updatedTags);
} catch (err) {}
};
return (
<Box>
{(tagsError || createError || addError || removeError) && (
<Alert severity="error" sx={{ mb: 2 }}>
{tagsError?.message || createError?.message ||
addError?.message || removeError?.message}
</Alert>
)}
<Box display="flex" alignItems="center" flexWrap="wrap" gap={1}>
{itemTags.map(tag => (
<Chip
key={tag.ID}
label={tag.name}
onDelete={() => handleRemoveTag(tag.ID)}
style={{
backgroundColor: tag.color,
color: '#fff'
}}
disabled={removingTag}
/>
))}
<Box sx={{ ml: 1 }}>
{loadingTags ? (
<CircularProgress size={24} />
) : (
tags
.filter(tag => !itemTags.find(it => it.ID === tag.ID))
.map(tag => (
<Chip
key={tag.ID}
label={tag.name}
onClick={() => handleAddTag(tag.ID)}
style={{
backgroundColor: tag.color,
color: '#fff',
margin: '0 4px'
}}
disabled={addingTags}
/>
))
)}
</Box>
<Button
startIcon={<TagIcon />}
variant="outlined"
size="small"
onClick={() => setOpenDialog(true)}
sx={{ ml: 1 }}
>
New Tag
</Button>
</Box>
<Dialog open={openDialog} onClose={() => setOpenDialog(false)}>
<DialogTitle>Create New Tag</DialogTitle>
<DialogContent>
<TextField
label="Name"
value={newTagName}
onChange={(e) => setNewTagName(e.target.value)}
fullWidth
margin="normal"
/>
<TextField
label="Description"
value={newTagDescription}
onChange={(e) => setNewTagDescription(e.target.value)}
fullWidth
margin="normal"
/>
<TextField
label="Color"
type="color"
value={newTagColor}
onChange={(e) => setNewTagColor(e.target.value)}
fullWidth
margin="normal"
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenDialog(false)}>Cancel</Button>
<Button
onClick={handleCreateTag}
disabled={creatingTag || !newTagName.trim()}
>
{creatingTag ? <CircularProgress size={24} /> : 'Create'}
</Button>
</DialogActions>
</Dialog>
</Box>
);
});
export default TagManager;

134
src/components/themeProvider.js
View File

@ -1,134 +0,0 @@
import React from 'react';
import { createTheme, ThemeProvider, CssBaseline } from '@mui/material';
import { grey, blue } from '@mui/material/colors';
// Enhanced theme with better visual hierarchy and modern styling
const theme = createTheme({
palette: {
mode: 'light',
primary: {
main: blue[700],
dark: blue[900],
light: blue[500],
contrastText: '#fff'
},
background: {
default: grey[100],
paper: '#fff'
}
},
typography: {
h1: {
fontSize: '2.5rem',
fontWeight: 600,
marginBottom: '1.5rem'
},
h2: {
fontSize: '2rem',
fontWeight: 500,
marginBottom: '1.25rem'
},
h3: {
fontSize: '1.75rem',
fontWeight: 500,
marginBottom: '1rem'
}
},
components: {
MuiButton: {
styleOverrides: {
root: {
textTransform: 'none',
borderRadius: 8,
padding: '8px 16px',
fontWeight: 500
},
contained: {
boxShadow: 'none',
'&:hover': {
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
}
}
}
},
MuiCard: {
styleOverrides: {
root: {
borderRadius: 12,
boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
'&:hover': {
boxShadow: '0 4px 12px rgba(0,0,0,0.12)'
}
}
}
},
MuiTextField: {
styleOverrides: {
root: {
'& .MuiOutlinedInput-root': {
borderRadius: 8,
backgroundColor: '#fff',
'&:hover fieldset': {
borderColor: blue[400]
}
}
}
}
},
MuiTable: {
styleOverrides: {
root: {
backgroundColor: '#fff',
borderRadius: 12,
overflow: 'hidden'
}
}
},
MuiTableHead: {
styleOverrides: {
root: {
backgroundColor: grey[50]
}
}
},
MuiTableCell: {
styleOverrides: {
head: {
fontWeight: 600,
color: grey[900]
}
}
}
}
});
// Layout component for consistent padding and max-width
const Layout = ({ children }) => (
<div className="p-6 max-w-7xl mx-auto">
{children}
</div>
);
// Enhanced page container with proper spacing and background
const PageContainer = ({ children, title }) => (
<div className="min-h-screen bg-gray-100">
<Layout>
{title && <h1 className="text-3xl font-semibold mb-6">{title}</h1>}
<div className="bg-white rounded-xl shadow-sm p-6">
{children}
</div>
</Layout>
</div>
);
export function EnhancedThemeProvider({ children }) {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
</ThemeProvider>
);
}
export { Layout, PageContainer };
export default EnhancedThemeProvider;

5
src/index.js
View File

@ -4,11 +4,6 @@ import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const path = window.location.pathname;
if (path !== '/' && !path.startsWith('/api/v1/')) {
window.history.replaceState(null, '', '/');
}
// Log the environment variables
console.log('REACT_APP_API_URL:', process.env.REACT_APP_API_URL);

92
src/services/api.js
View File

@ -1,92 +0,0 @@
// src/services/api.js
import axios from 'axios';
const createApiClient = () => {
const client = axios.create({
baseURL: process.env.REACT_APP_API_URL
});
const authHeader = (token) => ({ Authorization: `Bearer ${token}` });
return {
// Auth
login: (credentials) =>
client.post('/api/v1/login', credentials),
// Items
items: {
getAll: (token) =>
client.get('/api/v1/items', { headers: authHeader(token) }),
getOne: (token, id) =>
client.get(`/api/v1/items/${id}`, { headers: authHeader(token) }),
create: (token, itemData) =>
client.post('/api/v1/items', itemData, { headers: authHeader(token) }),
update: (token, id, itemData) =>
client.put(`/api/v1/items/${id}`, itemData, { headers: authHeader(token) }),
delete: (token, id) =>
client.delete(`/api/v1/items/${id}`, { headers: authHeader(token) }),
uploadImage: (token, id, formData) =>
client.post(`/api/v1/items/${id}/upload`, formData, {
headers: { ...authHeader(token), 'Content-Type': 'multipart/form-data' }
}),
getImage: (token, id) =>
client.get(`/api/v1/items/${id}/image`, {
headers: authHeader(token),
responseType: 'blob'
}),
getByBox: (token, boxId) =>
client.get(`/api/v1/boxes/${boxId}/items`, { headers: authHeader(token) }),
addTags: (token, itemId, tagIds) =>
client.post(`/api/v1/items/${itemId}/tags`, tagIds, {
headers: authHeader(token)
}),
removeTag: (token, itemId, tagId) =>
client.delete(`/api/v1/items/${itemId}/tags/${tagId}`, {
headers: authHeader(token)
}),
},
// Boxes
boxes: {
getAll: (token) =>
client.get('/api/v1/boxes', { headers: authHeader(token) }),
create: (token, boxData) =>
client.post('/api/v1/boxes', boxData, { headers: authHeader(token) }),
delete: (token, id) =>
client.delete(`/api/v1/boxes/${id}`, { headers: authHeader(token) }),
},
tags: {
getAll: (token) =>
client.get('/api/v1/tags', { headers: authHeader(token) }),
create: (token, tagData) =>
client.post('/api/v1/tags', tagData, { headers: authHeader(token) }),
update: (token, id, tagData) =>
client.put(`/api/v1/tags/${id}`, tagData, { headers: authHeader(token) }),
delete: (token, id) =>
client.delete(`/api/v1/tags/${id}`, { headers: authHeader(token) }),
getItems: (token, id) =>
client.get(`/api/v1/tags/${id}/items`, { headers: authHeader(token) }),
},
// Admin
admin: {
getUsers: (token) =>
client.get('/api/v1/admin/user', { headers: authHeader(token) }),
createUser: (token, userData) =>
client.post('/api/v1/admin/user', userData, { headers: authHeader(token) }),
deleteUser: (token, id) =>
client.delete(`/api/v1/admin/user/${id}`, { headers: authHeader(token) }),
backupDb: (token) =>
client.get('/api/v1/admin/db', {
headers: authHeader(token),
responseType: 'blob'
}),
restoreDb: (token, formData) =>
client.post('/api/v1/admin/db', formData, {
headers: { ...authHeader(token), 'Content-Type': 'multipart/form-data' }
}),
}
};
};
export const api = createApiClient();

36
src/services/errorHandler.js
View File

@ -1,36 +0,0 @@
// src/utils/errorHandler.js
import axios from 'axios';
export class ApiError extends Error {
constructor(message, status, details = {}) {
super(message);
this.status = status;
this.details = details;
}
}
// Enhanced API client with error handling
export const createApiClient = () => {
const client = axios.create({
baseURL: process.env.REACT_APP_API_URL
});
client.interceptors.response.use(
response => response,
error => {
if (error.response?.status === 401) {
localStorage.removeItem('token');
window.location.href = '/login';
return Promise.reject(new ApiError('Session expired', 401));
}
return Promise.reject(new ApiError(
error.response?.data?.message || 'An error occurred',
error.response?.status,
error.response?.data
));
}
);
return client;
};

18
test.bash
View File

@ -1,18 +0,0 @@
#!/bin/bash
# Set the username and password
USERNAME="boxuser"
PASSWORD="boxuser"
EMAIL="boxuser@r8z.us"
# Set the database file and table name
DB_FILE="../boxes-api/data/boxes.db"
TABLE_NAME="users"
# Generate the bcrypt encrypted password using htpasswd
ENCRYPTED_PASSWORD=$(htpasswd -bnBC 10 "" "$PASSWORD" | tr -d ':\n')
# Insert the username and encrypted password into the database
sqlite3 "$DB_FILE" "INSERT INTO $TABLE_NAME (username, password, email) VALUES ('$USERNAME', '$ENCRYPTED_PASSWORD', '$EMAIL')"
echo "Password encrypted and stored in the database."