From 61cb637604dcbcb46343bfff0593b60f712300b5 Mon Sep 17 00:00:00 2001
From: stdavis <stdavis@utah.gov>
Date: Mon, 16 Dec 2024 13:17:34 -0700
Subject: [PATCH] feat: integrate UtahID sign in

ref #9
---
 .vscode/settings.json                         |  1 +
 src/App.tsx                                   | 99 ++++++++++---------
 src/components/BackupSchedule.tsx             |  4 +-
 src/components/contexts/AnalyticsProvider.tsx | 35 -------
 .../contexts/FirebaseAppProvider.tsx          | 49 ---------
 src/components/contexts/index.ts              |  2 -
 src/components/hooks/index.ts                 |  0
 src/contexts/FirebaseFunctionsProvider.tsx    | 39 ++++++++
 src/contexts/FirestoreProvider.tsx            | 39 ++++++++
 src/main.tsx                                  | 43 ++++++--
 10 files changed, 172 insertions(+), 139 deletions(-)
 delete mode 100644 src/components/contexts/AnalyticsProvider.tsx
 delete mode 100644 src/components/contexts/FirebaseAppProvider.tsx
 delete mode 100644 src/components/contexts/index.ts
 delete mode 100644 src/components/hooks/index.ts
 create mode 100644 src/contexts/FirebaseFunctionsProvider.tsx
 create mode 100644 src/contexts/FirestoreProvider.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 487570e..37a8470 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -13,6 +13,7 @@
     "orgid",
     "prebuild",
     "tanstack",
+    "utahid",
     "venv",
     "VITE"
   ],
diff --git a/src/App.tsx b/src/App.tsx
index c0e10f9..5ada83f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,14 +1,13 @@
 import { useQuery } from '@tanstack/react-query';
-import { Drawer, Footer, Header, SocialMedia, UgrcLogo } from '@ugrc/utah-design-system';
+import { Drawer, Footer, Header, SocialMedia, UgrcLogo, useFirebaseAuth, UtahIdLogin } from '@ugrc/utah-design-system';
 import { collection, getDocs } from 'firebase/firestore';
-import PropTypes from 'prop-types';
 import { useState } from 'react';
 import { useOverlayTrigger } from 'react-aria';
 import { useOverlayTriggerState } from 'react-stately';
 import { BackupItem } from './components/BackupItem';
 import { BackupSchedule } from './components/BackupSchedule';
-import { useFirebaseApp } from './components/contexts';
 import { MoonwalkBackup } from './components/types';
+import { useFirestore } from './contexts/FirestoreProvider';
 
 const version = import.meta.env.PACKAGE_VERSION;
 
@@ -21,10 +20,6 @@ const ErrorFallback = ({ error }: { error: Error }) => {
   );
 };
 
