App.js

import { useEffect, useState } from 'react';
import axios from "axios";

function App() {

  // Llista editorials
  const [llista,setLlista] = useState([]);
  // Error que s'ha produït
  const [error, setError] = useState(null);
  // Element nou o que s'actualitza 
  const [item, setItem] = useState({_id:"", name:""});
  
  // En carregar el component es crida API per carregar la llista inicialment
  useEffect( () => {
      /*
        fetch('http://localhost:5000/publisher/all')
          .then((response) => response.json() )
          .then((json) => setLlista(json) )     
      */

      // instal·lar:  npm i axios !!
      axios.get('http://localhost:5000/publisher/all')
        .then((response) => {
              setLlista(response.data);
            }).catch(error => {
              setError(error);
            });
  },[]);

  
  // Click un botó "Delete"
  // Crida API DELETE: esborra element de BD
  // Esborra element de la llista de la Vista
  function handleDelete(id) {
   
      axios.delete('http://localhost:5000/publisher/'+id)
          .then((response) => {            
              const novaLlista =  llista.filter( (element) => element._id!==id )
              setLlista(novaLlista)
          }).catch(error => {
                setError(error);
          });    
  }

 // click un botó "Update"
 // Posa en el formulari les dades de l'item seleccionat
  function handleUpdate(publisher) {    
      setItem(publisher);
  }

  // Mostrar Error si n'hi ha
  // Formulari
  // Taula 
  return (
    <div>
      { error && <div>`Error: ${error.message}` </div>}

      <div className="App">    
          <FormPublisher llista={llista} setLlista={setLlista} item={item} setItem={setItem}/> 
          <ProductTable llista={llista} handleDelete={handleDelete} handleUpdate={handleUpdate}/>
      </div>
    </div>
  );
}

// COMPONENT: fila de la taula
function PublisherRow({ publisher , handleDelete, handleUpdate}) {  

  return (
    <tr>
       <td>{publisher._id}</td>
       <td>{publisher.name}</td>     
      <td>
          <input type="button" value="Esborrar" onClick={ () => handleDelete(publisher._id) }></input>
          <input type="button" value="Update" onClick={ () => handleUpdate(publisher) }></input>
      </td>
    </tr>
  );
}

// COMPONENT: taula editorials
function ProductTable({ llista, handleDelete, handleUpdate }) {
  const rows = [];
  
  llista.forEach(( element,index) => {
    rows.push(
      <PublisherRow key={index} publisher={element} handleDelete={handleDelete} handleUpdate={handleUpdate}/>
    );   
  });

  return (
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>Name</th>
          <th>Operacions</th>
        </tr>
      </thead>
      <tbody>
        {rows}
      </tbody>
    </table>
  );
}

// COMPONENT: formulari alta o actualització
function FormPublisher({llista,setLlista,item,setItem}) {

  const [error, setError] = useState([]);
     
  const handleChange = (input) =>  {      
      setItem( {...item, [input.name]: input.value })
  }
  
  const handleSave = () => {   
    
    if(item._id) update();
    else save();
          
  }

  const handleCancel = () => {   
    
    setItem({_id:"", name:""});
          
  }

  const save = () => {   
    
    axios.post('http://localhost:5000/publisher/',{name:item.name})
    .then((response) => {
        
        setLlista([...llista, response.data]) 
         
    }).catch(error => {        
        setError(error.response.data.errors);
    });
          
  }

  const update = () => {   
    
    axios.put('http://localhost:5000/publisher/'+item._id,item)
    .then((response) => {
        
        // setLlista([...llista, response.data]) 
        const myNextList = [...llista];
        const updatedItem = myNextList.find(
          a => a._id === item._id
        );
        updatedItem.name = item.name;
        setLlista(myNextList);
         
    }).catch(error => {        
        setError(error.response.data.errors);
    });
          
  }


  return (
    <>
      {item._id ?  'Update' : 'New'}
      <form>
        Name: <input type="text" name="name" value={item.name} 
                 onChange={ (event) => { handleChange(event.target)  }}/>        
        
        <input type="button" value="Save" onClick={handleSave}></input>
        <input type="button" value="Cancel" onClick={handleCancel}></input>

      </form>   

      <Errors errors={error}></Errors>
     
  </>
  )
}

// COMPONENT: mostar errors
function Errors({errors}) {

  const lis = [];
  errors.forEach(( element,index) => {
  
    lis.push(
      <li key={index}>{element.msg}</li>
    );   
  });

  

  return <ul>{lis}</ul>


}


export default App;