react-query-firebase 2.3.2 → 2.4.0

package/web/firestore/useFirestore.js

@@ -1,10 +1,11 @@
 import { useContext } from "react";
 import { FirebaseContext } from "../context/FirebaseContext";
 /**
- * Provides a hook to access the Firestore instance from the Firebase context.
- * It extracts the Firestore object from the Firebase context, allowing components to interact with Firestore services.
+ * Returns an instance of firestore bound to the closest context.
  *
- * @returns {firestore.Firestore} The Firestore instance from the Firebase context.
+ * @group Hook
+ *
+ * @returns {Firestore}
  */
 export const useFirestore = () => {
     const { firestore } = useContext(FirebaseContext);

package/web/firestore/useFirestore.ts

@@ -2,10 +2,11 @@ import { useContext } from "react";
 import { FirebaseContext } from "../context/FirebaseContext";
 
 /**
- * Provides a hook to access the Firestore instance from the Firebase context.
- * It extracts the Firestore object from the Firebase context, allowing components to interact with Firestore services.
+ * Returns an instance of firestore bound to the closest context.
  *
- * @returns {firestore.Firestore} The Firestore instance from the Firebase context.
+ * @group Hook
+ *
+ * @returns {Firestore}
  */
 export const useFirestore = () => {
     const { firestore } = useContext(FirebaseContext);

package/web/firestore/useGetDocData.d.ts

@@ -1,18 +1,37 @@
-import { CollectionReference, DocumentData, DocumentReference } from "firebase/firestore";
+import { GetDocDataOptions } from "./utils/getDocData";
 import { UseQueryOptions } from "@tanstack/react-query";
-type UseGetDocOptions<AppModelType extends DocumentData = DocumentData, DbModelType extends DocumentData = DocumentData> = {
+import { AppModel } from "../../types";
+/**
+ * @inline
+ */
+type UseGetDocOptions<AppModelType extends AppModel = AppModel> = {
+    /**
+     * Reqct-query options that must include queryKey and shall not define queryFn
+     */
     options: Omit<UseQueryOptions<AppModelType | null, Error, AppModelType>, "queryFn"> & Required<Pick<UseQueryOptions<AppModelType, Error, AppModelType>, "queryKey">>;
-    path?: string;
-    pathSegments?: string[];
-    reference: CollectionReference<AppModelType, DbModelType> | DocumentReference<AppModelType, DbModelType>;
-};
+} & Omit<GetDocDataOptions<AppModelType>, "db">;
 /**
- * Custom React Hook to retrieve document data from Firestore using specified parameters.
- * @param {Object} options - The options for configuring the Firestore query.
- * @param {string} reference - The reference to the document in Firestore.
- * @param {string} path - The path to the document in Firestore.
- * @param {Array<string>} pathSegments - Segments of the path to document in Firestore.
- * @returns {Object} Result of the query containing document data and query status.
+ * Executes a query on a Firestore data source and returns the resulting document.
+ *
+ * @group Hook
+ *
+ * @param {UseGetDocOptions<AppModelType>} options - Configuration options for the query.
+ *
+ * @returns {UseQueryResult<AppModelType, Error>} An object containing document's data
+ *
+ * @example
+ * ```jsx
+ * export const MyComponent = () => {
+ *  const doc = useGetDocData({
+ *      options: {
+ *          queryKey: ['key']
+ *      },
+ *      reference: collection(),
+ *      path: 'id'
+ *  });
+ *  console.log(doc);
+ * };
+ * ```
  */
-export declare const useGetDocData: <AppModelType extends DocumentData = DocumentData, DbModelType extends DocumentData = DocumentData>({ options, reference, path, pathSegments }: UseGetDocOptions<AppModelType, DbModelType>) => import("@tanstack/react-query").UseQueryResult<AppModelType, Error>;
+export declare const useGetDocData: <AppModelType extends AppModel = AppModel>({ options, reference, path, pathSegments }: UseGetDocOptions<AppModelType>) => import("@tanstack/react-query").UseQueryResult<AppModelType, Error>;
 export {};

package/web/firestore/useGetDocData.js

@@ -2,12 +2,27 @@ import { useFirestore } from "./useFirestore";
 import { getDocData } from "./utils/getDocData";
 import { useQuery } from "@tanstack/react-query";
 /**
- * Custom React Hook to retrieve document data from Firestore using specified parameters.
- * @param {Object} options - The options for configuring the Firestore query.
- * @param {string} reference - The reference to the document in Firestore.
- * @param {string} path - The path to the document in Firestore.
- * @param {Array<string>} pathSegments - Segments of the path to document in Firestore.
- * @returns {Object} Result of the query containing document data and query status.
+ * Executes a query on a Firestore data source and returns the resulting document.
+ *
+ * @group Hook
+ *
+ * @param {UseGetDocOptions<AppModelType>} options - Configuration options for the query.
+ *
+ * @returns {UseQueryResult<AppModelType, Error>} An object containing document's data
+ *
+ * @example
+ * ```jsx
+ * export const MyComponent = () => {
+ *  const doc = useGetDocData({
+ *      options: {
+ *          queryKey: ['key']
+ *      },
+ *      reference: collection(),
+ *      path: 'id'
+ *  });
+ *  console.log(doc);
+ * };
+ * ```
  */
 export const useGetDocData = ({ options, reference, path, pathSegments }) => {
     const db = useFirestore();

package/web/firestore/useGetDocData.ts

@@ -1,41 +1,52 @@
-import { CollectionReference, DocumentData, DocumentReference } from "firebase/firestore";
-
 import { useFirestore } from "./useFirestore";
-import { getDocData } from "./utils/getDocData";
+import { getDocData, GetDocDataOptions } from "./utils/getDocData";
 import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+import { AppModel } from "../../types";
 
-type UseGetDocOptions<
-    AppModelType extends DocumentData = DocumentData,
-    DbModelType extends DocumentData = DocumentData
-> = {
+/**
+ * @inline
+ */
+type UseGetDocOptions<AppModelType extends AppModel = AppModel> = {
+    /**
+     * Reqct-query options that must include queryKey and shall not define queryFn
+     */
     options: Omit<UseQueryOptions<AppModelType | null, Error, AppModelType>, "queryFn"> &
         Required<Pick<UseQueryOptions<AppModelType, Error, AppModelType>, "queryKey">>;
-    path?: string;
-    pathSegments?: string[];
-    reference: CollectionReference<AppModelType, DbModelType> | DocumentReference<AppModelType, DbModelType>;
-};
+} & Omit<GetDocDataOptions<AppModelType>, "db">;
 
 /**
- * Custom React Hook to retrieve document data from Firestore using specified parameters.
- * @param {Object} options - The options for configuring the Firestore query.
- * @param {string} reference - The reference to the document in Firestore.
- * @param {string} path - The path to the document in Firestore.
- * @param {Array<string>} pathSegments - Segments of the path to document in Firestore.
- * @returns {Object} Result of the query containing document data and query status.
+ * Executes a query on a Firestore data source and returns the resulting document.
+ *
+ * @group Hook
+ *
+ * @param {UseGetDocOptions<AppModelType>} options - Configuration options for the query.
+ *
+ * @returns {UseQueryResult<AppModelType, Error>} An object containing document's data
+ *
+ * @example
+ * ```jsx
+ * export const MyComponent = () => {
+ *  const doc = useGetDocData({
+ *      options: {
+ *          queryKey: ['key']
+ *      },
+ *      reference: collection(),
+ *      path: 'id'
+ *  });
+ *  console.log(doc);
+ * };
+ * ```
  */
-export const useGetDocData = <
-    AppModelType extends DocumentData = DocumentData,
-    DbModelType extends DocumentData = DocumentData
->({
+export const useGetDocData = <AppModelType extends AppModel = AppModel>({
     options,
     reference,
     path,
     pathSegments
-}: UseGetDocOptions<AppModelType, DbModelType>) => {
+}: UseGetDocOptions<AppModelType>) => {
     const db = useFirestore();
 
     return useQuery({
         ...options,
-        queryFn: () => getDocData<AppModelType, DbModelType>({ db, reference, path, pathSegments })
+        queryFn: () => getDocData<AppModelType>({ db, reference, path, pathSegments })
     });
 };

package/web/firestore/useGetRealtimeDocData.js

@@ -48,9 +48,9 @@ export const useGetRealtimeDocData = ({ path, pathSegments, reference, onError }
         return () => unsubscribe();
     }, [ref, doc, isError, onError, isFetching, error]);
     return useMemo(() => ({
-        data: doc,
+        data: { ...(doc || {}), uid: ref?.id ?? "" },
         isError,
         isFetching,
         error
-    }), [doc, isError, error, isFetching]);
+    }), [doc, isError, error, ref, isFetching]);
 };

