From 4cee85e046f5468e6acea29d30feaccfcda11eec Mon Sep 17 00:00:00 2001
From: Jon Waldstein <jonwaldstein@jons-air.mynetworksettings.com>
Date: Fri, 8 Dec 2023 14:23:19 -0500
Subject: [PATCH] fix: more type juggling and comparison problems

---
 .../DonationFormBlock/resources/editor/Edit.tsx     |  2 +-
 .../editor/components/DonationFormBlockControls.tsx |  8 ++++----
 .../editor/components/DonationFormSelector.tsx      | 13 ++++++++++---
 .../resources/editor/hooks/useFormOptions.ts        | 10 ++++++++--
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx
index eeb677cdbe..3bb16ba17c 100644
--- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx
+++ b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx
@@ -54,7 +54,7 @@ export default function Edit({attributes, isSelected, setAttributes, className,
     }, []);
 
     const [isLegacyForm, isLegacyTemplate, link] = (() => {
-        const form = formOptions.find((form) => form.value === String(id));
+        const form = formOptions.find((form) => form.value === id);
 
         return [form?.isLegacyForm, form?.isLegacyTemplate, form?.link];
     })();
diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx
index 1e53107c8d..d238704252 100644
--- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx
+++ b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx
@@ -1,19 +1,19 @@
 import {ExternalLink, PanelBody, PanelRow, SelectControl, TextControl, ToggleControl} from '@wordpress/components';
 import {__} from '@wordpress/i18n';
 import {InspectorControls} from '@wordpress/block-editor';
-import {Option} from '../types';
+import {FormOption} from '../hooks/useFormOptions';
 
 interface DonationFormBlockControls {
     attributes: Readonly<any>;
     setAttributes: (newAttributes: Record<string, any>) => void;
-    formOptions: Option[];
+    formOptions: FormOption[];
     isResolving: boolean;
     isLegacyTemplate: boolean;
     isLegacyForm: boolean;
 }
 
 /**
- * @unreleased updated setAttributes ID to be a number.
+ * @unreleased updated setAttributes ID to be a number and formOptions to return select options.
  * @since 3.2.0
  */
 export default function DonationFormBlockControls({
@@ -48,7 +48,7 @@ export default function DonationFormBlockControls({
                             options={[
                                 // add a disabled selector manually
                                 ...[{value: '', label: __('Select...', 'give'), disabled: true}],
-                                ...formOptions,
+                                ...formOptions.map((form) => ({label: form.label, value: String(form.value)})),
                             ]}
                             onChange={(newFormId) => {
                                 setAttributes({id: Number(newFormId)});
diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormSelector.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormSelector.tsx
index 3765715582..38a89e0bbd 100644
--- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormSelector.tsx
+++ b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormSelector.tsx
@@ -7,16 +7,23 @@ import {reactSelectStyles, reactSelectThemeStyles} from '../styles/reactSelectSt
 import logo from '../images/givewp-logo.svg';
 
 import '../styles/index.scss';
+import {FormOption} from '../hooks/useFormOptions';
 
 // @ts-ignore
 const savePost = () => dispatch('core/editor').savePost();
 
+type DonationFormSelectorProps = {
+    formOptions: FormOption[];
+    isResolving: boolean;
+    handleSelect: (id: number) => void;
+}
+
 /**
  * @since 3.2.0
  */
-export default function DonationFormSelector({formOptions, isResolving, handleSelect}) {
-    const [selectedForm, setSelectedForm] = useState(null);
-    const form = formOptions.find(form => form.value == selectedForm);
+export default function DonationFormSelector({formOptions, isResolving, handleSelect}: DonationFormSelectorProps) {
+    const [selectedForm, setSelectedForm] = useState<number>(null);
+    const form = formOptions.find(form => form.value === selectedForm);
     const {isSaving, isDisabled} = usePostState();
 
     return (
diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/hooks/useFormOptions.ts b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/hooks/useFormOptions.ts
index 64a53d8f0f..96a66d9ddc 100644
--- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/hooks/useFormOptions.ts
+++ b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/hooks/useFormOptions.ts
@@ -1,9 +1,15 @@
 import {__} from '@wordpress/i18n';
 import {useSelect} from '@wordpress/data';
 import type {Post} from '@wordpress/core-data/src/entity-types';
-import type {Form, Option} from '../types';
+import type {Form} from '../types';
 
-type FormOption = Form & Option;
+/**
+ * @unreleased
+ */
+export interface FormOption extends Form {
+    label: string;
+    value: number;
+}
 
 /**
  * @since 3.2.0 include isLegacyForm, isLegacyFormTemplate & link.