package com.tutofox.tutospring.controllers;

/.../
 
import java.util.Map;
import java.util.HashMap;
import java.util.List;  

import com.tutofox.tutospring.models.*;

@RestController
@RequestMapping("/api/employee")
public class EmployeeController {

	/.../
	  
	@GetMapping(value="/list")
	public Map<String, Object> list(){
		
		HashMap<String,Object> response = new HashMap<String,Object>();
		
		try { 
			List<Employee> employeeList; 
			employeeList = employeeRepository.findAll();
			response.put("message","Successful load");
			response.put("list",employeeList);
			response.put("success",true);
			return response;
			
		} catch (Exception e) {  
			response.put("message",e.getMessage()); 
			response.put("success ",false);
			return response;
		}
		
	}
			 
}

const baseUrl = "http://localhost:8080/api/employee"
import axios from "axios";
const employee = {};

employee.list = async () => {
  const urlList = baseUrl+"/list"
  const res = await axios.get(urlList)
  .then(response=> {return response.data })
  .catch(error=>{ return error; })
  return res;
}

export default employee

import employeeServices from "../services/Employee"
import { Link } from "react-router-dom";

  constructor()
  {
    super()
    this.state = {
      listEmployee:[]
    }
  }

  async componentDidMount()
  {
     console.log("Mounted list");
     const res = await employeeServices.list()
     console.log(res);
     if (res.success) {
       this.setState({listEmployee:res.list})
     }
     else {
       alert("Error ==>"+res.message)
     }
  }

render() {
    return (
      <section>
      <h4>Employee List v3</h4>
      <hr/>
        <table class="table">
          <thead class="thead-dark">
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">Email</th>
              <th scope="col">Address</th>
              <th scope="col">Phone</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
          <tbody>
          {
             this.state.listEmployee.map((data)=>{
               return(
                 <tr>
                   <th scope="row">{data.id}</th>
                   <td>{data.name}</td>
                   <td>{data.email}</td>
                   <td>{data.address}</td>
                   <td>{data.phone}</td>
                   <td>
                     <Link class="btn btn-outline-info" to={"/employee/edit/"+data.id}>Edit</Link>
                     <a href="#" class="btn btn-danger"> Delete </a>
                   </td>
                 </tr>
               )
             })
           }
          </tbody>
        </table>
      </section>
    )
  }