refactor: organize per-product

now that we understand the api better,
I'm breaking the components and hooks into
per-product folders so that they're easier to read/test/maintain

Author: jhuleatt

reactfire/auth/auth.test.tsx

@@ -0,0 +1,70 @@
+import { cleanup, render } from '@testing-library/react';
+import { auth } from 'firebase/app';
+import 'jest-dom/extend-expect';
+import * as React from 'react';
+import { AuthCheck } from '.';
+import { FirebaseAppProvider } from '..';
+
+const mockAuth = jest.fn(() => {
+  return {
+    onIdTokenChanged: jest.fn()
+  };
+});
+
+const mockFirebase = {
+  auth: mockAuth
+};
+
+const Provider = ({ children }) => (
+  <FirebaseAppProvider firebaseApp={mockFirebase}>
+    {children}
+  </FirebaseAppProvider>
+);
+
+describe('AuthCheck', () => {
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+  });
+
+  it('can find firebase Auth from Context', () => {
+    expect(() =>
+      render(
+        <Provider>
+          <React.Suspense fallback={'loading'}>
+            <AuthCheck fallback={'loading'}>{'children'}</AuthCheck>
+          </React.Suspense>
+        </Provider>
+      )
+    ).not.toThrow();
+  });
+
+  it('can use firebase Auth from props', () => {
+    expect(() =>
+      render(
+        <React.Suspense fallback={'loading'}>
+          <AuthCheck
+            fallback={<h1>not signed in</h1>}
+            auth={(mockFirebase.auth() as unknown) as auth.Auth}
+          >
+            {'signed in'}
+          </AuthCheck>
+        </React.Suspense>
+      )
+    ).not.toThrow();
+  });
+
+  test.todo('renders the fallback if a user is not signed in');
+
+  test.todo('renders children if a user is logged in');
+
+  test.todo('checks requiredClaims');
+});
+
+describe('useUser', () => {
+  test.todo('can find firebase.auth() from Context');
+
+  test.todo('throws an error if firebase.auth() is not available');
+
+  test.todo('returns the same value as firebase.auth().currentUser()');
+});

reactfire/components.tsx reactfire/auth/index.tsxreactfire/components.tsx renamed to reactfire/auth/index.tsx

@@ -1,16 +1,9 @@
+import { auth, User } from 'firebase/app';
 import * as React from 'react';
-import { auth, performance, User } from 'firebase/app';
-import { useUser, useFirebaseApp } from './index';
-const { Suspense, useState, useLayoutEffect } = React;
+import { user } from 'rxfire/auth';
+import { useObservable, useFirebaseApp, ReactFireOptions } from '..';
 
