Untitled

import { useRef } from "react";
import { useState } from "react";
import { Button, Table } from "react-bootstrap";
import employeesFromFile from "../employees.json";


function Employees() {
  const [employees, updateEmployees] = useState(employeesFromFile);
  const idRef = useRef();
  const nameRef = useRef();
  const emailRef = useRef();
  const avatarRef = useRef();

  // TODO: Load data from backend service

  const addEmployee = () => {
    const newEmployee = {
      id: idRef.current.value,
      name: nameRef.current.value,
      email: emailRef.current.value,
      avatar: avatarRef.current.value,     
    }
    employees.push(newEmployee);
    updateEmployees(employees.slice());
  }

  const deleteEmployee = (number) => {
    employees.splice(number,1);
    updateEmployees(employees.slice())
  }

  return (<div>
    <div className="container">
      <h2 className="mb-4">Employees</h2>
      <Table className="table table-hover table-bordered table-sortable">
        <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
          <th scope="col">Avatar</th>
          <th scope="col">Actions</th>

        </tr>
        </thead>
        <tbody>
        <tr>
          { employees.map((employee, employeeNr) =>
            <div key = {employee.name + employee.id}>
            <td>{employee.id}</td>
            <td>{employee.first_name}</td>
            <td>{employee.email}</td>
            <td>{employee.avatar}</td>
            {/* <td><img src={"https://reqres.in/img/faces/1-image.jpg"} alt=""/></td> */}
            <td><Button onClick={() => deleteEmployee(employeeNr)} type="button" variant="danger">Delete</Button></td>
          </div>) }
        </tr>


        <tr className="input-row">
          <td><input type="text" ref={idRef} placeholder="ID" className="form-control"/></td>
          <td><input type="text" ref={nameRef}placeholder="Name" className="form-control"/></td>
          <td><input type="text" ref={emailRef}placeholder="Email" className="form-control"/></td>
          <td><input type="text" ref={avatarRef}placeholder="Avatar" className="form-control"/></td>
          <td><Button type="submit" onClick={() => addEmployee()} variant="success">Add</Button></td>
        </tr>
        </tbody>
      </Table>
    </div>

  </div>)
}

export default Employees;