promote dev

.vscode/settings.json

@@ -20,7 +20,6 @@
     "noreferrer",
     "packagejson",
     "padder",
-    "reactfire",
     "sgid",
     "sitla",
     "sortby",

package.json

@@ -86,37 +86,36 @@
     "@ugrc/dart-board": "^5.0.9",
     "@ugrc/layer-selector": "^6.2.4",
     "@ugrc/sherlock": "^4.0.6",
-    "@ugrc/utilities": "^2.2.1",
+    "@ugrc/utilities": "^2.2.2",
     "bootstrap": "^4.5.3",
-    "firebase": "^9.23.0",
+    "firebase": "^10.12.2",
     "ky": "^1.3.0",
     "lodash.debounce": "^4.0.8",
     "lodash.escaperegexp": "^4.1.2",
     "lodash.sortby": "^4.7.0",
     "lodash.uniqwith": "^4.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-fast-compare": "^3.2.2",
-    "reactfire": "^4.2.3",
     "reactstrap": "^9.2.2"
   },
   "devDependencies": {
     "@testing-library/cypress": "^10.0.2",
-    "@vitejs/plugin-react": "^4.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "cpy-cli": "^5.0.0",
-    "cypress": "^13.10.0",
+    "cypress": "^13.11.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.2",
     "prettier-plugin-organize-imports": "^3.2.4",
     "prettier-plugin-packagejson": "^2.5.0",
-    "vite": "^5.2.12",
+    "vite": "^5.2.13",
     "vite-plugin-package-version": "^1.1.0",
     "vitest": "^1.6.0",
     "wait-on": "^7.2.0"

src/App.jsx

@@ -1,18 +1,18 @@
 import { BootstrapDartboard as FindAddress } from '@ugrc/dart-board';
 import Sherlock, { WebApiProvider } from '@ugrc/sherlock';
-import { getAnalytics } from 'firebase/analytics';
+import { logEvent } from 'firebase/analytics';
 import PropTypes from 'prop-types';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { AnalyticsProvider, useFirebaseApp, useInitPerformance } from 'reactfire';
 import { Button, Card, Collapse } from 'reactstrap';
-
-import MapView from './components/esrijs/MapView';
-import Printer from './components/esrijs/Print';
 import Header from './components/Header/Header';
 import { IdentifyContainer, IdentifyInformation } from './components/Identify/Identify';
 import MapLens from './components/MapLens/MapLens';
 import Sidebar from './components/Sidebar/Sidebar';
+import MapView from './components/esrijs/MapView';
+import Printer from './components/esrijs/Print';
+import { useAnalytics } from './components/firebase/AnalyticsProvider';
+import { useFirebaseApp } from './components/firebase/FirebaseAppProvider';
 import config from './config';
 
 import '@ugrc/sherlock/src/Sherlock.css';
@@ -36,10 +36,15 @@ ErrorFallback.propTypes = {
 
 export default function App() {
   const app = useFirebaseApp();
-  useInitPerformance(async () => {
-    const { getPerformance } = await import('firebase/performance');
-    return getPerformance(app);
-  });
+  const analytics = useAnalytics();
+  useEffect(() => {
+    async function initPerformance() {
+      const { getPerformance } = await import('firebase/performance');
+
+      return getPerformance(app);
+    }
+    initPerformance();
+  }, [app]);
   const [zoomToGraphic, setZoomToGraphic] = useState({
     zoomToGraphic: {
       graphic: {},
@@ -59,7 +64,7 @@ export default function App() {
     //      The esri.Graphic(s) that you want to zoom to.
     // tags:
     //      private
-    console.log('sherlock:zoom');
+    logEvent(analytics, 'sherlock:zoom');
 
     // check for point feature
     setZoomToGraphic({
@@ -83,7 +88,7 @@ export default function App() {
     },
     events: {
       success: (graphic) => {
-        console.log('findAddress::success');
+        logEvent(analytics, 'findAddress::success');
         setZoomToGraphic({
           graphic: graphic,
           level: 18,
@@ -129,71 +134,69 @@ export default function App() {
   };
 
   return (
-    <AnalyticsProvider sdk={getAnalytics(app)}>
-      <div className="app">
-        <Header title="Atlas Utah" version={version} />
-        {showIdentify ? (
-          <ErrorBoundary FallbackComponent={ErrorFallback}>
-            <IdentifyContainer show={setShowIdentify}>
-              <IdentifyInformation apiKey={apiKey} location={mapClick} />
-            </IdentifyContainer>
-          </ErrorBoundary>
-        ) : null}
+    <div className="app">
+      <Header title="Atlas Utah" version={version} />
+      {showIdentify ? (
         <ErrorBoundary FallbackComponent={ErrorFallback}>
-          <Sidebar>
-            <div className="bg-light border text-center p-1">
-              <small>
-                Data and services provided by <a href="https://gis.utah.gov/">UGRC</a>.
-              </small>
-            </div>
-            <p>Click a location on the map for more information</p>
-            <h4>Find Address</h4>
-            <div id="geocodeNode">
-              <ErrorBoundary FallbackComponent={ErrorFallback}>
-                <FindAddress {...findAddressOptions} />
-              </ErrorBoundary>
-            </div>
-            <ErrorBoundary FallbackComponent={ErrorFallback}>
-              <div className="mt-3">
-                <Sherlock {...gnisSherlock}></Sherlock>
-              </div>
-            </ErrorBoundary>
+          <IdentifyContainer show={setShowIdentify}>
+            <IdentifyInformation apiKey={apiKey} location={mapClick} />
+          </IdentifyContainer>
+        </ErrorBoundary>
+      ) : null}
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <Sidebar>
+          <div className="bg-light border text-center p-1">
+            <small>
+              Data and services provided by <a href="https://gis.utah.gov/">UGRC</a>.
+            </small>
+          </div>
+          <p>Click a location on the map for more information</p>
+          <h4>Find Address</h4>
+          <div id="geocodeNode">
             <ErrorBoundary FallbackComponent={ErrorFallback}>
-              <div className="mt-3">
-                <Sherlock {...citySherlock}></Sherlock>
-              </div>
+              <FindAddress {...findAddressOptions} />
             </ErrorBoundary>
-            <Card style={{ marginTop: '1em' }}>
-              <Button block onClick={() => setShowPrint(!showPrint)}>
-                Export Map
-              </Button>
-              <Collapse isOpen={showPrint}>{showPrint ? <Printer view={mapView}></Printer> : null}</Collapse>
-            </Card>
-            <div style={{ marginTop: '1em', border: '#aaa 1px dashed' }}>
-              <small>
-                <ul className="list-group list-group-flush">
-                  <li className="list-group-item">
-                    This web application is a <a href="https://github.com/agrc/atlas">GitHub template</a> that you can
-                    use to create your own website.
-                  </li>
-                  <li className="list-group-item">
-                    Submit any application or data <a href="https://github.com/agrc/atlas/issues/new/choose">issues</a>{' '}
-                    via GitHub issues.
-                  </li>
-                  <li className="list-group-item">
-                    Reach out to us on <a href="https://x.com/MapUtah">X</a> if you want to chat.
-                  </li>
-                </ul>
-              </small>
+          </div>
+          <ErrorBoundary FallbackComponent={ErrorFallback}>
+            <div className="mt-3">
+              <Sherlock {...gnisSherlock}></Sherlock>
             </div>
-          </Sidebar>
-        </ErrorBoundary>
-        <MapLens {...sidebarOptions}>
+          </ErrorBoundary>
           <ErrorBoundary FallbackComponent={ErrorFallback}>
-            <MapView {...mapOptions} />
+            <div className="mt-3">
+              <Sherlock {...citySherlock}></Sherlock>
+            </div>
           </ErrorBoundary>
-        </MapLens>
-      </div>
-    </AnalyticsProvider>
+          <Card style={{ marginTop: '1em' }}>
+            <Button block onClick={() => setShowPrint(!showPrint)}>
+              Export Map
+            </Button>
+            <Collapse isOpen={showPrint}>{showPrint ? <Printer view={mapView}></Printer> : null}</Collapse>
+          </Card>
+          <div style={{ marginTop: '1em', border: '#aaa 1px dashed' }}>
+            <small>
+              <ul className="list-group list-group-flush">
+                <li className="list-group-item">
+                  This web application is a <a href="https://github.com/agrc/atlas">GitHub template</a> that you can use
+                  to create your own website.
+                </li>
+                <li className="list-group-item">
+                  Submit any application or data <a href="https://github.com/agrc/atlas/issues/new/choose">issues</a>{' '}
+                  via GitHub issues.
+                </li>
+                <li className="list-group-item">
+                  Reach out to us on <a href="https://x.com/MapUtah">X</a> if you want to chat.
+                </li>
+              </ul>
+            </small>
+          </div>
+        </Sidebar>
+      </ErrorBoundary>
+      <MapLens {...sidebarOptions}>
+        <ErrorBoundary FallbackComponent={ErrorFallback}>
+          <MapView {...mapOptions} />
+        </ErrorBoundary>
+      </MapLens>
+    </div>
   );
 }

src/components/firebase/AnalyticsProvider.jsx

@@ -0,0 +1,25 @@
+import { getAnalytics } from 'firebase/analytics';
+import PropTypes from 'prop-types';
+import { createContext, useContext } from 'react';
+import { useFirebaseApp } from './FirebaseAppProvider.jsx';
+
+const AnalyticsSdkContext = createContext(undefined);
+
+export function AnalyticsProvider(props) {
+  const app = useFirebaseApp();
+
+  let { sdk } = props;
+
+  if (!sdk) {
+    sdk = getAnalytics(app);
+  }
+
+  return <AnalyticsSdkContext.Provider value={sdk} {...props} />;
+}
+AnalyticsProvider.propTypes = {
+  sdk: PropTypes.object,
+};
+
+export function useAnalytics() {
+  return useContext(AnalyticsSdkContext);
+}

src/components/firebase/FirebaseAppProvider.jsx

@@ -0,0 +1,35 @@
+import { initializeApp, registerVersion } from 'firebase/app';
+import PropTypes from 'prop-types';
+import { createContext, useContext, useMemo, version } from 'react';
+
+const DEFAULT_APP_NAME = '[DEFAULT]';
+const FirebaseAppContext = createContext(undefined);
+
+export function FirebaseAppProvider(props) {
+  const { firebaseConfig } = props;
+  const firebaseApp = useMemo(() => {
+    registerVersion('react', version || 'unknown');
+    // TODO! add app package.json version
+    // registerVersion('app', appVersion || 'unknown');
+
+    return initializeApp(firebaseConfig, DEFAULT_APP_NAME);
+  }, [firebaseConfig]);
+
+  return <FirebaseAppContext.Provider value={firebaseApp} {...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;
+}
+
+FirebaseAppProvider.propTypes = {
+  firebaseConfig: PropTypes.object.isRequired,
+  firebaseApp: PropTypes.object,
+  appName: PropTypes.string,
+  children: PropTypes.node,
+};

src/main.jsx

@@ -2,8 +2,9 @@ import '@arcgis/core/assets/esri/themes/light/main.css';
 import 'bootstrap/dist/css/bootstrap.css';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { FirebaseAppProvider } from 'reactfire';
 import App from './App.jsx';
+import { AnalyticsProvider } from './components/firebase/AnalyticsProvider.jsx';
+import { FirebaseAppProvider } from './components/firebase/FirebaseAppProvider.jsx';
 import './index.css';
 
 let firebaseConfig = {
@@ -23,7 +24,9 @@ if (import.meta.env.VITE_FIREBASE_CONFIG) {
 createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <FirebaseAppProvider firebaseConfig={firebaseConfig}>
-      <App />
+      <AnalyticsProvider>
+        <App />
+      </AnalyticsProvider>
     </FirebaseAppProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );