In some cases set callback of synced doesn't trigger

[yakupozbaydar]

Hey everyone! I'm creating a state management system using LegendState and syncing it with Firebase.

Here's my categories state that works correctly:

  categories: synced({
    initial: [] as Category[],
    set: async (categories) => {
      // When we set the categories
      // we sync firestore with the new categories

      const companyId = company$.companyId.peek();

      if (!companyId) {
        Logger.error("Company id is not set");
        return;
      }

      await firestore()
        .collection("companies")
        .doc(companyId)
        .update({
          categories: categories.value,
        })
        .then(() => {
          Logger.info("Categories updated successfully");
          return;
        })
        .catch((error) => {
          Logger.error("Error updating categories", error);
        });
    },
    get: () => {
      // When we get the categories
      // we fetch the categories from firestore

      const companyId = company$.companyId.peek();

      if (!companyId) {
        Logger.error("Company id is not set");
        return [];
      }

      return firestore()
        .collection("companies")
        .doc(companyId)
        .get()
        .then((doc) => {
          if (doc.exists) {
            return doc.data()?.categories as Category[];
          } else {
            Logger.error("No such document!");
            return [];
          }
        })
        .catch((error) => {
          Logger.error("Error getting document:", error);
          return [];
        });
    },
    persist: {
      name: "categories",
    },
  }),

Using methods like addCategory and updateCategory, I modify the categories array and the set callback successfully syncs with Firebase.

However, when I try the same logic with products state, the set callback doesn't trigger:

products: synced({
initial: [] as Product[],
set: async (products) => {
const companyId = company$.companyId.peek();

      if (!companyId) {
        Logger.error("Company ID not found");
        return;
      }

      await firestore()
        .collection("companies")
        .doc(companyId)
        .update({
          products: products.value,
        })
        .then(() => {
          Logger.info("Products synced with firestore successfully");
          return;
        })
        .catch((error) => {
          Logger.error("Error syncing products with firestore", error);
        });
    },

    get: async () => {
      const companyId = company$.companyId.peek();
      if (!companyId) {
        Logger.error("Company ID not found");
        return [];
      }

      const company = await firestore()
        .collection("companies")
        .doc(companyId)
        .get()
        .then((doc) => {
          if (doc.exists) {
            return doc.data();
          } else {
            Logger.error("Company not found");
            return;
          }
        })
        .catch((error) => {
          Logger.error("Error getting company", error);
          return;
        });

      if (!company) {
        return [];
      }

      company.products.map(async (product: Product) => {
        if (!product.image) {
          return product;
        }

        await storage()
          .ref(product.image)
          .getDownloadURL()
          .then((url) => {
            product.image = url;
            return product;
          })
          .catch((error) => {
            Logger.error("Error getting product image", error);
            return product;
          });
      });

      return company.products as Product[];
    },
    persist: {
      name: "products",
    },

})

I've tried debugging steps to find where it interrupts, but everything seems correct. I can also get logs when I subscribe using products.onChange.

I would appreciate any ideas, and I'm considering filing an issue for this behavior.