NodeJS + Express + React Hooks + MySQL – #6 Edit / Get

const controller = {}
// import model
var Customers = require('../models/Customers');

controller.get = async (req,res) => {

  try {

    const { id } = req.params;
    const response = await Customers.findOne({
        where: { id: id }
    })
    .then(function(data){ 
      const res = { success: true, data: data }
      return res;
    })
    .catch(error => {
      const res = { success: false, message: error }
      return res;
    })
    res.json(response);

  } catch (e) {

    const response = { succes: false, message: e.message }
    res.json(response)

  }

}

module.exports = controller;

const express = require('express');
const router = express.Router();
//import controller
const customerController = require('./../controllers/CustomerController');

router.get('/customer/get/:id', customerController.get);


module.exports = router;

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&&res.data) {

          const data = res.data
          console.log(data);
          setId(data.id)
          setName(data.name)
          setEmail(data.email)
          setAddress(data.address)
          setPhone(data.phone)

        }

      }
      fetchDataCustomer();

  },[]);

  return (
    <div>
      <h4>Edit customer {id}</h4>
      <hr/>

      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="firstName">Name</label>
          <input type="text" class="form-control" placeholder="Name" 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="text" class="form-control" placeholder="Email" 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="Address" 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="Phone" value={phone}
          onChange={(event)=>setPhone(event.target.value)} />
        </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:3000/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