I'm trying to add multiple tweets to a page as it is paginated. However, I cannot seem to get widget.createTweet promises to resolve in order to add their element to the page.
Here is the logic from my reduced Codepen example.
// increment current page number
// create next set of tweets
// append tweet elems to masonry container
async function paginate() {
let current = page;
page = page + 3;
var tweetIDs = source.slice(current, page);
// create tweets/widget promises
const tweetPromises = tweetIDs.map(async id => {
// create grid element
let gridEl = document.createElement("div");
// set masonry class
gridEl.setAttribute("class", "grid__item");
// twitter widget.js - get promise
const response = twttr.widgets.createTweet(id, gridEl, {
theme: colorScheme,
dnt: true
});
return response;
});
// Promise.all over loops
let results = Promise.all(tweetPromises).then((m) => {
console.log("then", m); // never happens
})
.catch(e => {
console.log("catch", e.reason);
});
console.log(tweetIDs, tweetPromises, results, page);
// need the resolved tweets first!
// msnry.appended(newTweetElms);
// msnry.addItems(newTweetElms);
// msnry.layout();
}
This isn't a problem with your use of promises; Twitter just won't resolve the promises unless the element you pass into createWidget is added to the DOM.
let gridEl = document.createElement("div");
document.querySelector("#twitter").appendChild(gridEl);
Other than that, your code looks fine, aside from your use of then/catch in an async function. (It works, but it can be confusing, because you've got two different styles of asynchronous behavior.) This, for instance, makes it less obvious that your final diagnostic console.log will always show a Promise for results. If you were to log await results (and drop your "never happens" then and catch logging) your final console.log would show your array of actual elements.