Created
March 23, 2023 09:01
-
-
Save rcervera/45d0385e70ddb7c783793fce60cf5f5f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment