From c4e6abeeba6b08be841f6702d94834429c32e86b Mon Sep 17 00:00:00 2001
From: romashka-dev <romikkbox@gmail.com>
Date: Wed, 1 Jan 2025 21:43:17 +0200
Subject: [PATCH] [fix] Resolve compiling project issues | upd 2

---
 components/ui/CreateJobForm/CreateJobForm.tsx |  21 +++-
 .../ui/FormComponents/FormComponents.tsx      | 112 ++++++++----------
 2 files changed, 65 insertions(+), 68 deletions(-)

diff --git a/components/ui/CreateJobForm/CreateJobForm.tsx b/components/ui/CreateJobForm/CreateJobForm.tsx
index 089e43f..13bdb44 100644
--- a/components/ui/CreateJobForm/CreateJobForm.tsx
+++ b/components/ui/CreateJobForm/CreateJobForm.tsx
@@ -38,21 +38,30 @@ const CreateJobForm = () => {
         <h2 className="capitalize font-semibold text-4xl mb-6">add job</h2>
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 items-start">
           {/* position */}
-          <CustomFormField name="position" control={form.control} />
+          <CustomFormField<CreateAndEditJobType>
+            name="position"
+            control={form.control}
+          />
           {/* company */}
-          <CustomFormField name="company" control={form.control} />
+          <CustomFormField<CreateAndEditJobType>
+            name="company"
+            control={form.control}
+          />
           {/* location */}
-          <CustomFormField name="location" control={form.control} />
+          <CustomFormField<CreateAndEditJobType>
+            name="location"
+            control={form.control}
+          />
 
           {/* job status */}
-          <CustomFormSelect
+          <CustomFormSelect<CreateAndEditJobType>
             name="status"
             control={form.control}
-            labelText="job status"
+            labelText="Job status"
             items={Object.values(JobStatus)}
           />
           {/* job mode */}
-          <CustomFormSelect
+          <CustomFormSelect<CreateAndEditJobType>
             name="mode"
             control={form.control}
             labelText="job mode"
diff --git a/components/ui/FormComponents/FormComponents.tsx b/components/ui/FormComponents/FormComponents.tsx
index 1f07b03..31cc95c 100644
--- a/components/ui/FormComponents/FormComponents.tsx
+++ b/components/ui/FormComponents/FormComponents.tsx
@@ -1,4 +1,4 @@
-import { Control, FieldValues } from 'react-hook-form'
+import { Control, FieldValues, Path } from 'react-hook-form'
 import {
   Select,
   SelectContent,
@@ -15,81 +15,69 @@ import {
 } from '../Form'
 import { Input } from '../Input'
 
-type CustomFormFieldProps = {
-  name: string
-  control: Control<FieldValues>
+type CustomFormFieldProps<T extends FieldValues> = {
+  name: Path<T>
+  control: Control<T>
 }
 
-const CustomFormField = ({ name, control }: CustomFormFieldProps) => {
+const CustomFormField = <T extends FieldValues>({
+  name,
+  control,
+}: CustomFormFieldProps<T>) => {
   return (
-    <>
-      <FormField
-        control={control}
-        name={name}
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel className="capitalize">{name}</FormLabel>
-            <FormControl>
-              <Input {...field} />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </>
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="capitalize">{name}</FormLabel>
+          <FormControl>
+            <Input {...field} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
   )
 }
 
-type CustomFormSelectProps = {
-  name: string
-  control: Control<FieldValues>
-  items: string[]
+type CustomFormSelectProps<T extends FieldValues> = {
+  name: Path<T>
+  control: Control<T>
+  items: Array<string>
   labelText?: string
 }
 
-const CustomFormSelect = ({
+const CustomFormSelect = <T extends FieldValues>({
   name,
   control,
   items,
   labelText,
-}: CustomFormSelectProps) => {
+}: CustomFormSelectProps<T>) => {
   return (
-    <>
-      <FormField
-        control={control}
-        name={name}
-        render={({ field }) => {
-          return (
-            <>
-              <FormItem>
-                <FormLabel className="capitalize">
-                  {labelText || name}
-                </FormLabel>
-                <Select
-                  onValueChange={field.onChange}
-                  defaultValue={field.value}
-                >
-                  <FormControl>
-                    <SelectTrigger>
-                      <SelectValue />
-                    </SelectTrigger>
-                  </FormControl>
-                  <SelectContent>
-                    {items.map((item) => {
-                      return (
-                        <SelectItem key={item} value={item}>
-                          {item}
-                        </SelectItem>
-                      )
-                    })}
-                  </SelectContent>
-                </Select>
-              </FormItem>
-            </>
-          )
-        }}
-      ></FormField>
-    </>
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="capitalize">{labelText || name}</FormLabel>
+          <Select onValueChange={field.onChange} defaultValue={field.value}>
+            <FormControl>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              {items.map((item) => (
+                <SelectItem key={item} value={item}>
+                  {item}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </FormItem>
+      )}
+    />
   )
 }