NodeJS + Express + React Hooks + MySQL – #5 List

NodeJS + Express

Controller

src/controllers/CustomerController.js

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

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

  try {

    const response = await Customers.findAll()
    .then(function(data){
      const res = { succes: true, data: data }
      return res;
    })
    .catch(error => {
      const res = { succes: false, message: error }
      return res;
    })

    res.json(response);

  } catch (e) {

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

  }
}

module.exports = controller;

Routes

src/routes/api.js

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

router.get('/customer/list', customerController.list );

module.exports = router;

React

Form

src/views/js/components/customer/List.js

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

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

import { Link } from "react-router-dom";

function List(){

  const [ listCustomer, setListCustomer ] = useState([]);

  useEffect(()=>{

    async function fetchDataCustomer(){
      const res = await customerService.list();
      if (res.succes) {
        setListCustomer(res.data)
      }
      console.log(res);
    }

    fetchDataCustomer();

  },[])

  return (
    <section>
      <table class="table">
        <thead class="thead-dark table-bordered">
          <tr>
            <th scope="col">#</th>
            <th scope="col">Name 2</th>
            <th scope="col">Email</th>
            <th scope="col">Address</th>
            <th scope="col">Phone</th>
            <th scope="col">Action</th>
          </tr>
        </thead>
        <tbody>

          {
            listCustomer.map((item)=>{
              return(
                <tr>
                  <th scope="row">{item.id}</th>
                  <td>{item.name}</td>
                  <td>{item.email}</td>
                  <td>{item.address}</td>
                  <td>{item.phone}</td>
                  <td>
                    <Link class="btn btn-outline-info" to={"/customer/edit/"+item.id}>Edit</Link>
                    <a href="#" class="btn btn-danger"> Delete </a>
                  </td>
                </tr>
              )
            })
          }

        </tbody>
      </table>
    </section>
  )
}

export default List;

Services

src/views/js/services/Customer.js

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

customer.list = async () => {

  const urlList = baseUrl+"/list"
  const res = await axios.get(urlList)
  .then(response=>{ return response.data })
  .catch(error=>{ return error; })
  return res;

}
 
export default customer

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *