From 12d0fb53807e6a689ff25dac0e334ced5fb26299 Mon Sep 17 00:00:00 2001
From: stdavis <stdavis@utah.gov>
Date: Fri, 23 Aug 2024 12:31:09 -0600
Subject: [PATCH] feat: add logged out state and refactor filter into it's own
 component

Ref #182
---
 src/App.tsx               | 176 ++++++++++----------------------------
 src/components/Filter.tsx |  85 ++++++++++++++++++
 2 files changed, 131 insertions(+), 130 deletions(-)
 create mode 100644 src/components/Filter.tsx

diff --git a/src/App.tsx b/src/App.tsx
index dc5d4c8..da496fd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,31 +1,22 @@
 import esriConfig from '@arcgis/core/config';
 import Graphic from '@arcgis/core/Graphic';
-import FeatureLayer from '@arcgis/core/layers/FeatureLayer.js';
 import Viewpoint from '@arcgis/core/Viewpoint.js';
-import {
-  Button,
-  Checkbox,
-  CheckboxGroup,
-  Drawer,
-  Footer,
-  Header,
-  Sherlock,
-  TextField,
-  masqueradeProvider,
-} from '@ugrc/utah-design-system';
+import { Button, Drawer, Footer, Header, Sherlock, masqueradeProvider } from '@ugrc/utah-design-system';
 import PropTypes from 'prop-types';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useOverlayTrigger } from 'react-aria';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useOverlayTriggerState } from 'react-stately';
 import { MapContainer } from './components';
 import { useAnalytics, useFirebaseApp } from './components/contexts';
+import Filter from './components/Filter';
 import { useMap } from './components/hooks';
 import { DnrLogo } from './components/Logo';
 import config from './config';
 
 const version = import.meta.env.PACKAGE_VERSION;
