Can't delete multiple images inside React Firebase Promises - reactjs

Question

I am basically trying to delete specific Firebase data in both my storage and my database according to values I have stored in an array. I have an array of objects that cointains a key (which is a child key used for both FirebaseStorage and FirebaseDatabase, a picture name and a file destination. To make sure that I don't just remove the reference to the picture, I also want to delete it in Firebase Storage. Therefore, I thought that the use of a for-loop would solve the problem. This is my code so far:
var key, count = 0;
for (key in delArray) {
if (delArray.hasOwnProperty(key)) {
count++;
}
}
for (index = 0; index < count && canProceed; index++) {
canProceed = false;
var deletionFileLocation = storageNews.child(newsId + "/" + delArray[index].key + "/" + delArray[index].name);
deletionFileLocation.delete().then(() => {
databaseNews.child(newsId).child('thumbnails').child(delArray[index].key).remove().then(() => {
canProceed = true;
});
});
if (index == delArray.length) {
console.log('done');
}
}
The strange thing with this code, is that it removes all(I think, as far as I have noticed) pictures, but only reference in the database. In other words, it only removes one child in the DB. What am I doing wrong here? Do I need to use callbacks with async await? If so, how would I approach it? I am fairly new to React, and I can't seem to understand how I would do it.

Answer 1

It looks like you have it arranged so that the for loop hangs the process until any one of the remove() promises resolves. The missing concept is Promise.all().
// moved to a promise-returning function so we can see what's going on
function deleteDataAndStorage(newsId, obj) {
let path = newsId + "/" + obj.key + "/" + obj.name;
let deletionFileLocation = storageNews.child(path);
return deletionFileLocation.delete().then(() => {
return databaseNews.child(newsId).child('thumbnails').child(obj.key).remove();
});
}
Now the loop is simple and clear. Promise.all() does what the name says: it resolves with an array of results when all of the promises you pass it have resolved.
let promises = [];
for (index = 0; index < count; index++) {
promises.push(deleteDataAndStorage(newsId, delArray[index]));
}
return Promise.all(promises).then(result => {
console.log('done');
});