I'm using React/Typescript/SanchoUI. I newbie with all of the above, but feel like I'm missing something here... The code is open source and modified, so I've not written some of it, coming in and just trying to make parts work.
The issue is In the onConfirm, the asynchronous functions are running in the wrong order and I don't know why I can't fix it...
What should happen:
- the imageUrls line retrieves image URLs from a firebase field.
- the uploadUrls line uploads the image to an external API and returns an array of the final URLs
- the uploadListing function is called, passing in the final URLs from above.
What IS happening:
- the imageUrls line retrieves image URLs from a firebase field.
- the uploadListing function is called, passing in the final URLs variable, which only contains the promise, which fails due to the wrong type of info passing in.
- the uploadUrls line gets the data back from the API successfully but is too late as the previous function has already done.
What I've tried: I tried removing all await/async from this element and the functions they call, tried splitting into a couple of small functions and executing in order using .then for the next, and I suppose I'm just missing something...
Any help as to how to get these to return in the right order is MUCH appreciated!
The element code and a couple of functions' code below. Thanks in advance.
<AlertDialog
isOpen={openAlert}
confirmLabel="Confirm"
subtitle="Do you want to Schedule Listing?"
title={"Schedule Listing"}
onConfirm={async () => {
let imageURLs = [];
imageURLs = await Promise.all(image.map( async img => await getImageURL(img)));
console.log("imageURLs: " + imageURLs);
let uploadURLs = [];
uploadURLs = await Promise.all(imageURLs.map( async value => await uploadImage(value)));
console.log("uploadURLs: " + uploadURLs);
uploadListing({
des: credit,
publisher: publisher,
images: uploadURLs,
customLabel: 'bug',
shippingPolicy: shippingPolicy,
price: price,
title: title,
category: finalCategory
});
}}
onClose={() => {
setOpenAlert(false);
}}
/>
getImageURL
export const getImageURL = async (id, prefix = "images/") => {
const storage = firebase.storage().ref();
var url = '';
try {
url = await storage
.child(prefix + id)
.getDownloadURL();
} catch(err) {
console.log('Cannot get image URL', err);
}
return url;
}
uploadImage
export const uploadImage = async (imageURL, imageName = 'test') => {
imageURL = imageURL.replace("&", "&");
var token = ebayConfig.token;
var options = { "XML Headers/Body/etc.. here. Removed for condensing question." };
var ebayImgUrl = '';
request(options, function (error, response) {
// console.log(options);
if (error) throw new Error(error);
// ebayImgUrl = getEbayImageURL(response.body);
// console.log(response.body);
const xml = response.body;
xml2js.parseString(xml, function (err, result) {
// console.log(result);
ebayImgUrl = result.UploadSiteHostedPicturesResponse.SiteHostedPictureDetails[0].FullURL[0];
console.log(ebayImgUrl);
});
});
return ebayImgUrl;
}