useAnalytics missing in ReactFire v4 #429

docs/use.md

@@ -424,32 +424,35 @@ function App() {
 ## Log Page Views to Google Analytics for Firebase with React Router
 
 ```jsx
-import { useAnalytics } from 'reactfire';
+import { AnalyticsProvider, useAnalytics } from 'reactfire';
 import { Router, Route, Switch } from 'react-router';
+import { getAnalytics, logEvent } from 'firebase/analytics'
 
 function MyPageViewLogger({ location }) {
   const analytics = useAnalytics();
 
   // By passing `location.pathname` to the second argument of `useEffect`,
   // we only log on first render and when the `pathname` changes
   useEffect(() => {
-    analytics.logEvent('page-view', { path_name: location.pathname });
+    logEvent(analytics, 'page_view');
   }, [location.pathname]);
 
   return null;
 }
 
 function App() {
-  const analytics = useAnalytics();
+  const app = useFirebaseApp()
 
   return (
-    <Router>
-      <Switch>
-        <Route exact path="/about" component={<AboutPage />} />
-        <Route component={<NotFoundPage />} />
-      </Switch>
-      <MyPageViewLogger />
-    </Router>
+    <AnalyticsProvider sdk={getAnalytics(app)}>
+      <Router>
+        <Switch>
+          <Route exact path="/about" component={<AboutPage />} />
+          <Route component={<NotFoundPage />} />
+        </Switch>
+        <MyPageViewLogger />
+      </Router>
+    </AnalyticsProvider>
   );
 }
 ```

example/withoutSuspense/Analytics.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { AnalyticsProvider, useFirebaseApp, useAnalytics } from 'reactfire';
+import { getAnalytics, logEvent } from 'firebase/analytics'
+
+
+function MyPageViewLogger() {
+  const analytics = useAnalytics()
+
+  React.useEffect(() => {
+      logEvent(analytics, 'page_view')
+    }, [location.pathname])
+
+  return null
+}
+
+export function Analytics() {
+  const app = useFirebaseApp();
+  return (
+      <AnalyticsProvider sdk={getAnalytics(app)}>
+        <MyPageViewLogger />
+      </AnalyticsProvider>
+  );
+}

example/withoutSuspense/App.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AuthProvider, useFirebaseApp, useInitPerformance } from 'reactfire';
 import { Card } from '../display/Card';
+import { Analytics } from './Analytics'
 import { Auth } from './Auth';
 import { Firestore } from './Firestore';
 import { RealtimeDatabase } from './RealtimeDatabase';
@@ -39,6 +40,7 @@ export const App = () => {
           <Storage />
         </Card>
       </AuthProvider>
+      <Analytics />
     </div>
   );
 };

src/sdk.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import type { Auth } from 'firebase/auth';
+import type { Analytics } from 'firebase/analytics';
 import type { Database } from 'firebase/database';
 import type { Firestore } from 'firebase/firestore';
 import type { FirebasePerformance } from 'firebase/performance';
@@ -13,13 +14,14 @@ import { from } from 'rxjs';
 import { ReactFireOptions } from '.';
 
 const AuthSdkContext = React.createContext<Auth | undefined>(undefined);
+const AnalyticsSdkContext = React.createContext<Analytics | undefined>(undefined);
 const DatabaseSdkContext = React.createContext<Database | undefined>(undefined);
 const FirestoreSdkContext = React.createContext<Firestore | undefined>(undefined);
 const StorageSdkContext = React.createContext<FirebaseStorage | undefined>(undefined);
 const PerformanceSdkContext = React.createContext<FirebasePerformance | undefined>(undefined);
 const RemoteConfigSdkContext = React.createContext<RemoteConfig | undefined>(undefined);
 
-type FirebaseSdks = Auth | Database | Firestore | FirebasePerformance | FirebaseStorage | RemoteConfig;
+type FirebaseSdks = Auth | Analytics | Database | Firestore | FirebasePerformance | FirebaseStorage | RemoteConfig;
 
 function getSdkProvider<Sdk extends FirebaseSdks>(SdkContext: React.Context<Sdk | undefined>) {
   return function SdkProvider(props: React.PropsWithChildren<{ sdk: Sdk }>) {
@@ -80,13 +82,15 @@ function useInitSdk<Sdk extends FirebaseSdks>(
 }
 
 export const AuthProvider = getSdkProvider<Auth>(AuthSdkContext);
+export const AnalyticsProvider = getSdkProvider<Analytics>(AnalyticsSdkContext);
 export const DatabaseProvider = getSdkProvider<Database>(DatabaseSdkContext);
 export const FirestoreProvider = getSdkProvider<Firestore>(FirestoreSdkContext);
 export const PerformanceProvider = getSdkProvider<FirebasePerformance>(PerformanceSdkContext);
 export const StorageProvider = getSdkProvider<FirebaseStorage>(StorageSdkContext);
 export const RemoteConfigProvider = getSdkProvider<RemoteConfig>(RemoteConfigSdkContext);
 
 export const useAuth = () => useSdk<Auth>(AuthSdkContext);
+export const useAnalytics = () => useSdk<Analytics>(AnalyticsSdkContext);
 export const useDatabase = () => useSdk<Database>(DatabaseSdkContext);
 export const useFirestore = () => useSdk<Firestore>(FirestoreSdkContext);
 export const usePerformance = () => useSdk<FirebasePerformance>(PerformanceSdkContext);
@@ -99,6 +103,7 @@ type InitSdkHook<Sdk extends FirebaseSdks> = (
 ) => ObservableStatus<Sdk>;
 
 export const useInitAuth: InitSdkHook<Auth> = (initializer, options) => useInitSdk<Auth>('auth', AuthSdkContext, initializer, options);
+export const useInitAnalytics: InitSdkHook<Analytics> = (initializer, options) => useInitSdk<Analytics>('analytics', AnalyticsSdkContext, initializer, options);
 export const useInitDatabase: InitSdkHook<Database> = (initializer, options) => useInitSdk<Database>('database', DatabaseSdkContext, initializer, options);
 export const useInitFirestore: InitSdkHook<Firestore> = (initializer, options) => useInitSdk<Firestore>('firestore', FirestoreSdkContext, initializer, options);
 export const useInitPerformance: InitSdkHook<FirebasePerformance> = (initializer, options) =>