Users

[elicharlese]

import React, { useState } from "react";
import {
  makeStyles,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  TextField,
  Button,
} from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  table: {
    minWidth: 650,
  },
  input: {
    marginRight: theme.spacing(1),
  },
  button: {
    marginBottom: theme.spacing(1),
  },
}));

const initialData = [
  {
    id: 1,
    name: "John Doe",
    email: "[email protected]",
    role: "user",
  },
  {
    id: 2,
    name: "Jane Doe",
    email: "[email protected]",
    role: "admin",
  },
  {
    id: 3,
    name: "Bob Smith",
    email: "[email protected]",
    role: "user",
  },
];

export default function Users() {
  const classes = useStyles();
  const [users, setUsers] = useState(initialData);
  const [newUser, setNewUser] = useState({ name: "", email: "", role: "" });

  const handleAddUser = () => {
    const newUserWithId = {
      ...newUser,
      id: users.length + 1,
    };
    setUsers([...users, newUserWithId]);
    setNewUser({ name: "", email: "", role: "" });
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setNewUser({ ...newUser, [name]: value });
  };

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="users table">
        <TableHead>
          <TableRow>
            <TableCell>ID</TableCell>
            <TableCell>Name</TableCell>
            <TableCell>Email</TableCell>
            <TableCell>Role</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {users.map((user) => (
            <TableRow key={user.id}>
              <TableCell>{user.id}</TableCell>
              <TableCell>{user.name}</TableCell>
              <TableCell>{user.email}</TableCell>
              <TableCell>{user.role}</TableCell>
            </TableRow>
          ))}
          <TableRow>
            <TableCell></TableCell>
            <TableCell>
              <TextField
                className={classes.input}
                label="Name"
                variant="outlined"
                name="name"
                value={newUser.name}
                onChange={handleInputChange}
              />
            </TableCell>
            <TableCell>
              <TextField
                className={classes.input}
                label="Email"
                variant="outlined"
                name="email"
                value={newUser.email}
                onChange={handleInputChange}
              />
            </TableCell>
            <TableCell>
              <TextField
                className={classes.input}
                label="Role"
                variant="outlined"
                name="role"
                value={newUser.role}
                onChange={handleInputChange}
              />
              <Button
                variant="contained"
                color="primary"
                className={classes.button}
                onClick={handleAddUser}
              >
                Add
              </Button>
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </TableContainer>
  );
}

This component uses the Table and TableContainer components from Material-UI to display a list of users with their ID, name, email, and role. It also allows an admin to add new users to the list by entering their info.