Within Firestore, I have a Document that includes a property named "items" which is of type array. This array consists of ShoppingItem objects with the specified structure:
export class ShoppingItem {
id?: string;
name: string;
checked = false;
}
To further elaborate, here is the structure of the document:
export interface ShoppingList {
id: string;
name?: string;
items: ShoppingItem[]; // <-- This is the array property I am modifying
}
Users can modify the checked property of an object through the UI, and I intend to sync these changes with the database. According to Firebase documentation, we can use arrayRemove/arrayUnion to add or remove array elements atomically.
Questioning whether it's necessary to remove the old object and add the new one in nested promises each time for updating an existing item, like demonstrated below, or if there might be a more elegant solution:
updateItem(listId: string, item: ShoppingItem) {
const docRef = this.db.collection("list").doc(listId)
return docref.update({ items: firestore.FieldValue.arrayRemove(item) })
.then(() => {
{
docRef.update({ items: firestore.FieldValue.arrayUnion(item) });
}
});
}
A known downside of removing and adding the item within the array results in a noticeable flickering effect in the UI for the updated element.