From bcb374e57f3e4b1ad9b51c26d52e390a8d559f8f Mon Sep 17 00:00:00 2001
From: William Correa <wilcorrea@gmail.com>
Date: Thu, 18 Apr 2024 19:21:42 -0300
Subject: [PATCH] feature: review form manager typing

---
 frontend/src/Domain/Contracts.ts              |  2 +-
 frontend/view/components/form/FormInput.tsx   |  4 +-
 .../view/components/form/FormPassword.tsx     |  2 +-
 frontend/view/components/form/FormSelect.tsx  |  4 +-
 frontend/view/components/form/FormText.tsx    |  2 +-
 frontend/view/components/form/index.ts        |  4 +-
 .../pages/dashboard/DashboardSettingsPage.tsx | 41 ++++++++++---------
 7 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/frontend/src/Domain/Contracts.ts b/frontend/src/Domain/Contracts.ts
index 028b31d..baca11e 100644
--- a/frontend/src/Domain/Contracts.ts
+++ b/frontend/src/Domain/Contracts.ts
@@ -23,7 +23,7 @@ export enum DriverType {
 
 export type Driver = {
   type: DriverType
-  config: Data
+  config: Record<string, string>
 }
 
 export type DriverResolver = Record<DriverType, Record<string, (config: Data) => unknown>>
diff --git a/frontend/view/components/form/FormInput.tsx b/frontend/view/components/form/FormInput.tsx
index ec96f4b..9fb5211 100644
--- a/frontend/view/components/form/FormInput.tsx
+++ b/frontend/view/components/form/FormInput.tsx
@@ -1,9 +1,9 @@
 import { FormFieldProps } from './index.ts'
 import { useFormComponent } from './hooks/useFormComponent.ts'
 
-type FormInputProps = FormFieldProps & { type?: string }
+type FormInputProps<T> = FormFieldProps<T> & { type?: string }
 
-export function FormInput (props: FormInputProps) {
+export function FormInput<T> (props: FormInputProps<T>) {
   const {
     fieldId,
     fieldName,
diff --git a/frontend/view/components/form/FormPassword.tsx b/frontend/view/components/form/FormPassword.tsx
index 8cf42cc..0ec12af 100644
--- a/frontend/view/components/form/FormPassword.tsx
+++ b/frontend/view/components/form/FormPassword.tsx
@@ -1,6 +1,6 @@
 import { FormFieldProps } from './index.ts'
 import { FormInput } from './FormInput.tsx'
 
-export function FormPassword (props: FormFieldProps) {
+export function FormPassword (props: FormFieldProps<string>) {
   return FormInput({ ...props, type: 'password' })
 }
diff --git a/frontend/view/components/form/FormSelect.tsx b/frontend/view/components/form/FormSelect.tsx
index 68fdc5a..7a8f124 100644
--- a/frontend/view/components/form/FormSelect.tsx
+++ b/frontend/view/components/form/FormSelect.tsx
@@ -3,12 +3,12 @@ import { useFormComponent } from './hooks/useFormComponent.ts'
 
 type OptionValue = string | number
 
-type Option<T extends OptionValue> = {
+export type Option<T extends OptionValue> = {
   value: T
   label: string
 }
 
-export type FormSelectProps<T extends OptionValue> = FormFieldProps & {
+export type FormSelectProps<T extends OptionValue> = FormFieldProps<T> & {
   options: Option<T>[]
 }
 
diff --git a/frontend/view/components/form/FormText.tsx b/frontend/view/components/form/FormText.tsx
index 1de37c0..8a1a7bf 100644
--- a/frontend/view/components/form/FormText.tsx
+++ b/frontend/view/components/form/FormText.tsx
@@ -1,6 +1,6 @@
 import { FormFieldProps } from './index.ts'
 import { FormInput } from './FormInput.tsx'
 
-export function FormText (props: FormFieldProps) {
+export function FormText (props: FormFieldProps<string>) {
   return FormInput({ ...props, type: 'text' })
 }
diff --git a/frontend/view/components/form/index.ts b/frontend/view/components/form/index.ts
index e13e32a..c545024 100644
--- a/frontend/view/components/form/index.ts
+++ b/frontend/view/components/form/index.ts
@@ -4,11 +4,11 @@ export type FormValueWatchCallback = (current: unknown, previous: unknown) => vo
 
 export type FormValueWatch = (fieldName: string, callback: FormValueWatchCallback) => void
 
-export type FormFieldProps = {
+export type FormFieldProps<T> = {
   id?: string
   name: string
   label: string
-  value?: unknown
+  value?: T
   description?: string
   placeholder?: string
   update?: FormValueUpdate
diff --git a/frontend/view/pages/dashboard/DashboardSettingsPage.tsx b/frontend/view/pages/dashboard/DashboardSettingsPage.tsx
index f0c36be..1e4a0bd 100644
--- a/frontend/view/pages/dashboard/DashboardSettingsPage.tsx
+++ b/frontend/view/pages/dashboard/DashboardSettingsPage.tsx
@@ -4,6 +4,7 @@ import UserConfigRepository from '../../../src/Domain/Admin/UserConfigRepository
 import { Form, FormSelect, FormText, useFormValue } from '../../components/form'
 import { Case, Switch } from '../../components/general'
 import { useApp, useI18n } from '../../hooks'
+import { Option } from '../../components/form/FormSelect.tsx'
 
 export function DashboardSettingsPage () {
   const $t = useI18n('pages.dashboard.settings')
@@ -35,6 +36,25 @@ export function DashboardSettingsPage () {
     return $t('error')
   }
 
+  const options: Option<string>[] = [
+    {
+      value: DriverType.memory,
+      label: $t('fields.type.drivers.memory')
+    },
+    {
+      value: DriverType.json,
+      label: $t('fields.type.drivers.json')
+    },
+    {
+      value: DriverType.http,
+      label: $t('fields.type.drivers.http')
+    },
+    {
+      value: DriverType.supabase,
+      label: $t('fields.type.drivers.supabase')
+    },
+  ]
+
   return (
     <div className="DashboardSettingsForm">
       <h4>{$t('title')}</h4>
@@ -44,30 +64,13 @@ export function DashboardSettingsPage () {
         onResolve={onResolve}
         onReject={onReject}
         fields={<>
-          <FormSelect
+          <FormSelect<string>
             name="type"
             value={value.type}
             update={update}
             label={$t('fields.type.label')}
             description={$t('fields.type.details')}
-            options={[
-              {
-                value: DriverType.memory,
-                label: $t('fields.type.drivers.memory')
-              },
-              {
-                value: DriverType.json,
-                label: $t('fields.type.drivers.json')
-              },
-              {
-                value: DriverType.http,
-                label: $t('fields.type.drivers.http')
-              },
-              {
-                value: DriverType.supabase,
-                label: $t('fields.type.drivers.supabase')
-              },
-            ]}
+            options={options}
           />
           {/* config */}
           <div className="form-control">