From 8db61bc79b4ddfbf7e5f3719e2db18d734b4028a Mon Sep 17 00:00:00 2001
From: Timothy Armes <tim@timothyarmes.com>
Date: Mon, 15 Apr 2024 11:26:46 +0200
Subject: [PATCH] Fix Select types

---
 src/components/RegionSelect.tsx          | 24 ++++++++++++++++++------
 src/components/form/AsyncSelectField.tsx |  3 +--
 src/components/form/Select.tsx           |  5 +----
 src/components/form/SelectField.tsx      |  9 +--------
 4 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/components/RegionSelect.tsx b/src/components/RegionSelect.tsx
index bba54f8..6bde5ee 100644
--- a/src/components/RegionSelect.tsx
+++ b/src/components/RegionSelect.tsx
@@ -1,7 +1,13 @@
+import gd from "date-fns/locale/gd";
 import { useAtom } from "jotai";
 import { useTranslations } from "next-intl";
 import { IoAdd } from "react-icons/io5";
-import { GroupBase, OptionsOrGroups, SingleValue } from "react-select";
+import {
+  GroupBase,
+  OnChangeValue,
+  OptionsOrGroups,
+  SingleValue,
+} from "react-select";
 
 import { regionFilterAtom } from "@/atoms";
 import { BaseOption, Select, SelectProps } from "@/components/form/Select";
@@ -9,7 +15,10 @@ import { useZones } from "@/hooks/useZones";
 import { Zone } from "@/server/myZones";
 import { useRouter } from "@/utils/navigation";
 
-type RegionSelectProps = Omit<SelectProps, "options" | "value" | "onChange"> & {
+type RegionSelectProps = Omit<
+  SelectProps<false, string, Zone | null>,
+  "options" | "value" | "onChange"
+> & {
   syncTitle: string;
 };
 
@@ -55,7 +64,9 @@ export const RegionSelect = ({
     },
   ];
 
-  const onChange = (option: SingleValue<RegionOption>) => {
+  const onChange = (
+    option: OnChangeValue<BaseOption<string, Zone | null>, false>,
+  ) => {
     if (!option) return;
     if (option.value === "create") {
       router.push("/zones/create");
@@ -99,9 +110,10 @@ export const RegionSelect = ({
           ? o.value === regionFilter
           : o.value === regionFilter.id,
       )}
-      formatGroupLabel={(g) => formatGroupLabel(g as GroupedOption)}
-      formatOptionLabel={(o) => formatOptionLabel(o as RegionOption)}
-      onChange={(v) => onChange(v as SingleValue<RegionOption>)}
+      isMulti={false}
+      formatGroupLabel={formatGroupLabel}
+      formatOptionLabel={formatOptionLabel}
+      onChange={onChange}
       {...selectProps}
     />
   );
diff --git a/src/components/form/AsyncSelectField.tsx b/src/components/form/AsyncSelectField.tsx
index 6763907..74064b1 100644
--- a/src/components/form/AsyncSelectField.tsx
+++ b/src/components/form/AsyncSelectField.tsx
@@ -15,8 +15,7 @@ import AsyncSelect from "react-select/async";
 import { Prettify } from "@/types";
 
 import { Field, GenericFieldProps } from "./Field";
-import { classNames } from "./Select";
-import { BaseOption } from "./SelectField";
+import { BaseOption, classNames } from "./Select";
 
 export type AsyncSelectFieldProps<
   TFieldValues extends FieldValues = FieldValues,
diff --git a/src/components/form/Select.tsx b/src/components/form/Select.tsx
index b4a51c0..3dabc28 100644
--- a/src/components/form/Select.tsx
+++ b/src/components/form/Select.tsx
@@ -62,10 +62,7 @@ export type SelectProps<
   T = string,
   D = unknown,
 > = Prettify<
-  Omit<
-    Props<BaseOption<T, D>, IsMulti, GroupBase<BaseOption<T, D>>>,
-    "classNames"
-  > & {
+  Omit<Props<BaseOption<T, D>, IsMulti>, "classNames"> & {
     required?: boolean;
     separators?: boolean;
     hasError?: boolean;
diff --git a/src/components/form/SelectField.tsx b/src/components/form/SelectField.tsx
index f74d7c2..ca66b9a 100644
--- a/src/components/form/SelectField.tsx
+++ b/src/components/form/SelectField.tsx
@@ -10,18 +10,11 @@ import {
 } from "react-hook-form";
 import { GroupBase, OnChangeValue } from "react-select";
 
-import { Select, SelectProps } from "@/components/form/Select";
+import { BaseOption, Select, SelectProps } from "@/components/form/Select";
 import { Prettify } from "@/types";
 
 import { Field, GenericFieldProps } from "./Field";
 
-export type BaseOption<T = string, D = unknown> = {
-  value: T;
-  label: string | JSX.Element;
-  disabled?: boolean;
-  data?: D;
-};
-
 export type SelectFieldProps<
   TFieldValues extends FieldValues = FieldValues,
   TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,