NodeJS + Express + React Hooks + MySQL – #7 Update

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

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

  try {

    // parameter get id
    const { id } = req.params;
    // parameter POST
    const { name, email, address, phone } = req.body;
    // Update data
    const response = await Customers.update({
      name:name,
      email:email,
      address:address,
      phone:phone
    },
    {
      where: { id: id }
    })
    .then( function(data){
      const res = { success: true, message:"Customer successfully updated" }
      return res;
    })
    .catch(error => {
      const res = { success: false, message: error.message }
      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.put('/customer/update/:id', customerController.update);

module.exports = router;

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

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

import swal from 'sweetalert';

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();

  },[])

  const onClickUpdate = async () => {

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

    const res = await customerService.update(data);

    if (res.success) {
      swal(res.message," ", "success");
    }
    else {
      swal("Error!", ""+JSON.stringify(res.message), "error"); 
    }

  }

  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="email" class="form-control" placeholder="[email protected]" 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={()=>onClickUpdate()}
          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.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