0

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("&", "&amp;");
  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;

}
First Arachne
  • 786
  • 1
  • 8
  • 18
  • 1
    `request(options, function (error, response) {` needs to be Promisified – CertainPerformance Apr 13 '20 at 00:10
  • The fix was actually a few steps: 1. request module is deprecated as it does not support promises, switched to axios. 2. the response ITSELF had to be returned to keep the promise, not parsing in a callback and returning only the wanted data. 3. This lead me to having to move the XML parsing outside of the uploadImage code and back into the main element. – David Ramsey Apr 14 '20 at 02:30
  • Also, neither of the 'associated' questions was of any help, and the answer given was so vague as to be of nearly no help. A downvote of a new user for a thorough question, auto-closure of the question, 2 generic links that didn't directly address my situation, and a 4-word reply is hardly help. If you're going to be auto-closing your own questions/answers, please make sure they are of actual use to use new-folks. Thanks. – David Ramsey Apr 14 '20 at 02:39

0 Answers0