-ErrorFallback.propTypes = {
-  error: PropTypes.object,
-};
-
 const links = [
   {
     key: 'UGRC Homepage',
@@ -61,8 +56,11 @@ export default function App() {
   );
   const [selected, setSelected] = useState<MoonwalkBackup | undefined>();
 
-  const { firestore } = useFirebaseApp();
+  const { firestore } = useFirestore();
+  const { currentUser, logout } = useFirebaseAuth();
   const getMoonwalkData = async () => {
+    if (!firestore) return;
+
     const snapshot = await getDocs(collection(firestore, 'items'));
 
     return snapshot.docs.map((doc) => {
@@ -81,7 +79,7 @@ export default function App() {
   return (
     <>
       <main className="flex h-screen flex-col md:gap-2">
-        <Header links={links}>
+        <Header links={links} currentUser={currentUser} logout={logout}>
           <div className="flex h-full grow items-center gap-3">
             <UgrcLogo />
             <h2 className="font-heading text-3xl font-black text-zinc-600 sm:text-5xl dark:text-zinc-100">
@@ -89,45 +87,56 @@ export default function App() {
             </h2>
           </div>
         </Header>
-        <section className="relative flex min-h-0 flex-1 overflow-x-hidden md:mr-2">
-          <Drawer main state={sideBarState} {...sideBarTriggerProps}>
-            <div className="mx-2 mb-2 grid grid-cols-1 gap-2">
-              <h2 className="text-xl font-bold">Available restore points</h2>
-              <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
-                {selected && <BackupSchedule item={selected} />}
+        {currentUser ? (
+          <section className="relative flex min-h-0 flex-1 overflow-x-hidden md:mr-2">
+            <Drawer main state={sideBarState} {...sideBarTriggerProps}>
+              <div className="mx-2 mb-2 grid grid-cols-1 gap-2">
+                <h2 className="text-xl font-bold">Available restore points</h2>
+                <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
+                  {selected && <BackupSchedule item={selected} />}
+                </div>
               </div>
+            </Drawer>
+            <div className="relative flex flex-1 flex-col rounded border border-b-0 border-zinc-200 dark:border-0 dark:border-zinc-700">
+              <div className="relative flex-1 space-y-2 overflow-y-scroll px-2 py-1.5 dark:rounded">
+                {!isPending &&
+                  data?.map((item: MoonwalkBackup, i) => (
+                    <BackupItem
+                      key={i}
+                      moonwalk={item}
+                      select={(item) => {
+                        setSelected(item);
+                        sideBarState.open();
+                      }}
+                    />
+                  ))}
+                {error && <ErrorFallback error={error} />}
+                <Drawer
+                  type="tray"
+                  className="shadow-inner dark:shadow-white/20"
+                  allowFullScreen
+                  state={trayState}
+                  {...trayTriggerProps}
+                >
+                  <section className="grid gap-2 px-7 pt-2">
+                    <h2 className="text-center">What&#39;s here?</h2>
+                    Features: 25,001
+                  </section>
+                </Drawer>
+              </div>
+              <SocialMedia />
             </div>
-          </Drawer>
-          <div className="relative flex flex-1 flex-col rounded border border-b-0 border-zinc-200 dark:border-0 dark:border-zinc-700">
-            <div className="relative flex-1 space-y-2 overflow-y-scroll px-2 py-1.5 dark:rounded">
-              {!isPending &&
-                data?.map((item: MoonwalkBackup, i) => (
-                  <BackupItem
-                    key={i}
-                    moonwalk={item}
-                    select={(item) => {
-                      setSelected(item);
-                      sideBarState.open();
-                    }}
-                  />
-                ))}
-              {error && <ErrorFallback error={error} />}
-              <Drawer
-                type="tray"
-                className="shadow-inner dark:shadow-white/20"
-                allowFullScreen
-                state={trayState}
-                {...trayTriggerProps}
-              >
-                <section className="grid gap-2 px-7 pt-2">
-                  <h2 className="text-center">What&#39;s here?</h2>
-                  Features: 25,001
-                </section>
-              </Drawer>
+          </section>
+        ) : (
+          <section className="flex flex-1 items-center justify-center">
+            <div className="flex flex-col items-center gap-4">
+              <h2 className="text-center text-2xl font-bold">Please log in to use the application</h2>
+              <div>
+                <UtahIdLogin />
+              </div>
             </div>
-            <SocialMedia />
-          </div>
-        </section>
+          </section>
+        )}
       </main>
       <Footer />
     </>
diff --git a/src/components/BackupSchedule.tsx b/src/components/BackupSchedule.tsx
index 6e5ceb9..03a7471 100644
--- a/src/components/BackupSchedule.tsx
+++ b/src/components/BackupSchedule.tsx
@@ -1,11 +1,11 @@
 import { useMutation } from '@tanstack/react-query';
 import { Button } from '@ugrc/utah-design-system';
 import { httpsCallable } from 'firebase/functions';
-import { useFirebaseApp } from './contexts';
+import { useFirebaseFunctions } from '../contexts/FirebaseFunctionsProvider';
 import { MoonwalkBackup, Version } from './types';
 
 export const BackupSchedule = ({ item }: { item: MoonwalkBackup }) => {
-  const { functions } = useFirebaseApp();
+  const { functions } = useFirebaseFunctions();
   const restore = httpsCallable(functions, 'restore');
   const restoreMutation = async (version: Version): Promise<string> => {
     const result = await restore({ item_id: item.itemId, category: version.category, generation: version.generation });
diff --git a/src/components/contexts/AnalyticsProvider.tsx b/src/components/contexts/AnalyticsProvider.tsx
deleted file mode 100644
index 87dbda8..0000000
--- a/src/components/contexts/AnalyticsProvider.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { logEvent as firebaseLogEvent, getAnalytics } from 'firebase/analytics';
-import PropTypes from 'prop-types';
-import { createContext, ReactNode, useContext } from 'react';
-import { useFirebaseApp } from './FirebaseAppProvider';
-
-const AnalyticsSdkContext = createContext<((event: string, eventParams?: object) => void) | null>(null);
-
-type AnalyticsProviderProps = {
-  children: ReactNode;
-};
-
-export function AnalyticsProvider(props: AnalyticsProviderProps) {
-  const { app } = useFirebaseApp();
-  const sdk = getAnalytics(app);
-
-  // is this causing unnecessary re-renders?
-  const logEvent = (event: string, eventParams?: object) => {
-    firebaseLogEvent(sdk, event, eventParams);
-  };
-
-  return <AnalyticsSdkContext.Provider value={logEvent} {...props} />;
-}
-AnalyticsProvider.propTypes = {
-  sdk: PropTypes.object,
-};
-
-export function useAnalytics() {
-  const value = useContext(AnalyticsSdkContext);
-
-  if (value === null) {
-    throw new Error('useAnalytics must be used within a AnalyticsProvider');
-  }
-
-  return value;
-}
diff --git a/src/components/contexts/FirebaseAppProvider.tsx b/src/components/contexts/FirebaseAppProvider.tsx
deleted file mode 100644
index b8a32c3..0000000
--- a/src/components/contexts/FirebaseAppProvider.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { FirebaseApp, FirebaseOptions, initializeApp, registerVersion } from 'firebase/app';
-import { connectFirestoreEmulator, Firestore, getFirestore } from 'firebase/firestore';
-import { connectFunctionsEmulator, Functions, getFunctions } from 'firebase/functions';
-import { createContext, ReactNode, useContext, useMemo, version } from 'react';
-
-const DEFAULT_APP_NAME = '[DEFAULT]';
-const FirebaseAppContext = createContext<{
-  app: FirebaseApp;
-  firestore: Firestore;
-  functions: Functions;
-} | null>(null);
-
-const appVersion = import.meta.env.PACKAGE_VERSION;
-
-type FirebaseProviderProps = {
-  firebaseConfig: FirebaseOptions;
-  children: ReactNode;
-};
-
-export function FirebaseAppProvider(props: FirebaseProviderProps) {
-  const { firebaseConfig } = props;
-  const value = useMemo(() => {
-    registerVersion('react', version || 'unknown');
-    registerVersion('app', appVersion || 'unknown');
-
-    const app = initializeApp(firebaseConfig, DEFAULT_APP_NAME);
-    const firestore = getFirestore(app);
-    const functions = getFunctions(app);
-
-    console.log('import.meta.env.DEV', import.meta.env.DEV);
-    if (import.meta.env.DEV) {
-      connectFirestoreEmulator(firestore, 'localhost', 8080);
-      connectFunctionsEmulator(functions, 'localhost', 5001);
-    }
-
-    return { app, firestore, functions };
-  }, [firebaseConfig]);
-
-  return <FirebaseAppContext.Provider value={value} {...props} />;
-}
-
-export function useFirebaseApp() {
-  const firebaseApp = useContext(FirebaseAppContext);
-  if (!firebaseApp) {
-    throw new Error('Cannot call useFirebaseApp unless your component is within a FirebaseAppProvider');
-  }
-
-  return firebaseApp;
-}
diff --git a/src/components/contexts/index.ts b/src/components/contexts/index.ts
deleted file mode 100644
index b17e6d7..0000000
--- a/src/components/contexts/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './AnalyticsProvider';
-export * from './FirebaseAppProvider';
diff --git a/src/components/hooks/index.ts b/src/components/hooks/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/contexts/FirebaseFunctionsProvider.tsx b/src/contexts/FirebaseFunctionsProvider.tsx
new file mode 100644
index 0000000..89d6131
--- /dev/null
+++ b/src/contexts/FirebaseFunctionsProvider.tsx
@@ -0,0 +1,39 @@
+import { useFirebaseApp } from '@ugrc/utah-design-system';
+import { connectFunctionsEmulator, Functions, getFunctions } from 'firebase/functions';
+import { createContext, type ReactNode, useContext } from 'react';
+
+type FunctionsContextValue = {
+  functions: Functions;
+};
+
+type FunctionsProviderProps = {
+  children: ReactNode;
+};
+
+const FunctionsContext = createContext<FunctionsContextValue | null>(null);
+
+export const FirebaseFunctionsProvider = (props: FunctionsProviderProps) => {
+  const app = useFirebaseApp();
+  const sdk = getFunctions(app);
+
+  if (import.meta.env.DEV) {
+    console.log('Connecting to Firebase Functions emulator');
+    connectFunctionsEmulator(sdk, 'localhost', 5001);
+  }
+
+  if (!app) {
+    throw new Error('You cannot use the FirebaseFunctionsProvider outside of a <FirebaseAppProvider />');
+  }
+
+  return <FunctionsContext.Provider value={{ functions: sdk }} {...props} />;
+};
+
+export const useFirebaseFunctions = () => {
+  const value = useContext(FunctionsContext);
+
+  if (value === null) {
+    throw new Error('useFirebaseFunctions must be used within a FirebaseFunctionsProvider');
+  }
+
+  return value;
+};
diff --git a/src/contexts/FirestoreProvider.tsx b/src/contexts/FirestoreProvider.tsx
new file mode 100644
index 0000000..0667c5d
--- /dev/null
+++ b/src/contexts/FirestoreProvider.tsx
@@ -0,0 +1,39 @@
+import { useFirebaseApp } from '@ugrc/utah-design-system';
+import { connectFirestoreEmulator, Firestore, getFirestore } from 'firebase/firestore';
+import { createContext, type ReactNode, useContext } from 'react';
+
+type StoreContextValue = {
+  firestore: Firestore;
+};
+
+type FirestoreProviderProps = {
+  children: ReactNode;
+};
+
+const FirestoreContext = createContext<StoreContextValue | null>(null);
+
+export const FirestoreProvider = (props: FirestoreProviderProps) => {
+  const app = useFirebaseApp();
+  const sdk = getFirestore(app);
+
+  if (import.meta.env.DEV) {
+    console.log('Connecting to Firestore emulator');
+    connectFirestoreEmulator(sdk, 'localhost', 8080);
+  }
+
+  if (!app) {
+    throw new Error('You cannot use the FirestoreProvider outside of a <FirebaseAppProvider />');
+  }
+
+  return <FirestoreContext.Provider value={{ firestore: sdk }} {...props} />;
+};
+
+export const useFirestore = () => {
+  const value = useContext(FirestoreContext);
+
+  if (value === null) {
+    throw new Error('useFirestore must be used within a FirestoreProvider');
+  }
+
+  return value;
+};
diff --git a/src/main.tsx b/src/main.tsx
index c785c6f..523665c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,8 +1,12 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { FirebaseAnalyticsProvider, FirebaseAppProvider, FirebaseAuthProvider } from '@ugrc/utah-design-system';
+import { OAuthProvider } from 'firebase/auth';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { ErrorBoundary } from 'react-error-boundary';
 import App from './App';
-import { FirebaseAppProvider } from './components/contexts';
+import { FirebaseFunctionsProvider } from './contexts/FirebaseFunctionsProvider';
+import { FirestoreProvider } from './contexts/FirestoreProvider';
 import './index.css';
 
 let firebaseConfig = {
@@ -15,18 +19,45 @@ let firebaseConfig = {
   measurementId: '',
 };
 
+const provider = new OAuthProvider('oidc.utahid');
+// provider.addScope('app:UGRCMoonwalk'); // request submitted to create this app in AP Admin
+
 if (import.meta.env.VITE_FIREBASE_CONFIG) {
   firebaseConfig = JSON.parse(import.meta.env.VITE_FIREBASE_CONFIG);
 }
 
+const MainErrorFallback = ({ error, resetErrorBoundary }: { error: Error; resetErrorBoundary: () => void }) => {
+  return (
+    <div className="static flex h-screen w-screen items-center justify-center">
+      <div className="flex-col items-center">
+        <h1>Something went wrong</h1>
+        <pre className="text-red-500">{error.message}</pre>
+        <button className="w-full rounded-full border p-1" onClick={resetErrorBoundary}>
+          Try again
+        </button>
+      </div>
+    </div>
+  );
+};
+
 const queryClient = new QueryClient();
 
 createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
-      <QueryClientProvider client={queryClient}>
-        <App />
-      </QueryClientProvider>
-    </FirebaseAppProvider>
+    <ErrorBoundary FallbackComponent={MainErrorFallback} onReset={() => window.location.reload()}>
+      <FirebaseAppProvider config={firebaseConfig}>
+        <FirebaseAuthProvider provider={provider}>
+          <FirebaseAnalyticsProvider>
+            <FirestoreProvider>
+              <FirebaseFunctionsProvider>
+                <QueryClientProvider client={queryClient}>
+                  <App />
+                </QueryClientProvider>
+              </FirebaseFunctionsProvider>
+            </FirestoreProvider>
+          </FirebaseAnalyticsProvider>
+        </FirebaseAuthProvider>
+      </FirebaseAppProvider>
+    </ErrorBoundary>
   </React.StrictMode>,
 );