error-handling #1
|
|
@ -4,6 +4,21 @@ import axios from 'axios';
|
||||||
import { Link, useNavigate } from 'react-router-dom';
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
|
import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
|
||||||
import './Admin.css'; // Import the CSS file
|
import './Admin.css'; // Import the CSS file
|
||||||
|
import {
|
||||||
|
Typography,
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
Paper,
|
||||||
|
Button,
|
||||||
|
Alert,
|
||||||
|
Container,
|
||||||
|
Box,
|
||||||
|
TextField
|
||||||
|
} from '@mui/material';
|
||||||
|
|
||||||
|
|
||||||
export default function Admin() {
|
export default function Admin() {
|
||||||
|
|
@ -26,6 +41,19 @@ export default function Admin() {
|
||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
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) => {
|
const handleCreateUser = async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
try {
|
try {
|
||||||
|
|
@ -49,6 +77,9 @@ export default function Admin() {
|
||||||
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
|
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
|
||||||
});
|
});
|
||||||
setUsers(users.filter(user => user.id !== id));
|
setUsers(users.filter(user => user.id !== id));
|
||||||
|
//setUsers(prevUsers => prevUsers.filter(user => user.id !== id));
|
||||||
|
fetchUsers();
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
|
|
@ -103,54 +134,87 @@ export default function Admin() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<Container maxWidth="md">
|
||||||
<h1>Admin</h1>
|
<Typography variant="h4" gutterBottom>
|
||||||
<table>
|
Admin
|
||||||
<thead>
|
</Typography>
|
||||||
<tr>
|
|
||||||
<th>Username</th>
|
<Box component="form" onSubmit={handleCreateUser} sx={{ mb: 4 }}>
|
||||||
<th>Actions</th>
|
<Typography variant="h6" gutterBottom>
|
||||||
</tr>
|
Add New User
|
||||||
</thead>
|
</Typography>
|
||||||
<tbody>
|
<TextField
|
||||||
{users.map(user => (
|
label="Username"
|
||||||
<tr key={user.ID}>
|
variant="outlined"
|
||||||
<td>{user.username}</td>
|
value={username}
|
||||||
<td>
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
<button onClick={() => handleDeleteUser(user.ID)}>Delete</button>
|
sx={{ mr: 2 }}
|
||||||
</td>
|
/>
|
||||||
</tr>
|
<TextField
|
||||||
))}
|
label="Password"
|
||||||
</tbody>
|
type="password"
|
||||||
</table>
|
variant="outlined"
|
||||||
<form onSubmit={handleCreateUser}>
|
value={password}
|
||||||
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" />
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
|
sx={{ mr: 2 }}
|
||||||
<button type="submit">Create User</button>
|
/>
|
||||||
</form>
|
<Button type="submit" sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary">
|
||||||
<h2>Database</h2>
|
Add User
|
||||||
<table>
|
</Button>
|
||||||
<thead>
|
</Box>
|
||||||
<tr>
|
|
||||||
<th>Action</th>
|
<TableContainer component={Paper}>
|
||||||
<th></th>
|
<Table>
|
||||||
</tr>
|
<TableHead>
|
||||||
</thead>
|
<TableRow>
|
||||||
<tbody>
|
<TableCell>Username</TableCell>
|
||||||
<tr>
|
<TableCell>Actions</TableCell>
|
||||||
<td>Backup</td>
|
</TableRow>
|
||||||
<td>
|
</TableHead>
|
||||||
<button onClick={handleBackupDatabase}>Download Backup</button>
|
<TableBody>
|
||||||
</td>
|
{users.map(user => (
|
||||||
</tr>
|
<TableRow key={user.ID}>
|
||||||
<tr>
|
<TableCell>{user.username}</TableCell>
|
||||||
<td>Restore</td>
|
<TableCell>
|
||||||
<td>
|
<Button
|
||||||
<input type="file" ref={fileInputRef} />
|
variant="contained"
|
||||||
<button onClick={handleRestoreDatabase}>Upload and Restore</button>
|
color="error"
|
||||||
</td>
|
onClick={() => handleDeleteUser(user.ID)}
|
||||||
</tr>
|
>
|
||||||
</tbody>
|
Delete User
|
||||||
</table>
|
</Button>
|
||||||
</div>
|
</TableCell>
|
||||||
)};
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue