'use strict'

const Customer = use('App/Models/Customer');

class CustomerController {

  /*  ...  */

  // ------- API REST --------------

  async update({params, request}){

    try {

      const { id } = params

      const body = request.post();

      const data = {
        name: body.name,
        email: body.email,
        address: body.address,
        phone: body.phone
      }

      await Customer.query().where('id',id).update(data);

      const response = {
        message: "updated successful",
        success: true
      }
      return response;

    } catch (e) {

      const response = {
        success: false,
        message: e.message
      }
      return response;
    }

  }

}

module.exports = CustomerController

Route.group(()=>{

  /* ... */ 
  Route.put('customer/update/:id',"CustomerController.update"); 
  
}).prefix('api');

import React, { useEffect, useState  } from 'react';

import customerService from "../../services/Customer"

function Edit(props){

  const [ id, setId ] = useState(null);
  const [ name, setName ] = useState(null);
  const [ email, setEmail ] = useState(null);
  const [ address, setAddress ] = useState(null);
  const [ phone, setPhone ] = useState(null);

  useEffect(()=>{

    async function fetchDataCustomer(){
      let id = props.match.params.id;
      const res = await customerService.get(id);

      if (res.success) {
        console.log(res);
        const data = res.data
        setId(data.id)
        setName(data.name)
        setEmail(data.email)
        setAddress(data.address)
        setPhone(data.phone)
      }
      else {
        alert(res.message)
      }
    }
    fetchDataCustomer();

  },[]);

  const updateCustomer = async () => {

    const data = {
      id, name, email, address, phone
    }

    const res = await customerService.update(data);

    if (res.success) {
      alert(res.message)
    }
    else {
      alert(res.message)
    }

  }


  return (
    <div>
      <h4>Edit customer  </h4>
      <hr/>
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="firstName">Name {name}</label>
          <input type="text" class="form-control" value={name}
          onChange={(event)=>setName(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={email} onChange={(event)=>setEmail(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={address} onChange={(event)=>setAddress(event.target.value)}/>
        </div>
      </div>

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


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

    </div>
  )

}

export default Edit;

const baseUrl = "http://localhost:3333/api/customer"
import axios from "axios";
const customer = {};

/* ...*/

customer.update = async (data) => {
  const urlUpdate = baseUrl+"/update/"+data.id
  const res = await axios.put(urlUpdate,data)
  .then(response=>{ return response.data; })
  .catch(error => { return error; })
  return res;
}

export default customer