Skip to content

Commit

Permalink
feat: add logged out state and refactor filter into it's own component
Browse files Browse the repository at this point in the history 
Ref #182
  • Loading branch information
@stdavis
stdavis committed Oct 22, 2024
1 parent c91b1cb commit ff8c9df
Show file tree
Hide file tree
Showing 2 changed files with 131 additions and 130 deletions.
176 changes: 46 additions & 130 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down Expand Up @@ -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(
{
Expand All @@ -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).
Expand Down Expand Up @@ -156,6 +114,7 @@ export default function App() {
// },
// [mapView, trayState],
// );
const [isAuthenticated, setIsAuthenticated] = useState(false);

return (
<>
Expand All @@ -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 />
</>
Expand Down
85 changes: 85 additions & 0 deletions src/components/Filter.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}

0 comments on commit ff8c9df

Please sign in to comment.