feat: implement submitter email filter

Closes #43

package.json

@@ -46,6 +46,7 @@
     "firebase": "^11.0.1",
     "immer": "^10.1.1",
     "ky": "^1.7.2",
+    "lodash.debounce": "^4.0.8",
     "react": "^18.3.1",
     "react-aria": "^3.35.1",
     "react-aria-components": "^1.4.1",

src/components/Filter.tsx

@@ -10,6 +10,7 @@ import DateRange from './filters/DateRange';
 import Domain from './filters/Domain';
 import Location from './filters/Location';
 import SpeciesLength from './filters/SpeciesLength';
+import Submitter from './filters/Submitter';
 import { useMap } from './hooks';
 import { getStationQuery } from './queryHelpers';
 
@@ -165,6 +166,9 @@ export default function Filter(): JSX.Element {
       <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
         <Location />
       </div>
+      <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
+        <Submitter />
+      </div>
     </>
   );
 }

src/components/ResultsGrid.tsx

@@ -40,7 +40,8 @@ async function getData(where: string, currentUser: User): Promise<Result[]> {
                      FROM ${config.databaseSecrets.databaseName}.${config.databaseSecrets.user}.${config.tableNames.equipment} as eq
                      WHERE se.${config.fieldNames.EVENT_ID} = eq.${config.fieldNames.EVENT_ID}
                      FOR XML PATH ('')),
-                     1, 1, '')
+                     1, 1, ''),
+      se.${config.fieldNames.SUBMITTER}
   FROM ${config.databaseSecrets.databaseName}.${config.databaseSecrets.user}.${config.tableNames.events} as se
 
   LEFT OUTER JOIN ${config.databaseSecrets.databaseName}.${config.databaseSecrets.user}.${config.tableNames.fish} as f
@@ -216,6 +217,9 @@ export default function ResultsGrid() {
               <Column id={config.fieldNames.TYPES} minWidth={150}>
                 Equipment
               </Column>
+              <Column id={config.fieldNames.SUBMITTER} minWidth={180}>
+                Submitter
+              </Column>
               <Column id={config.fieldNames.EVENT_ID} isRowHeader minWidth={350}>
                 Event ID
               </Column>
@@ -234,6 +238,7 @@ export default function ResultsGrid() {
                   <Cell>{row[config.fieldNames.STATION_NAME]}</Cell>
                   <Cell>{row[config.fieldNames.SPECIES]}</Cell>
                   <Cell>{row[config.fieldNames.TYPES]}</Cell>
+                  <Cell>{row[config.fieldNames.SUBMITTER]}</Cell>
                   <Cell>{row[config.fieldNames.EVENT_ID]}</Cell>
                 </Row>
               )}

src/components/contexts/FilterProvider.tsx

@@ -6,7 +6,7 @@ export type QueryInfo = {
   table: string;
 };
 export type FilterState = Partial<Record<FilterKeys, QueryInfo>>;
-export type FilterKeys = 'purpose' | 'date' | 'speciesLength' | 'location' | 'equipmentType';
+export type FilterKeys = 'purpose' | 'date' | 'speciesLength' | 'location' | 'equipmentType' | 'submitter';
 type Action =
   | {
       type: 'UPDATE_TABLE';

src/components/filters/Submitter.tsx

@@ -0,0 +1,26 @@
+import { TextField } from '@ugrc/utah-design-system';
+import debounce from 'lodash.debounce';
+import config from '../../config';
+import { useFilter } from '../contexts/FilterProvider';
+
+export default function Submitter(): JSX.Element {
+  const { filterDispatch } = useFilter();
+
+  const onChange = debounce((value) => {
+    filterDispatch({
+      type: 'UPDATE_TABLE',
+      filterKey: 'submitter',
+      value: {
+        table: config.tableNames.events,
+        where: `${config.fieldNames.SUBMITTER} = '${value}'`,
+      },
+    });
+  }, 1250);
+
+  return (
+    <>
+      <h3 className="text-lg font-semibold">Submitter</h3>
+      <TextField label="Email" aria-label="email" onChange={onChange} type="email" />
+    </>
+  );
+}

src/config.ts

@@ -33,6 +33,7 @@ const config = {
     SURVEY_PURPOSE: 'SURVEY_PURPOSE',
     EVENT_DATE: 'EVENT_DATE',
     OBSERVERS: 'OBSERVERS',
+    SUBMITTER: 'SUBMITTER',
 
     // Fish
     SPECIES: 'SPECIES', // dynamic field created via SQL query