More UI fixes to Admin.js

src/components/Admin.js

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