Add keyField and refField to database generics

Author: chrisbianca

database/index.ts

@@ -1,14 +1,9 @@
+export { useList, useListKeys, useListVals } from './useList';
+export { useObject, useObjectVal } from './useObject';
 export {
-  useList,
-  useListKeys,
-  useListVals,
   ListHook,
   ListKeysHook,
   ListValsHook,
-} from './useList';
-export {
-  useObject,
-  useObjectVal,
   ObjectHook,
   ObjectValHook,
-} from './useObject';
+} from './types';

database/types.ts

@@ -0,0 +1,29 @@
+import firebase from 'firebase/app';
+import { LoadingHook } from '../util';
+
+export type Val<
+  T,
+  KeyField extends string = '',
+  RefField extends string = ''
+> = T & Record<KeyField, string> & Record<RefField, string>;
+
+export type ObjectHook = LoadingHook<
+  firebase.database.DataSnapshot,
+  firebase.FirebaseError
+>;
+export type ObjectValHook<
+  T,
+  KeyField extends string = '',
+  RefField extends string = ''
+> = LoadingHook<Val<T, KeyField, RefField>, firebase.FirebaseError>;
+
+export type ListHook = LoadingHook<
+  firebase.database.DataSnapshot[],
+  firebase.FirebaseError
+>;
+export type ListKeysHook = LoadingHook<string[], firebase.FirebaseError>;
+export type ListValsHook<
+  T,
+  KeyField extends string = '',
+  RefField extends string = ''
+> = LoadingHook<Val<T, KeyField, RefField>[], firebase.FirebaseError>;

database/useList.ts

@@ -2,14 +2,8 @@ import firebase from 'firebase/app';
 import { useEffect, useMemo } from 'react';
 import { snapshotToData, ValOptions } from './helpers';
 import useListReducer from './helpers/useListReducer';
-import { LoadingHook, useIsEqualRef } from '../util';
-
-export type ListHook = LoadingHook<
-  firebase.database.DataSnapshot[],
-  firebase.FirebaseError
->;
-export type ListKeysHook = LoadingHook<string[], firebase.FirebaseError>;
-export type ListValsHook<T> = LoadingHook<T[], firebase.FirebaseError>;
+import { ListHook, ListKeysHook, ListValsHook, Val } from './types';
+import { useIsEqualRef } from '../util';
 
 export const useList = (query?: firebase.database.Query | null): ListHook => {
   const [state, dispatch] = useListReducer();
@@ -129,23 +123,31 @@ export const useListKeys = (
   return useMemo(() => resArray, resArray);
 };
 
-export const useListVals = <T>(
+export const useListVals = <
+  T,
+  KeyField extends string = '',
+  RefField extends string = ''
+>(
   query?: firebase.database.Query | null,
-  options?: ValOptions,
-): ListValsHook<T> => {
+  options?: ValOptions
+): ListValsHook<T, KeyField, RefField> => {
   const keyField = options ? options.keyField : undefined;
   const refField = options ? options.refField : undefined;
   const [snapshots, loading, error] = useList(query);
   const values = useMemo(
     () =>
-      snapshots
+      (snapshots
         ? snapshots.map((snapshot) =>
             snapshotToData(snapshot, keyField, refField)
           )
-        : undefined,
+        : undefined) as Val<T, KeyField, RefField>[],
     [snapshots, keyField, refField]
   );
 
-  const resArray: ListValsHook<T> = [values, loading, error];
+  const resArray: ListValsHook<T, KeyField, RefField> = [
+    values,
+    loading,
+    error,
+  ];
   return useMemo(() => resArray, resArray);
 };

database/useObject.ts

@@ -1,13 +1,8 @@
 import firebase from 'firebase/app';
 import { useEffect, useMemo } from 'react';
 import { snapshotToData, ValOptions } from './helpers';
-import { LoadingHook, useIsEqualRef, useLoadingValue } from '../util';
-
-export type ObjectHook = LoadingHook<
-  firebase.database.DataSnapshot,
-  firebase.FirebaseError
->;
-export type ObjectValHook<T> = LoadingHook<T, firebase.FirebaseError>;
+import { ObjectHook, ObjectValHook, Val } from './types';
+import { useIsEqualRef, useLoadingValue } from '../util';
 
 export const useObject = (
   query?: firebase.database.Query | null
@@ -36,18 +31,29 @@ export const useObject = (
   return useMemo(() => resArray, resArray);
 };
 
-export const useObjectVal = <T>(
+export const useObjectVal = <
+  T,
+  KeyField extends string = '',
+  RefField extends string = ''
+>(
   query?: firebase.database.Query | null,
   options?: ValOptions
-): ObjectValHook<T> => {
+): ObjectValHook<T, KeyField, RefField> => {
   const keyField = options ? options.keyField : undefined;
   const refField = options ? options.refField : undefined;
   const [snapshot, loading, error] = useObject(query);
   const value = useMemo(
-    () => (snapshot ? snapshotToData(snapshot, keyField, refField) : undefined),
+    () =>
+      (snapshot
+        ? snapshotToData(snapshot, keyField, refField)
+        : undefined) as Val<T, KeyField, RefField>,
     [snapshot, keyField, refField]
   );
 
-  const resArray: ObjectValHook<T> = [value, loading, error];
+  const resArray: ObjectValHook<T, KeyField, RefField> = [
+    value,
+    loading,
+    error,
+  ];
   return useMemo(() => resArray, resArray);
 };