package/web/firestore/useGetRealtimeDocData.ts

@@ -95,11 +95,11 @@ export const useGetRealtimeDocData = <AppModelType extends AppModel = AppModel>(
 
     return useMemo(
         () => ({
-            data: doc,
+            data: { ...(doc || {}), uid: ref?.id ?? "" } as AppModelType,
             isError,
             isFetching,
             error
         }),
-        [doc, isError, error, isFetching]
+        [doc, isError, error, ref, isFetching]
     );
 };

package/web/firestore/useInfiniteQuery.d.ts

@@ -1,6 +1,6 @@
 import { CollectionReference, QueryConstraint, QueryNonFilterConstraint } from "firebase/firestore";
 import { UseInfiniteQueryOptions as UseReactInfiniteQueryOptions, QueryKey, UseInfiniteQueryResult, InfiniteData } from "@tanstack/react-query";
-import { QueryFilterConstraint } from "./useCompositeFilter";
+import { QueryFilterConstraint } from "./utils/buildCompositeFilter";
 import { AppModel } from "../../types";
 /**
  * @inline
@@ -9,7 +9,7 @@ type UseInfiniteQueryOptions<AppModelType extends AppModel = AppModel, TQueryKey
     /**
      * Reqct-query options that must include queryKey and shall not define queryFn
      */
