package com.tutofox.tutospring.controllers;

 /...../
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;

@RestController
@RequestMapping("/api/employee")
public class EmployeeController {
	
	@Autowired
	EmployeeRepository employeeRepository;
	
	/....../
 
	
	@PostMapping(value="/create")
	public ResponseEntity<String> create(@RequestBody Employee data){
		
		try {
			System. out. print("Proceso de guardar datos");
			employeeRepository.save(data);
			return new ResponseEntity<>( "Save successful " , HttpStatus.OK);
		} 
		catch (Exception e) {
			System.out.print(e);
			return new ResponseEntity<>( ""+e , HttpStatus.INTERNAL_SERVER_ERROR);
		}

 	}
	
}

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            ">0.25%",
            "not ie 11",
            "not op_mini all"
          ]
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

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

employee.create = async (state) => {

	const datapost = {
		name: state.fieldName,
		email: state.fieldEmail,
		phone: state.fieldPhone,
		address: state.fieldAddress
	}

	const urlPost = baseUrl+"/create"

	const res = await axios.post(urlPost,datapost)
	.then(response=>{
		const data = { success: true, message: response.data }
		return data;
	})
	.catch(error=>{
		const data = { success: false, message: error.response.data }
		return data;
	})

	return res;
}

export default employee

import employeeServices from "../services/Employee"

  constructor(){
    super()
    this.state = {
      fieldName:"",
      fieldEmail:"",
      fieldPhone:"",
      fieldAddress:""
    }
  }

render() {
    return (
      <div>
      <h4>Create employee v5</h4>
      <hr/>
        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="firstName">Name customer {this.state.fieldName}</label>
            <input type="text" class="form-control" placeholder="Name"
              value={this.state.fieldName}
              onChange={(value)=>this.setState({fieldName:value.target.value})}/>
          </div>
        </div>

				<div class="row">
          <div class="col-md-6 mb-3">
						<label for="email">Email</label>
	          <input type="email" class="form-control" placeholder="you@example.com"
            value={this.state.fieldEmail}
            onChange={(value)=>this.setState({fieldEmail:value.target.value})}/>
          </div>
        </div>

				<div class="row">
          <div class="col-md-6 mb-3">
						<label for="address">Address</label>
	          <input type="text" class="form-control" placeholder="1234 Main St"
            value={this.state.fieldAddress}
            onChange={(value)=>this.setState({fieldAddress:value.target.value})}/>
          </div>
        </div>

				<div class="row">
          <div class="col-md-6 mb-3">
						<label for="phone">Phone </label>
	          <input type="text" class="form-control" placeholder="123467890"
            value={this.state.fieldPhone}
            onChange={(value)=>this.setState({fieldPhone:value.target.value})}/>
          </div>
        </div>

				<div class="row">
					<div class="col-md-6 mb-3">
		      	<button onClick={()=>this.onClickSave()} class="btn btn-primary btn-block" type="submit">Save</button>
					</div>
				</div>
      </div>
    )
  }

  async onClickSave ()
  {
    const res = await employeeServices.create(this.state)
    if (res.success) {
      alert(res.message)
      window.location.replace("/employee/index");
    }
    else {
      alert("Error => "+res.message.message)
    }
  }

import React, { Component } from 'react';

import employeeServices from "../services/Employee"

export default class Form extends Component {

	constructor(){
		super();
		this.state = {
			fieldName:"",
			fieldEmail:"",
			fieldAddress:"",
			fieldPhone:"",
		}
	}

  render() {
    return (
      <div>
      	<h4>Create employee v2 </h4>
        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="firstName">Name employee</label>
            <input type="text" class="form-control" placeholder="Name"
            	value={this.state.fieldName}
            	onChange={(event)=>this.setState({fieldName:event.target.value})}
            	/>
          </div>
        </div>

				<div class="row">
          <div class="col-md-6 mb-3">
						<label for="email">Email</label>
	          <input type="email" class="form-control" placeholder="you@example.com"
	        	  value={this.state.fieldEmail}
          		  onChange={(event)=>this.setState({fieldEmail:event.target.value})}
	        	  />
          </div>
        </div>

				<div class="row">
          <div class="col-md-6 mb-3">
						<label for="address">Address</label>
	          <input type="text" class="form-control" placeholder="1234 Main St"
							value={this.state.fieldAddress}
							onChange={(event)=>this.setState({fieldAddress:event.target.value})}
						/>
          </div>
        </div>

				<div class="row">
          <div class="col-md-6 mb-3">
						<label for="phone">Phone </label>
	          <input type="text" class="form-control" placeholder="123467890"
							value={this.state.fieldPhone}
							onChange={(event)=>this.setState({fieldPhone:event.target.value})}
						/>
          </div>
        </div>

				<div class="row">
					<div class="col-md-6 mb-3">
		      	<button onClick={()=>this.onClickSave()} class="btn btn-primary btn-block" type="submit">Save</button>
					</div>
				</div>
      </div>
    )
  }

	async onClickSave()
	{
		const res = await employeeServices.create(this.state)
		if (res.success) {
			alert(res.message)
			window.location.replace("/employee/index")
		}
		else {
			alert("Error ==>"+res.message.message)
		}
	}

}