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 = () => {
    employees.push(
      {"id":idRef.current.value,
      "name": nameRef.current.value,
      "email":emailRef.current.value,
      // "avatar":avatarRef.current.value,
      });
      updateEmployees(employees.slice());
  }
  // const addEmployee = () => {
  //   // TODO: Add validations ( nt nimi peab olema tähed, email sisaldama @, ID olema numbrid )
  //   // TODO: Add an employee to the table
  // }
  const deleteEmployee = (number) => {
    employees.splice(number,1);
    updateEmployees(employees.slice());
  }
  // const deleteEmployee = (employee) => {
  //   // TODO: Delete an employee from the table
  // }

  return (
   <div>
    { employees.map((employee, employeeNr) => 
      <div key = {employeeNr}>
        <div> {employee.id} </div>
        <div> {employee.email} </div>
        <div> {employee.first_name} </div>
        <div> {employee.last_name} </div>
        <div> {employee.avatar} </div>
        <button onClick={() => deleteEmployee(employeeNr)}> x </button>
      </div>) }

      <label>Employee ID</label>
      <input ref={idRef} type="number" />
      <label>Employee name</label>
      <input ref={nameRef} type="text" />
      <label>Employee email</label>
      <input ref={emailRef} type="text" />
      {/* <label>Employee avatar</label>
      <input ref={avatarRef} type="image" /> */}
      <button onClick={addEmployee}>Add</button>


    <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">Actions</th>
          {/* <!-- TODO: Add a column for an avatar -->  +++++++++++++++++++++++ */}
          <th scope="col">Avatar</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>123</td>
          <td>Added name 1</td>
          <td>email@email.com</td>
          <td><Button type="button" variant="danger">Delete</Button></td>
        </tr>
        <tr>
          <td>124</td>
          <td>Added name 2</td>
          <td>email2@email.com</td>
          <td><Button type="button" variant="danger">Delete</Button></td>
        </tr>

        <tr className="input-row">
          <td><input type="text" placeholder="ID" className="form-control"/></td>
          <td><input type="text" placeholder="Name" className="form-control"/></td>
          <td><input type="text" placeholder="Email" className="form-control"/></td>
          <td><Button type="submit" variant="success">Add</Button></td>
        </tr>
        </tbody>
      </Table>
    </div>

  </div>)
}

export default Employees;