'use strict'

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

class CustomerController {

  /*  ...  */

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

  async get({params}){

    try {

      const { id } = params
      const data = await Customer.find(id)

      if (data) {
        const response = {
          message: "load successful",
          success: true,
          data: data
        }
        return response;
      }
      else {
        const response = {
          message: "Not found data "+id,
          success: false
        }
        return response;
      }

    } catch (e) {

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

  }

}

module.exports = CustomerController

Route.group(()=>{

  /* ... */ 
  Route.get('customer/get/:id',"CustomerController.get");
  
}).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();

  },[]);

  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} />
        </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}/>
        </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} />
        </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} />
        </div>
      </div>


      <div class="row">
        <div class="col-md-6 mb-3">
          <button  class="btn btn-primary btn-block" type="submit">Save</button>
        </div>
      </div>

    </div>
  )

}

export default Edit;

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

/* ...*/

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

export default customer