-const secureServiceUrl = import.meta.env.VITE_PROXY_URL;
+
+console.log('application version:', version);
 
 const ErrorFallback = ({ error }: { error: Error }) => {
   return (
@@ -62,13 +53,10 @@ const links = [
 const url = 'https://masquerade.ugrc.utah.gov/arcgis/rest/services/UtahLocator/GeocodeServer';
 const wkid = 26912;
 
-// TODO!: replace partial list with actual list
-const purpose = ['Depletion estimate', 'Mark-Recapture', 'Disease certification', 'Genetics', 'Other'];
-
 export default function App() {
   const app = useFirebaseApp();
   const logEvent = useAnalytics();
-  const { zoom, placeGraphic, addLayers } = useMap();
+  const { zoom, placeGraphic } = useMap();
   const sideBarState = useOverlayTriggerState({ defaultOpen: window.innerWidth >= config.MIN_DESKTOP_WIDTH });
   const sideBarTriggerProps = useOverlayTrigger(
     {
@@ -95,36 +83,6 @@ export default function App() {
     initPerformance();
   }, [app]);
 
-  // add public layers
-  useEffect(() => {
-    const streams = new FeatureLayer({
-      url: `${secureServiceUrl}/reference/0`,
-      id: 'streams',
-    });
-
-    const lakes = new FeatureLayer({
-      url: `${secureServiceUrl}/reference/1`,
-      id: 'lakes',
-    });
-
-    const stations = new FeatureLayer({
-      url: `${secureServiceUrl}/mapservice/0`,
-      id: 'stations',
-    });
-
-    const events = new FeatureLayer({
-      url: `${secureServiceUrl}/mapservice/1`,
-      id: 'stations',
-    });
-
-    const fish = new FeatureLayer({
-      url: `${secureServiceUrl}/mapservice/2`,
-      id: 'stations',
-    });
-
-    addLayers([streams, lakes, stations, events, fish]);
-  }, [addLayers]);
-
   const onSherlockMatch = (graphics: Graphic[]) => {
     // summary:
     //      Zooms to the passed in graphic(s).
@@ -156,6 +114,7 @@ export default function App() {
   //   },
   //   [mapView, trayState],
   // );
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
 
   return (
     <>
@@ -168,96 +127,53 @@ export default function App() {
             </h2>
           </div>
         </Header>
-        <section className="relative flex min-h-0 flex-1 gap-2 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">Map filters</h2>
-              <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
-                <div>
-                  <h3 className="text-lg font-semibold">Purpose</h3>
-                  <CheckboxGroup>
-                    {purpose.map((p) => (
-                      <div key={p} className="ml-2 flex gap-1">
-                        <Checkbox type="checkbox" id={p} name={p} value={p} />
-                        <label htmlFor={p}>{p}</label>
-                      </div>
-                    ))}
-                  </CheckboxGroup>
+        {isAuthenticated ? (
+          <section className="relative flex min-h-0 flex-1 gap-2 overflow-x-hidden md:mr-2">
+            <Drawer main state={sideBarState} {...sideBarTriggerProps}>
+              <div className="mx-2 mb-2 grid grid-cols-1 gap-2">
+                <Filter />
+                <h2 className="text-xl font-bold">Map controls</h2>
+                <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
+                  <ErrorBoundary FallbackComponent={ErrorFallback}>
+                    <Sherlock {...masqueradeSherlockOptions} label="Find a stream" />
+                  </ErrorBoundary>
                 </div>
-                <div className="w-30 flex justify-end">
-                  <Button variant="secondary">clear all</Button>
+                <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
+                  <ErrorBoundary FallbackComponent={ErrorFallback}>
+                    <Sherlock {...masqueradeSherlockOptions} label="Find a lake" />
+                  </ErrorBoundary>
                 </div>
               </div>
-              <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
-                <h3 className="text-lg font-semibold">Species and length</h3>
-                <div className="flex flex-col gap-2">
-                  <div className="ml-2 flex gap-1">
-                    species <TextField className="w-20" />
-                  </div>
-                  <div className="ml-2 flex gap-1">
-                    min <TextField className="w-20" />
-                    max <TextField className="w-20" />
-                  </div>
-                  <div className="w-30 flex justify-end">
-                    <Button variant="secondary">clear all</Button>
-                  </div>
-                </div>
-              </div>
-              <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
-                <h3 className="text-lg font-semibold">Date range</h3>
-                <div className="flex flex-col gap-2">
-                  <div className="ml-2 flex gap-1">
-                    from <TextField className="w-20" />
-                    to <TextField className="w-20" />
-                  </div>
-                  <div className="w-30 flex justify-end">
-                    <Button variant="secondary">clear all</Button>
-                  </div>
-                </div>
-              </div>
-              <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
-                <h3 className="text-lg font-semibold">Water body</h3>
-                <div className="flex flex-col gap-2">
-                  <div className="ml-2 flex gap-1">
-                    name <TextField className="w-20" />
-                  </div>
-                  <div className="w-30 flex justify-end">
-                    <Button variant="secondary">clear all</Button>
-                  </div>
-                </div>
-              </div>
-              <h2 className="text-xl font-bold">Map controls</h2>
-              <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
+            </Drawer>
+            <div className="relative flex flex-1 flex-col rounded">
+              <div className="relative flex-1 overflow-hidden dark:rounded">
                 <ErrorBoundary FallbackComponent={ErrorFallback}>
-                  <Sherlock {...masqueradeSherlockOptions} label="Find a stream" />
-                </ErrorBoundary>
-              </div>
-              <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
-                <ErrorBoundary FallbackComponent={ErrorFallback}>
-                  <Sherlock {...masqueradeSherlockOptions} label="Find a lake" />
+                  <MapContainer />
                 </ErrorBoundary>
+                <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">Selected records</h2>
+                  </section>
+                </Drawer>
               </div>
             </div>
-          </Drawer>
-          <div className="relative flex flex-1 flex-col rounded">
-            <div className="relative flex-1 overflow-hidden dark:rounded">
-              <ErrorBoundary FallbackComponent={ErrorFallback}>
-                <MapContainer />
-              </ErrorBoundary>
-              <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">Selected records</h2>
-                </section>
-              </Drawer>
+          </section>
+        ) : (
+          <section className="flex flex-1 items-center justify-center">
+            <div className="flex flex-col gap-4">
+              <h2 className="text-center text-2xl font-bold">Please log in to use the application</h2>
+              <Button variant="primary" onClick={() => setIsAuthenticated(true)}>
+                Log in
+              </Button>
             </div>
-          </div>
-        </section>
+          </section>
+        )}
       </main>
       <Footer />
     </>
diff --git a/src/components/Filter.tsx b/src/components/Filter.tsx
new file mode 100644
index 0000000..a9f3fb2
--- /dev/null
+++ b/src/components/Filter.tsx
@@ -0,0 +1,85 @@
+import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
+import { Button, Checkbox, CheckboxGroup, TextField } from '@ugrc/utah-design-system';
+import { useEffect } from 'react';
+import { useMap } from './hooks';
+
+const secureServiceUrl = import.meta.env.VITE_PROXY_URL;
+
+// TODO!: replace partial list with actual list
+const purpose = ['Depletion estimate', 'Mark-Recapture', 'Disease certification', 'Genetics', 'Other'];
+
+export default function Filter() {
+  const { addLayers, mapView } = useMap();
+
+  useEffect(() => {
+    if (!mapView) {
+      return;
+    }
+
+    const stations = new FeatureLayer({
+      url: `${secureServiceUrl}/mapservice/0`,
+      id: 'stations',
+    });
+    addLayers([stations]);
+  }, [addLayers, mapView]);
+
+  return (
+    <>
+      <h2 className="text-xl font-bold">Map filters</h2>
+      <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
+        <div>
+          <h3 className="text-lg font-semibold">Purpose</h3>
+          <CheckboxGroup>
+            {purpose.map((p) => (
+              <div key={p} className="ml-2 flex gap-1">
+                <Checkbox type="checkbox" id={p} name={p} value={p} />
+                <label htmlFor={p}>{p}</label>
+              </div>
+            ))}
+          </CheckboxGroup>
+        </div>
+        <div className="w-30 flex justify-end">
+          <Button variant="secondary">clear all</Button>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
+        <h3 className="text-lg font-semibold">Species and length</h3>
+        <div className="flex flex-col gap-2">
+          <div className="ml-2 flex gap-1">
+            species <TextField className="w-20" />
+          </div>
+          <div className="ml-2 flex gap-1">
+            min <TextField className="w-20" />
+            max <TextField className="w-20" />
+          </div>
+          <div className="w-30 flex justify-end">
+            <Button variant="secondary">clear all</Button>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
+        <h3 className="text-lg font-semibold">Date range</h3>
+        <div className="flex flex-col gap-2">
+          <div className="ml-2 flex gap-1">
+            from <TextField className="w-20" />
+            to <TextField className="w-20" />
+          </div>
+          <div className="w-30 flex justify-end">
+            <Button variant="secondary">clear all</Button>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
+        <h3 className="text-lg font-semibold">Water body</h3>
+        <div className="flex flex-col gap-2">
+          <div className="ml-2 flex gap-1">
+            name <TextField className="w-20" />
+          </div>
+          <div className="w-30 flex justify-end">
+            <Button variant="secondary">clear all</Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}