En mi codigo hay una form
que recoge un valor que ingresa el usuario llamado name
. Al enviar esta form
se ejecuta una función (addMarkUp()
) que añade lo que sea que es name
al state
del componente. Después de esto hay otra función (updateDynamo()
) que con la información recientemente añadida al state
, envía estos datos a una base de datos.
export default class AddSite extends Component {
state = {
new_location: "",
new_site: "",
view_location: [42.600273, -5.572582],
user_sites: [],
zoom: 2,
current_user: ""
}
updateDynamo = () => {
axios.patch(`${apiGatewayDevStage}/add-site`, {
email: this.state.current_user,
sites: this.state.user_sites,
}).then((res) => {
console.log('DB en Dynamo actualizada')
}).catch(err => console.log(err))
}
addMarkUp = (event) => {
event.preventDefault();
let itemsCounter = this.state.user_sites.length + 1;
const newSite = this.state.new_site;
Geocode.fromAddress(newSite).then(
response => {
const { lat, lng } = response.results[0].geometry.location;
this.setState(prevState => ({
user_sites: [{
"name": newSite, "id": itemsCounter, coordinates: [lat, lng]
}, ...prevState.user_sites]
}))
this.updateDynamo()
},
error => { console.error(error); }
);
}
async deleteSite(id) {
await this.setState({
user_sites: this.state.user_sites.filter(function (item) {
return item.id !== id
})
})
this.updateDynamo()
}
// Conversor nombre a coordenadas
geoCodeToCoordinates = (event) => {
event.preventDefault()
const newAdress = this.state.new_location;
Geocode.fromAddress(newAdress).then(
response => {
const { lat, lng } = response.results[0].geometry.location;
this.setState({
view_location: [lat, lng],
zoom: 6
})
},
error => {
console.error(error);
}
);
}
// recoger datos en la form al state
onChangeNewLocation = event => {
this.setState({
new_location: event.target.value
})
};
onChangeNewSite = event => {
this.setState({
new_site: event.target.value
})
};
render() {
return (
<div className="addsite-container">
<Container>
{/** AÑADIDOR SITIOS */}
<Col className="p-0">
<Container className="add-container">
<Form onSubmit={this.addMarkUp}>
<h4>Añade un sitio </h4>
<Row>
<Form.Control type="text" onChange={this.onChangeNewSite} value={this.state.new_site} placeholder="ejemplo: Madrid, New York...etc" />
</Row>
<Row>
<Button type="submit" variant="success">Añadir</Button>
</Row>
</Form>
</Container>
<ListGroup>
{this.state.user_sites.map((site, i) => (
<div key={i} className="added-items-container">
<ListGroup.Item className="added-items" variant="warning" >{site.name}</ListGroup.Item>
<Button onClick={this.deleteSite.bind(this, site.id)}>Quitar</Button>
</div>
))}
</ListGroup>
</Col>
</Row>
</Container>
</div>
)
}
}
Pero he tenido que añadir otra función más (insertPicture()
) porque necesito que se busque una foto online relacionada con el name
que se ha recogido en la form
. Necesito tener la respuesta de esta función, que conecta con una API de fotos online, para que cuando addMarkUp()
se ejecute, también tenga disponible el valor url
correspondiente al name
para añadirlo al state.
insertPicture(site) {
pexelsClient.search(site, 1, 1)
.then(function (result) {
console.log(result);
})
.catch(function (e) {
console.err(e);
});
}
Es decir, pienso que para hacer funcionar esto necesitaría tener el siguiente order de ejecución:
1 Primero: insertPicture()
2 Segundo: addMarkUp()
3 Tercero: updateDynamo()
El problema es que he probado a hacerlo de la siguiente manera y parece que no es la apropiada:
addMarkUp = (async event) => {
event.preventDefault();
let itemsCounter = this.state.user_sites.length + 1;
const newSite = this.state.new_site;
// Primero ejecutar esta función:
await insertPicture(this.state.new_site);
Geocode.fromAddress(newSite).then(
response => {
const { lat, lng } = response.results[0].geometry.location;
this.setState(prevState => ({
user_sites: [{
"name": newSite, "id": itemsCounter, coordinates: [lat, lng]
}, ...prevState.user_sites]
}))
this.updateDynamo()
},
error => { console.error(error); }
);
}