fix(#3560): add precise types to UncontrolledImageInput component for improved type safety

Author: Ciabas

govtool/frontend/src/components/organisms/UncontrolledImageInput.tsx

@@ -1,23 +1,31 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useRef } from "react";
-import { useController } from "react-hook-form";
+import {
+  Control,
+  FieldPath,
+  FieldValues,
+  RegisterOptions,
+  useController,
+} from "react-hook-form";
 import { FormErrorMessage } from "../atoms";
 
-type UncontrolledImageInputProps = {
-  name: string;
-  control: any;
-  rules?: any;
+type UncontrolledImageInputProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+  control: Control<TFieldValues>;
+  rules?: RegisterOptions<TFieldValues, TName>;
   placeholder?: string;
   dataTestId?: string;
 };
 
-export const UncontrolledImageInput = ({
+export const UncontrolledImageInput = <T extends FieldValues>({
   name,
   control,
   rules,
   placeholder,
   dataTestId,
-}: UncontrolledImageInputProps) => {
+}: UncontrolledImageInputProps<T>) => {
   const {
     field: { onChange },
     fieldState,

govtool/frontend/src/consts/dRepActions/fields.ts

@@ -77,6 +77,6 @@ export const Rules = {
       value: IMAGE_REGEX,
       message: i18n.t("registration.fields.validations.image"),
     },
-    validate: (value: string) => isValidImageUrl(value, { optional: true }),
+    validate: (value: unknown) => isValidImageUrl(value, { optional: true }),
   },
 };

govtool/frontend/src/i18n/locales/en.json

@@ -389,7 +389,8 @@
       "tooLongUrl": "Url must be less than 128 bytes",
       "mustBeStakeAddress": "It must be reward address in bech32 format",
       "mustBeReceivingAddress": "Invalid payment address",
-      "couldNotGenerateImageSha": "Could not generate image sha"
+      "couldNotGenerateImageSha": "Could not generate image sha",
+      "invalidValueType": "Invalid value type"
     }
   },
   "proposalDiscussion": {

govtool/frontend/src/utils/isValidFormat.ts

@@ -82,7 +82,10 @@ export async function isDRepView(view?: string) {
   return i18n.t("forms.errors.mustBeDRepView");
 }
 
-export async function isValidImageUrl(url: string, options?: Options) {
+export async function isValidImageUrl(url: unknown, options?: Options) {
+  if (typeof url !== "string") {
+    return i18n.t("forms.errors.invalidValueType");
+  }
   if (options?.optional && !url) return true;
   if (!url.length) return false;