-export interface SuspensePerfProps {
-  children: React.ReactNode;
-  traceId: string;
-  fallback: React.ReactNode;
-  firePerf?: performance.Performance; // TODO(jeff): Add firePerf here when it's available
-}
-
-function getPerfFromContext(): performance.Performance {
+function getAuthFromContext(): auth.Auth {
   const firebaseApp = useFirebaseApp();
 
   if (!firebaseApp) {
@@ -19,39 +12,34 @@ function getPerfFromContext(): performance.Performance {
     );
   }
 
-  const perfFunc = firebaseApp.performance;
+  const authFunc = firebaseApp.auth;
 
-  if (!perfFunc || !perfFunc()) {
+  if (!authFunc || !authFunc()) {
     throw new Error(
-      "No perf object off of Firebase. Did you forget to import 'firebase/performance' in a component?"
+      "No auth object off of Firebase. Did you forget to import 'firebase/auth' in a component?"
     );
   }
 
-  return perfFunc();
+  return authFunc();
 }
 
-export function SuspenseWithPerf({
-  children,
-  traceId,
-  fallback,
-  firePerf
-}: SuspensePerfProps) {
-  firePerf = firePerf || getPerfFromContext();
-  const trace = React.useMemo(() => firePerf.trace(traceId), [traceId]);
-
-  const Fallback = () => {
-    useLayoutEffect(() => {
-      trace.start();
-
-      return () => {
-        trace.stop();
-      };
-    }, []);
-
-    return <>{fallback}</>;
-  };
-
-  return <Suspense fallback={<Fallback />}>{children}</Suspense>;
+/**
+ * Subscribe to Firebase auth state changes, including token refresh
+ *
+ * @param auth - the [firebase.auth](https://firebase.google.com/docs/reference/js/firebase.auth) object
+ * @param options
+ */
+export function useUser<T = unknown>(
+  auth?: auth.Auth,
+  options?: ReactFireOptions<T>
+): User | T {
+  auth = auth || getAuthFromContext();
+
+  return useObservable(
+    user(auth),
+    'user',
+    options ? options.startWithValue : undefined
+  );
 }
 
 export interface AuthCheckProps {
@@ -69,7 +57,7 @@ export function AuthCheck({
 }: AuthCheckProps): React.ReactNode {
   const user = useUser<User>(auth);
 
-  useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     // TODO(jeff) see if this actually works
     if (requiredClaims) {
       throw user.getIdTokenResult().then(idTokenResult => {

reactfire/database/database.test.tsx

@@ -0,0 +1,11 @@
+import 'jest-dom/extend-expect';
+
+describe('Realtime Database (RTDB)', () => {
+  describe('useDatabaseObject', () => {
+    test.todo("returns the same value as ref.on('value')");
+  });
+
+  describe('useDatabaseList', () => {
+    test.todo("returns the same value as ref.on('value')");
+  });
+});

reactfire/database/index.tsx

@@ -0,0 +1,37 @@
+import { database } from 'firebase/app';
+import { list, object, QueryChange } from 'rxfire/database';
+import { ReactFireOptions, useObservable } from '..';
+
+/**
+ * Subscribe to a Realtime Database object
+ *
+ * @param ref - Reference to the DB object you want to listen to
+ * @param options
+ */
+export function useDatabaseObject<T = unknown>(
+  ref: database.Reference,
+  options?: ReactFireOptions<T>
+): QueryChange | T {
+  return useObservable(
+    object(ref),
+    ref.toString(),
+    options ? options.startWithValue : undefined
+  );
+}
+
+/**
+ * Subscribe to a Realtime Database list
+ *
+ * @param ref - Reference to the DB List you want to listen to
+ * @param options
+ */
+export function useDatabaseList<T = { [key: string]: unknown }>(
+  ref: database.Reference | database.Query,
+  options?: ReactFireOptions<T[]>
+): QueryChange[] | T[] {
+  return useObservable(
+    list(ref),
+    ref.toString(),
+    options ? options.startWithValue : undefined
+  );
+}

reactfire/firebaseContext.test.tsx …actfire/firebaseApp/firebaseApp.test.tsxreactfire/firebaseContext.test.tsx renamed to reactfire/firebaseApp/firebaseApp.test.tsx reactfire/firebaseContext.test.tsx renamed to reactfire/firebaseApp/firebaseApp.test.tsx

@@ -1,10 +1,10 @@
-import { renderHook, act } from '@testing-library/react-hooks';
-import { render, cleanup } from '@testing-library/react';
-import * as React from 'react';
+import { cleanup, render } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import * as firebase from 'firebase/app';
 import 'jest-dom/extend-expect';
+import * as React from 'react';
+import { useFirebaseApp } from '.';
 import { FirebaseAppProvider } from './index';
-import * as firebase from 'firebase/app';
-import { useFirebaseApp } from './firebaseContext';
 
 afterEach(cleanup);
 

reactfire/firebaseContext.tsx reactfire/firebaseApp/index.tsxreactfire/firebaseContext.tsx renamed to reactfire/firebaseApp/index.tsx

@@ -0,0 +1,13 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import * as React from 'react';
+import 'jest-dom/extend-expect';
+
+describe('Firestore', () => {
+  describe('useFirestoreDoc', () => {
+    test.todo('returns the same value as ref.onSnapshot()');
+  });
+
+  describe('useFirestoreCollection', () => {
+    test.todo('returns the same value as ref.onSnapshot()');
+  });
+});

reactfire/firestore/firestore.test.tsx

@@ -0,0 +1,37 @@
+import { firestore } from 'firebase/app';
+import { doc, fromCollectionRef } from 'rxfire/firestore';
+import { ReactFireOptions, useObservable } from '..';
+
+/**
+ * Suscribe to Firestore Document changes
+ *
+ * @param ref - Reference to the document you want to listen to
+ * @param options
+ */
+export function useFirestoreDoc<T = unknown>(
+  ref: firestore.DocumentReference,
+  options?: ReactFireOptions<T>
+): firestore.DocumentSnapshot | T {
+  return useObservable(
+    doc(ref),
+    ref.path,
+    options ? options.startWithValue : undefined
+  );
+}
+
+/**
+ * Subscribe to a Firestore collection
+ *
+ * @param ref - Reference to the collection you want to listen to
+ * @param options
+ */
+export function useFirestoreCollection<T = { [key: string]: unknown }>(
+  ref: firestore.CollectionReference,
+  options?: ReactFireOptions<T[]>
+): firestore.QuerySnapshot | T[] {
+  return useObservable(
+    fromCollectionRef(ref),
+    ref.path,
+    options ? options.startWithValue : undefined
+  );
+}