-    options: Omit<UseReactInfiniteQueryOptions<AppModelType[], Error, InfiniteData<AppModelType[]>, AppModelType[], TQueryKey, QueryConstraint>, "queryFn"> & Required<Pick<UseReactInfiniteQueryOptions<AppModelType[], Error, InfiniteData<AppModelType[]>, AppModelType[], TQueryKey, QueryConstraint>, "queryKey">>;
+    options: Omit<UseReactInfiniteQueryOptions<AppModelType[], Error, InfiniteData<AppModelType[]>, AppModelType[], TQueryKey, QueryNonFilterConstraint>, "queryFn"> & Required<Pick<UseReactInfiniteQueryOptions<AppModelType[], Error, InfiniteData<AppModelType[]>, AppModelType[], TQueryKey, QueryNonFilterConstraint>, "queryKey">>;
     /**
      * Reference to a Firestore collection
      */

package/web/firestore/useInfiniteQuery.js

@@ -34,7 +34,7 @@ export const useInfiniteQuery = ({ options, collectionReference, queryConstraint
             const docs = [];
             if (querySnapshot) {
                 querySnapshot.forEach((doc) => {
-                    docs.push(doc.data());
+                    docs.push({ ...doc.data(), uid: doc.id });
                 });
             }
             return docs;

package/web/firestore/useInfiniteQuery.ts

@@ -14,7 +14,7 @@ import {
     UseInfiniteQueryResult,
     InfiniteData
 } from "@tanstack/react-query";
-import { QueryFilterConstraint } from "./useCompositeFilter";
+import { QueryFilterConstraint } from "./utils/buildCompositeFilter";
 import { AppModel } from "../../types";
 
 /**
@@ -31,7 +31,7 @@ type UseInfiniteQueryOptions<AppModelType extends AppModel = AppModel, TQueryKey
             InfiniteData<AppModelType[]>,
             AppModelType[],
             TQueryKey,
-            QueryConstraint
+            QueryNonFilterConstraint
         >,
         "queryFn"
     > &
@@ -43,7 +43,7 @@ type UseInfiniteQueryOptions<AppModelType extends AppModel = AppModel, TQueryKey
                     InfiniteData<AppModelType[]>,
                     AppModelType[],
                     TQueryKey,
-                    QueryConstraint
+                    QueryNonFilterConstraint
                 >,
                 "queryKey"
             >
@@ -110,7 +110,7 @@ export const useInfiniteQuery = <AppModelType extends AppModel = AppModel, TQuer
 
             if (querySnapshot) {
                 querySnapshot.forEach((doc) => {
-                    docs.push(doc.data());
+                    docs.push({ ...doc.data(), uid: doc.id });
                 });
             }
             return docs;

package/web/firestore/useQuery.d.ts

@@ -1,6 +1,6 @@
 import { CollectionReference, QueryConstraint, QueryNonFilterConstraint } from "firebase/firestore";
 import { UseQueryResult, UseQueryOptions as UseReactQueryOptions } from "@tanstack/react-query";
-import { QueryFilterConstraint } from "./useCompositeFilter";
+import { QueryFilterConstraint } from "./utils/buildCompositeFilter";
 import { AppModel } from "../../types";
 /**
  * @inline

package/web/firestore/useQuery.js

@@ -33,7 +33,7 @@ export const useQuery = ({ options, collectionReference, queryConstraints = [],
             const docs = [];
             if (querySnapshot) {
                 querySnapshot.forEach((doc) => {
-                    docs.push(doc.data());
+                    docs.push({ ...doc.data(), uid: doc.id });
                 });
             }
             return docs;

package/web/firestore/useQuery.ts

@@ -12,7 +12,7 @@ import {
     useQuery as useReactQuery,
     UseQueryOptions as UseReactQueryOptions
 } from "@tanstack/react-query";
-import { QueryFilterConstraint } from "./useCompositeFilter";
+import { QueryFilterConstraint } from "./utils/buildCompositeFilter";
 import { AppModel } from "../../types";
 
 /**
@@ -85,7 +85,7 @@ export const useQuery = <AppModelType extends AppModel = AppModel>({
 
             if (querySnapshot) {
                 querySnapshot.forEach((doc) => {
-                    docs.push(doc.data());
+                    docs.push({ ...doc.data(), uid: doc.id });
                 });
             }
             return docs;

package/web/firestore/useQueryConstraints.d.ts

@@ -10,27 +10,6 @@ export type UseQueryConstraints<AppModelType extends AppModel = AppModel> = {
      */
     constraints: NonFilterQueryConstraint<AppModelType>[];
 };
-/**
- * A generic mothod to build query constraints for firebase
- *
- * @group Utility
- *
- * @param {NonFilterQueryConstraint<AppModelType>} constraint
- *
- * @returns {QueryNonFilterConstraint}
- *
- * @example
- * ```jsx
- * const firebaseConfig = {};
- * export const constraint = useMemo(() => {
- *  return buildQueryConstraint({
- *      type: 'limit',
- *      limit: 1
- *  });
- * };
- * ```
- */
-export declare const buildQueryConstraint: <AppModelType extends AppModel = AppModel>(constraint: NonFilterQueryConstraint<AppModelType>) => QueryNonFilterConstraint;
 /**
  * A hook to build a list of non-filter query constraints for firebase queries.
  * It uses buildQueryConstraint method and useMemo hook.

package/web/firestore/useQueryConstraints.js

@@ -1,43 +1,5 @@
-import { startAt, orderBy, limit, limitToLast, startAfter, endAt, endBefore } from "firebase/firestore";
 import { useMemo } from "react";
-/**
- * A generic mothod to build query constraints for firebase
- *
- * @group Utility
- *
- * @param {NonFilterQueryConstraint<AppModelType>} constraint
- *
- * @returns {QueryNonFilterConstraint}
- *
- * @example
- * ```jsx
- * const firebaseConfig = {};
- * export const constraint = useMemo(() => {
- *  return buildQueryConstraint({
- *      type: 'limit',
- *      limit: 1
- *  });
- * };
- * ```
- */
-export const buildQueryConstraint = (constraint) => {
-    switch (constraint.type) {
-        case "orderBy":
-            return orderBy(constraint.fieldPath, constraint.directionStr);
-        case "startAt":
-            return startAt(...constraint.arguments);
-        case "startAfter":
-            return startAfter(...constraint.arguments);
-        case "endAt":
-            return endAt(constraint.value, constraint.key);
-        case "endBefore":
-            return endBefore(constraint.value, constraint.key);
-        case "limit":
-            return limit(constraint.limit);
-        case "limitToLast":
-            return limitToLast(constraint.limit);
-    }
-};
+import { buildQueryConstraint } from "./utils/buildQueryConstraint";
 /**
  * A hook to build a list of non-filter query constraints for firebase queries.
  * It uses buildQueryConstraint method and useMemo hook.

package/web/firestore/useQueryConstraints.ts

@@ -1,16 +1,8 @@
-import {
-    QueryNonFilterConstraint,
-    startAt,
-    orderBy,
-    limit,
-    limitToLast,
-    startAfter,
-    endAt,
-    endBefore
-} from "firebase/firestore";
+import { QueryNonFilterConstraint } from "firebase/firestore";
 import { AppModel } from "../../types/AppModel";
 import { NonFilterQueryConstraint } from "../../types/QueryConstraints";
 import { useMemo } from "react";
+import { buildQueryConstraint } from "./utils/buildQueryConstraint";
 
 /**
  * @inline
@@ -22,47 +14,6 @@ export type UseQueryConstraints<AppModelType extends AppModel = AppModel> = {
     constraints: NonFilterQueryConstraint<AppModelType>[];
 };
 
-/**
- * A generic mothod to build query constraints for firebase
- *
- * @group Utility
- *
- * @param {NonFilterQueryConstraint<AppModelType>} constraint
- *
- * @returns {QueryNonFilterConstraint}
- *
- * @example
- * ```jsx
- * const firebaseConfig = {};
- * export const constraint = useMemo(() => {
- *  return buildQueryConstraint({
- *      type: 'limit',
- *      limit: 1
- *  });
- * };
- * ```
- */
-export const buildQueryConstraint = <AppModelType extends AppModel = AppModel>(
-    constraint: NonFilterQueryConstraint<AppModelType>
-): QueryNonFilterConstraint => {
-    switch (constraint.type) {
-        case "orderBy":
-            return orderBy(constraint.fieldPath as string, constraint.directionStr);
-        case "startAt":
-            return startAt(...constraint.arguments);
-        case "startAfter":
-            return startAfter(...constraint.arguments);
-        case "endAt":
-            return endAt(constraint.value, constraint.key);
-        case "endBefore":
-            return endBefore(constraint.value, constraint.key);
-        case "limit":
-            return limit(constraint.limit);
-        case "limitToLast":
-            return limitToLast(constraint.limit);
-    }
-};
-
 /**
  * A hook to build a list of non-filter query constraints for firebase queries.
  * It uses buildQueryConstraint method and useMemo hook.

package/web/firestore/useRunTransaction.d.ts

@@ -1,15 +1,40 @@
 import { UseMutationOptions } from "@tanstack/react-query";
 import { Transaction } from "firebase/firestore";
 import { FirebaseError } from "firebase/app";
-export type UseRunTransactionValues = <AppModelType = unknown>(transaction: Transaction) => AppModelType;
-export type UseRunTransactionOptions<AppModelType = unknown, TContext = unknown> = {
-    options?: Omit<UseMutationOptions<AppModelType, FirebaseError, UseRunTransactionValues, TContext>, "mutationFn">;
+/**
+ * @inline
+ */
+export type UseRunTransactionValues = <T = unknown>(transaction: Transaction) => T;
+/**
+ * @inline
+ */
+export type UseRunTransactionOptions<T = unknown, TContext = unknown> = {
+    /**
+     * Reqct-mutation options that shall omit mutationFn
+     */
+    options?: Omit<UseMutationOptions<T, FirebaseError, UseRunTransactionValues, TContext>, "mutationFn">;
 };
 /**
- * Custom hook to execute a Firestore transaction using the useMutation hook.
+ * Executes a Firestore transaction
+ *
+ * @group Hook
+ *
+ * @param {UseRunTransactionOptions<T>} options - Configuration options for the mutation.
+ *
+ * @returns {UseMutationResult<T, Error>} An object representing mutation
  *
- * @param {UseRunTransactionOptions<AppModelType, TContext>} options - Configuration options for running the transaction.
- * @param {Object} options.options - Options to customize the behavior of useMutation and runTransaction.
- * @returns {UseMutationResult} The result object from the useMutation hook, allowing to track the transaction state and outcome.
+ * @example
+ * ```jsx
+ * export const MyComponent = () => {
+ *  const doc = useGetDocData({
+ *      options: {
+ *          queryKey: ['key']
+ *      },
+ *      reference: collection(),
+ *      path: 'id'
+ *  });
+ *  console.log(doc);
+ * };
+ * ```
  */
-export declare const useRunTransaction: <AppModelType = unknown, TContext = unknown>({ options }: UseRunTransactionOptions<AppModelType, TContext>) => import("@tanstack/react-query").UseMutationResult<AppModelType, FirebaseError, UseRunTransactionValues, TContext>;
+export declare const useRunTransaction: <T = unknown, TContext = unknown>({ options }: UseRunTransactionOptions<T, TContext>) => import("@tanstack/react-query").UseMutationResult<T, FirebaseError, UseRunTransactionValues, TContext>;

package/web/firestore/useRunTransaction.js

@@ -2,11 +2,27 @@ import { useMutation } from "@tanstack/react-query";
 import { runTransaction } from "firebase/firestore";
 import { useFirestore } from "./useFirestore";
 /**
- * Custom hook to execute a Firestore transaction using the useMutation hook.
+ * Executes a Firestore transaction
  *
- * @param {UseRunTransactionOptions<AppModelType, TContext>} options - Configuration options for running the transaction.
- * @param {Object} options.options - Options to customize the behavior of useMutation and runTransaction.
- * @returns {UseMutationResult} The result object from the useMutation hook, allowing to track the transaction state and outcome.
+ * @group Hook
+ *
+ * @param {UseRunTransactionOptions<T>} options - Configuration options for the mutation.
+ *
+ * @returns {UseMutationResult<T, Error>} An object representing mutation
+ *
+ * @example
+ * ```jsx
+ * export const MyComponent = () => {
+ *  const doc = useGetDocData({
+ *      options: {
+ *          queryKey: ['key']
+ *      },
+ *      reference: collection(),
+ *      path: 'id'
+ *  });
+ *  console.log(doc);
+ * };
+ * ```
  */
 export const useRunTransaction = ({ options = {} }) => {
     const db = useFirestore();

package/web/firestore/useRunTransaction.ts

@@ -4,28 +4,53 @@ import { runTransaction, Transaction } from "firebase/firestore";
 import { FirebaseError } from "firebase/app";
 import { useFirestore } from "./useFirestore";
 
-export type UseRunTransactionValues = <AppModelType = unknown>(transaction: Transaction) => AppModelType;
+/**
+ * @inline
+ */
+export type UseRunTransactionValues = <T = unknown>(transaction: Transaction) => T;
 
-export type UseRunTransactionOptions<AppModelType = unknown, TContext = unknown> = {
-    options?: Omit<UseMutationOptions<AppModelType, FirebaseError, UseRunTransactionValues, TContext>, "mutationFn">;
+/**
+ * @inline
+ */
+export type UseRunTransactionOptions<T = unknown, TContext = unknown> = {
+    /**
+     * Reqct-mutation options that shall omit mutationFn
+     */
+    options?: Omit<UseMutationOptions<T, FirebaseError, UseRunTransactionValues, TContext>, "mutationFn">;
 };
 
 /**
- * Custom hook to execute a Firestore transaction using the useMutation hook.
+ * Executes a Firestore transaction
+ *
+ * @group Hook
+ *
+ * @param {UseRunTransactionOptions<T>} options - Configuration options for the mutation.
+ *
+ * @returns {UseMutationResult<T, Error>} An object representing mutation
  *
- * @param {UseRunTransactionOptions<AppModelType, TContext>} options - Configuration options for running the transaction.
- * @param {Object} options.options - Options to customize the behavior of useMutation and runTransaction.
- * @returns {UseMutationResult} The result object from the useMutation hook, allowing to track the transaction state and outcome.
+ * @example
+ * ```jsx
+ * export const MyComponent = () => {
+ *  const doc = useGetDocData({
+ *      options: {
+ *          queryKey: ['key']
+ *      },
+ *      reference: collection(),
+ *      path: 'id'
+ *  });
+ *  console.log(doc);
+ * };
+ * ```
  */
-export const useRunTransaction = <AppModelType = unknown, TContext = unknown>({
+export const useRunTransaction = <T = unknown, TContext = unknown>({
     options = {}
-}: UseRunTransactionOptions<AppModelType, TContext>) => {
+}: UseRunTransactionOptions<T, TContext>) => {
     const db = useFirestore();
 
     return useMutation({
         ...options,
         mutationFn: async (transactionFn) => {
-            return runTransaction<AppModelType>(db, transactionFn);
+            return runTransaction<T>(db, transactionFn);
         }
     });
 };