Fix TypeScript type mismatches and reduce duplication

- Replace enums with string literal union types for MetricAggregation, OperationType, and MatchType
- Eliminate code duplication by using single mapping objects for options
- Improve type safety for GA4 API request builder

Author: ikuleshov

src/components/ga4/QueryExplorer/BasicReport/useMakeRequest.ts

@@ -123,7 +123,7 @@ const useMakeRequest = ({
       r.keepEmptyRows = keepEmptyRows
     }
     if (metricAggregations !== undefined && metricAggregations.length !== 0) {
-      r.metricAggregations = metricAggregations
+      r.metricAggregations = metricAggregations as any
     }
     return r
   }, [

src/components/ga4/QueryExplorer/Filter/Filter/NumericFilter.tsx

@@ -13,31 +13,19 @@ interface NumericFilterProps {
   path: ExpressionPath
 }
 
-export enum OperationType {
-  Equal = "EQUAL",
-  LessThan = "LESS_THAN",
-  LessThanOrEqual = "LESS_THAN_OR_EQUAL",
-  GreaterThan = "GREATER_THAN",
-  GreaterThanOrEqual = "GREATER_THAN_OR_EQUAL",
-}
+export type OperationType = "EQUAL" | "LESS_THAN" | "LESS_THAN_OR_EQUAL" | "GREATER_THAN" | "GREATER_THAN_OR_EQUAL"
 
-const optionFor = (type: OperationType | undefined): SelectOption => {
-  switch (type) {
-    case OperationType.GreaterThan:
-      return { value: type, displayName: ">" }
-    case OperationType.GreaterThanOrEqual:
-      return { value: type, displayName: ">=" }
-    case OperationType.Equal:
-      return { value: type, displayName: "==" }
-    case OperationType.LessThan:
-      return { value: type, displayName: "<" }
-    case OperationType.LessThanOrEqual:
-      return { value: type, displayName: "<=" }
-    default:
-      return { value: "", displayName: "" }
-  }
+const operationTypeOptions: Record<OperationType, SelectOption> = {
+  "EQUAL": { value: "EQUAL", displayName: "==" },
+  "LESS_THAN": { value: "LESS_THAN", displayName: "<" },
+  "LESS_THAN_OR_EQUAL": { value: "LESS_THAN_OR_EQUAL", displayName: "<=" },
+  "GREATER_THAN": { value: "GREATER_THAN", displayName: ">" },
+  "GREATER_THAN_OR_EQUAL": { value: "GREATER_THAN_OR_EQUAL", displayName: ">=" },
 }
 
+const optionFor = (type: OperationType | undefined): SelectOption =>
+  type === undefined ? { value: "", displayName: "" } : operationTypeOptions[type]
+
 type NumericValue = gapi.client.analyticsdata.NumericValue
 
 export const numericValueEquals = (
@@ -67,7 +55,7 @@ export const toNumericValue = (s: string) => {
   return nuVal
 }
 
-const operationOptions = Object.values(OperationType).map(optionFor)
+const operationOptions = Object.values(operationTypeOptions)
 
 // TODO instead of having a filter type drop down, include `between` here and do
 // the smarts to choose the right subtype correctly.
@@ -106,7 +94,10 @@ const NumericFilter: React.FC<NumericFilterProps> = ({
         value={optionFor(numericFilter.operation as OperationType | undefined)}
         label="operation"
         onChange={option => {
-          updateNumericFilter(old => ({ ...old, operation: option?.value }))
+          updateNumericFilter(old => ({
+            ...old,
+            operation: option?.value as OperationType | undefined,
+          }))
         }}
         options={operationOptions}
       />

src/components/ga4/QueryExplorer/Filter/Filter/StringFilter.tsx

@@ -6,14 +6,7 @@ import Select, { SelectOption } from "@/components/Select"
 import LabeledCheckbox from "@/components/LabeledCheckbox"
 import { UpdateFilterFn, ExpressionPath } from "../index"
 
-export enum MatchType {
-  Exact = "EXACT",
-  BeginsWith = "BEGINS_WITH",
-  EndsWith = "ENDS_WITH",
-  Contains = "CONTAINS",
-  FullRegexp = "FULL_REGEXP",
-  PartialRegexp = "PARTIAL_REGEXP",
-}
+export type MatchType = "EXACT" | "BEGINS_WITH" | "ENDS_WITH" | "CONTAINS" | "FULL_REGEXP" | "PARTIAL_REGEXP"
 
 type SFilter = gapi.client.analyticsdata.StringFilter
 
@@ -23,26 +16,19 @@ interface StringFilterProps {
   path: ExpressionPath
 }
 
-const optionFor = (type: MatchType | undefined): SelectOption => {
-  switch (type) {
-    case MatchType.Exact:
-      return { value: type, displayName: "exact" }
-    case MatchType.BeginsWith:
-      return { value: type, displayName: "begins with" }
-    case MatchType.EndsWith:
-      return { value: type, displayName: "ends with" }
-    case MatchType.Contains:
-      return { value: type, displayName: "contains" }
-    case MatchType.FullRegexp:
-      return { value: type, displayName: "regexp" }
-    case MatchType.PartialRegexp:
-      return { value: type, displayName: "partial regexp" }
-    default:
-      return { value: "", displayName: "" }
-  }
+const matchTypeOptions: Record<MatchType, SelectOption> = {
+  "EXACT": { value: "EXACT", displayName: "exact" },
+  "BEGINS_WITH": { value: "BEGINS_WITH", displayName: "begins with" },
+  "ENDS_WITH": { value: "ENDS_WITH", displayName: "ends with" },
+  "CONTAINS": { value: "CONTAINS", displayName: "contains" },
+  "FULL_REGEXP": { value: "FULL_REGEXP", displayName: "regexp" },
+  "PARTIAL_REGEXP": { value: "PARTIAL_REGEXP", displayName: "partial regexp" },
 }
 
-const matchOptions = Object.values(MatchType).map(optionFor)
+const optionFor = (type: MatchType | undefined): SelectOption =>
+  type === undefined ? { value: "", displayName: "" } : matchTypeOptions[type]
+
+const matchOptions = Object.values(matchTypeOptions)
 
 const StringFilter: React.FC<StringFilterProps> = ({
   stringFilter,
@@ -68,7 +54,10 @@ const StringFilter: React.FC<StringFilterProps> = ({
         label="match type"
         value={matchValue}
         onChange={nu => {
-          updateStringFilter(old => ({ ...old, matchType: nu?.value }))
+          updateStringFilter(old => ({
+            ...old,
+            matchType: nu?.value as MatchType | undefined,
+          }))
         }}
         options={matchOptions}
       />
@@ -79,7 +68,7 @@ const StringFilter: React.FC<StringFilterProps> = ({
         label="value"
         onChange={e => {
           const nu = e.target.value
-          updateStringFilter(old => ({ ...old, value: nu }))
+          updateStringFilter((old: any) => ({ ...old, value: nu }))
         }}
       />
       <LabeledCheckbox

src/components/ga4/QueryExplorer/Filter/Filter/index.tsx

@@ -174,10 +174,10 @@ const Filter: React.FC<{
                 }
                 const value = {} as { operation?: OperationType, matchType?: MatchType}
                 if (nu.value === "numericFilter") {
-                  value["operation"] = OperationType.Equal
+                  value["operation"] = "EQUAL"
                 }
                 if (nu.value === "stringFilter") {
-                  value["matchType"] = MatchType.Exact
+                  value["matchType"] = "EXACT"
                 }
                 updateFilter(path, old => ({
                   fieldName: old.fieldName,

src/components/ga4/QueryExplorer/MetricAggregations.tsx

@@ -24,34 +24,31 @@ const StyledWithHelpText = styled(WithHelpText)((
   }
 }));
 
-export enum MetricAggregation {
-  Total = "TOTAL",
-  Minimum = "MINIMUM",
-  Maximum = "MAXIMUM",
-  Count = "COUNT",
-}
+export type MetricAggregation = "TOTAL" | "MINIMUM" | "MAXIMUM" | "COUNT" 
 
-const totalOption = { value: MetricAggregation.Total, displayName: "total" }
+const totalOption = { value: "TOTAL", displayName: "total" }
 const minimumOption = {
-  value: MetricAggregation.Minimum,
+  value: "MINIMUM",
   displayName: "minimum",
 }
 const maximumOption = {
-  value: MetricAggregation.Maximum,
+  value: "MAXIMUM",
   displayName: "maximum",
 }
-const countOption = { value: MetricAggregation.Count, displayName: "count" }
+const countOption = { value: "COUNT", displayName: "count" }
 
 const metricAggregationFor = (aggregation: MetricAggregation): SelectOption => {
   switch (aggregation) {
-    case MetricAggregation.Total:
+    case "TOTAL":
       return totalOption
-    case MetricAggregation.Minimum:
+    case "MINIMUM":
       return minimumOption
-    case MetricAggregation.Maximum:
+    case "MAXIMUM":
       return maximumOption
-    case MetricAggregation.Count:
+    case "COUNT":
       return countOption
+    default:
+      return { value: "", displayName: "" }
   }
 }