Use types instead of enums in codegen

ui/.eslintrc

@@ -31,8 +31,14 @@
   "overrides": [
     {
       "files": ["**/*.ts?(x)"],
-      "extends": ["plugin:@typescript-eslint/recommended"],
+      "extends": [
+        "plugin:@typescript-eslint/recommended"
+        // TODO: Enable strict type checking
+        // "plugin:@typescript-eslint/strict-type-checked",
+        // "plugin:@typescript-eslint/stylistic-type-checked"
+      ],
       "plugins": ["@typescript-eslint"],
+      "parserOptions": { "project": "./tsconfig.json" },
       "rules": {
         // typescript only rules go here
         "@typescript-eslint/no-unused-vars": "off",

ui/codegen.ts

@@ -30,6 +30,7 @@ const config: CodegenConfig = {
         exposeFetcher: true,
         exposeQueryKeys: true,
         exposeMutationKeys: true,
+        enumsAsTypes: true,
         strictScalars: true,
         scalars: {
           // TODO: Choose a decimal library and use that type instead

ui/src/components/Player/DetectionCategoryButton.tsx

@@ -1,11 +1,12 @@
 import { Box } from "@mui/material";
+import type { StaticImageData } from "next/legacy/image";
 import Image from "next/legacy/image";
 
 export default function DetectionCategoryButton({
   icon,
   title,
 }: {
-  icon: { src: string };
+  icon: StaticImageData;
   title: string;
 }) {
   return (

ui/src/components/Player/DetectionDialog.tsx

@@ -10,9 +10,10 @@ import {
   ToggleButton,
   ToggleButtonGroup,
 } from "@mui/material";
+import type { StaticImageData } from "next/legacy/image";
 import { useState } from "react";
 
-import { DetectionCategory, Feed } from "@/graphql/generated";
+import type { DetectionCategory, Feed } from "@/graphql/generated";
 import { useSubmitDetectionMutation } from "@/graphql/generated";
 import vesselIconImage from "@/public/icons/vessel-purple.svg";
 import wavesIconImage from "@/public/icons/water-waves-blue.svg";
@@ -104,10 +105,13 @@ export default function DetectionDialog({
     }
   };
 
-  const categoryButtons = [
-    { id: DetectionCategory.Orca, iconImage: whaleFlukeIconImage },
-    { id: DetectionCategory.Vessel, iconImage: vesselIconImage },
-    { id: DetectionCategory.Other, iconImage: wavesIconImage },
+  const categoryButtons: {
+    id: DetectionCategory;
+    iconImage: StaticImageData;
+  }[] = [
+    { id: "ORCA", iconImage: whaleFlukeIconImage },
+    { id: "VESSEL", iconImage: vesselIconImage },
+    { id: "OTHER", iconImage: wavesIconImage },
   ];
 
   return (

ui/src/graphql/generated/index.ts

@@ -123,12 +123,11 @@ export type CandidateFilterMinTime = {
   notEq?: InputMaybe<Scalars["DateTime"]["input"]>;
 };
 
-export enum CandidateSortField {
-  DetectionCount = "DETECTION_COUNT",
-  Id = "ID",
-  MaxTime = "MAX_TIME",
-  MinTime = "MIN_TIME",
-}
+export type CandidateSortField =
+  | "DETECTION_COUNT"
+  | "ID"
+  | "MAX_TIME"
+  | "MIN_TIME";
 
 export type CandidateSortInput = {
   field: CandidateSortField;
@@ -150,11 +149,7 @@ export type Detection = {
   uuid?: Maybe<Scalars["String"]["output"]>;
 };
 
-export enum DetectionCategory {
-  Orca = "ORCA",
-  Other = "OTHER",
-  Vessel = "VESSEL",
-}
+export type DetectionCategory = "ORCA" | "OTHER" | "VESSEL";
 
 export type DetectionFilterCategory = {
   eq?: InputMaybe<DetectionCategory>;
@@ -252,16 +247,15 @@ export type DetectionFilterTimestamp = {
   notEq?: InputMaybe<Scalars["DateTime"]["input"]>;
 };
 
-export enum DetectionSortField {
-  Category = "CATEGORY",
-  Description = "DESCRIPTION",
-  Id = "ID",
-  ListenerCount = "LISTENER_COUNT",
-  PlayerOffset = "PLAYER_OFFSET",
-  PlaylistTimestamp = "PLAYLIST_TIMESTAMP",
-  SourceIp = "SOURCE_IP",
-  Timestamp = "TIMESTAMP",
-}
+export type DetectionSortField =
+  | "CATEGORY"
+  | "DESCRIPTION"
+  | "ID"
+  | "LISTENER_COUNT"
+  | "PLAYER_OFFSET"
+  | "PLAYLIST_TIMESTAMP"
+  | "SOURCE_IP"
+  | "TIMESTAMP";
 
 export type DetectionSortInput = {
   field: DetectionSortField;
@@ -358,15 +352,14 @@ export type FeedFilterSlug = {
   notEq?: InputMaybe<Scalars["String"]["input"]>;
 };
 
-export enum FeedSortField {
-  Id = "ID",
-  ImageUrl = "IMAGE_URL",
-  IntroHtml = "INTRO_HTML",
-  LocationPoint = "LOCATION_POINT",
-  Name = "NAME",
-  NodeName = "NODE_NAME",
-  Slug = "SLUG",
-}
+export type FeedSortField =
+  | "ID"
+  | "IMAGE_URL"
+  | "INTRO_HTML"
+  | "LOCATION_POINT"
+  | "NAME"
+  | "NODE_NAME"
+  | "SLUG";
 
 export type FeedSortInput = {
   field: FeedSortField;
@@ -502,14 +495,13 @@ export type SignInWithPasswordResult = {
   user?: Maybe<User>;
 };
 
-export enum SortOrder {
-  Asc = "ASC",
-  AscNullsFirst = "ASC_NULLS_FIRST",
-  AscNullsLast = "ASC_NULLS_LAST",
-  Desc = "DESC",
-  DescNullsFirst = "DESC_NULLS_FIRST",
-  DescNullsLast = "DESC_NULLS_LAST",
-}
+export type SortOrder =
+  | "ASC"
+  | "ASC_NULLS_FIRST"
+  | "ASC_NULLS_LAST"
+  | "DESC"
+  | "DESC_NULLS_FIRST"
+  | "DESC_NULLS_LAST";
 
 export type SubmitDetectionInput = {
   category: DetectionCategory;

ui/src/pages/reports/index.tsx

@@ -17,12 +17,7 @@ import { useState } from "react";
 
 import DetectionsTable from "@/components/DetectionsTable";
 import Header from "@/components/Header";
-import {
-  CandidateSortField,
-  CandidatesQuery,
-  SortOrder,
-  useCandidatesQuery,
-} from "@/graphql/generated";
+import { CandidatesQuery, useCandidatesQuery } from "@/graphql/generated";
 import type { NextPageWithLayout } from "@/pages/_app";
 import { formatTimestamp } from "@/utils/time";
 
@@ -56,7 +51,7 @@ const DetectionsPage: NextPageWithLayout = () => {
   const candidatesQuery = useCandidatesQuery({
     limit: rowsPerPage,
     offset: page * rowsPerPage,
-    sort: [{ field: CandidateSortField.MinTime, order: SortOrder.Desc }],
+    sort: [{ field: "MIN_TIME", order: "DESC" }],
   });
   const candidates = candidatesQuery?.data?.candidates?.results ?? [];
 
@@ -137,7 +132,8 @@ const DetectionsPage: NextPageWithLayout = () => {
                         <TableCell>
                           {Object.entries(getCategoryCounts(candidate))
                             .map(
-                              ([category, count]) => `${category.toLowerCase()} [${count}]`,
+                              ([category, count]) =>
+                                `${category.toLowerCase()} [${count}]`,
                             )
                             .join(", ")}{" "}
                         </TableCell>