From 4800d4aee19ffd506a8b2c38027bf241129ae240 Mon Sep 17 00:00:00 2001
From: Karen <sidokaren@icloud.com>
Date: Wed, 25 Jan 2023 12:47:46 +0100
Subject: [PATCH] (quality) add typing for status filter and settings

---
 .../components/editorial-block/editorial-block-form.tsx     | 5 ++---
 app/frontend/src/javascript/components/form/form-input.tsx  | 6 +++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/app/frontend/src/javascript/components/editorial-block/editorial-block-form.tsx b/app/frontend/src/javascript/components/editorial-block/editorial-block-form.tsx
index 3037ae041..5bf506e44 100644
--- a/app/frontend/src/javascript/components/editorial-block/editorial-block-form.tsx
+++ b/app/frontend/src/javascript/components/editorial-block/editorial-block-form.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { Control, FormState, UseFormRegister, UseFormGetValues } from 'react-hook-form';
 import { FormSwitch } from '../form/form-switch';
 import { FormRichText } from '../form/form-rich-text';
@@ -14,7 +13,7 @@ interface EditorialBlockFormProps {
   formState: FormState<Record<SettingName, SettingValue>>,
   info?: string
   keys: Record<EditorialKeys, SettingName>,
-  getValues?: UseFormGetValues<FieldValues>,
+  getValues?: UseFormGetValues<Record<SettingName, SettingValue>>,
 }
 
 // regular expression to validate the input fields
@@ -23,7 +22,7 @@ const urlRegex = /^(https?:\/\/)([^.]+)\.(.{2,30})(\/.*)*\/?$/;
 /**
  * Allows to create a formatted text and optional cta button in a form block, to be included in a resource form managed by react-hook-form.
  */
-export const EditorialBlockForm = <TFieldValues extends FieldValues>({ register, control, formState, info, keys, getValues }: EditorialBlockFormProps<TFieldValues>) => {
+export const EditorialBlockForm: React.FC<EditorialBlockFormProps> = ({ register, control, formState, info, keys, getValues }) => {
   const { t } = useTranslation('admin');
 
   const [isActiveTextBlock, setIsActiveTextBlock] = useState<boolean>(false);
diff --git a/app/frontend/src/javascript/components/form/form-input.tsx b/app/frontend/src/javascript/components/form/form-input.tsx
index ccffd521c..42993f7e1 100644
--- a/app/frontend/src/javascript/components/form/form-input.tsx
+++ b/app/frontend/src/javascript/components/form/form-input.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { FieldPathValue, UseFormGetValues } from 'react-hook-form';
 import { debounce as _debounce } from 'lodash';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
-import { FieldPath } from 'react-hook-form/dist/types/path';
+import { Path, FieldPath } from 'react-hook-form/dist/types/path';
 import { FormComponent } from '../../models/form-component';
 import { AbstractFormItem, AbstractFormItemProps } from './abstract-form-item';
 
@@ -23,7 +23,7 @@ type FormInputProps<TFieldValues, TInputType> = FormComponent<TFieldValues> & Ab
   nullable?: boolean,
   ariaLabel?: string,
   maxLength?: number,
-  getValues?: UseFormGetValues<FieldValues>
+  getValues?: UseFormGetValues<TFieldValues>
 }
 
 /**
@@ -73,7 +73,7 @@ export const FormInput = <TFieldValues extends FieldValues, TInputType>({ id, re
   // If maxLength and getValues is provided, uses input ref to initiate the countdown of characters
   useEffect(() => {
     if (getValues && maxLength) {
-      setCharacterCount(getValues(id).length);
+      setCharacterCount(getValues(id as Path<TFieldValues>).length);
     }
   }, [maxLength, getValues]);