refactor: fix forwardRef, add type and improve props

Author: DavideTarditi

apps/app/app/(admin)/categories/view.tsx

@@ -27,6 +27,7 @@ import { CategoryDialog } from '@/components/dialog/CategoryDialog'
 import { SubcategoryDialog } from '@/components/dialog/SubcategoryDialog'
 import { useCategory } from '@/hooks/useCategory'
 import { CategoryItem } from '@/components/item/CategoryItem'
+import Divider from '@/components/other/Divider'
 
 export default function CategoryView() {
     const t = useTranslations()
@@ -167,7 +168,7 @@ export default function CategoryView() {
                                         </a>
                                         {localCategoryList.length > 0 && (
                                             <>
-                                                <hr />
+                                                <Divider></Divider>
                                                 <a
                                                     className='flex items-center space-x-2 w-full'
                                                     onClick={() => openNew('subcategory')}

apps/app/app/(admin)/transactions/view.tsx

@@ -30,6 +30,7 @@ import { IFilterOptions, ITransaction } from '@poveroh/types'
 
 import { isEmpty } from 'lodash'
 import { Popover, PopoverContent, PopoverTrigger } from '@poveroh/ui/components/popover'
+import Divider from '@/components/other/Divider'
 
 export default function TransactionsView() {
     const t = useTranslations()
@@ -151,7 +152,7 @@ export default function TransactionsView() {
                                             <Upload />
                                             <p>{t('buttons.add.import')}</p>
                                         </a>
-                                        <hr />
+                                        <Divider />
                                         <a
                                             className='flex items-center space-x-2 w-full'
                                             onClick={() => {
@@ -228,7 +229,7 @@ export default function TransactionsView() {
                                 </div>
                                 {(bankAccountCacheList.length == 0 || categoryCacheList.length == 0) && (
                                     <>
-                                        <hr className='w-full' />
+                                        <Divider />
                                         <div className='flex flex-col items-center space-y-8 justify-center'>
                                             <div className='flex flex-col items-center space-y-2 justify-center'>
                                                 <p className='warning'>{t('messages.noCategoriesAndAccountTitle')}</p>

apps/app/components/filter/FilterButton.tsx

@@ -8,6 +8,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { ListFilter } from 'lucide-react'
 import { useTranslations } from 'next-intl'
 import { FilterField } from '@poveroh/types'
+import Divider from '../other/Divider'
 
 type FilterButtonProps<T extends Record<string, any>> = {
     fields: FilterField[]
@@ -68,7 +69,7 @@ export function FilterButton<T extends Record<string, any>>({ fields, filters, o
                                 />
                             )}
 
-                            {fields.length - 1 !== index && <hr />}
+                            {fields.length - 1 !== index && <Divider />}
                         </div>
                     ))}
                 </div>

apps/app/components/form/BankAccountForm.tsx

@@ -6,7 +6,7 @@ import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useTranslations } from 'next-intl'
 
-import { BankAccountType, IBankAccount, IItem } from '@poveroh/types'
+import { BankAccountType, FormRef, IBankAccount, IItem } from '@poveroh/types'
 
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@poveroh/ui/components/form'
 import { Input } from '@poveroh/ui/components/input'
@@ -26,9 +26,11 @@ type FormProps = {
     closeDialog: () => void
 }
 
-export const BankAccountForm = forwardRef(({ initialData, inEditingMode, dataCallback }: FormProps, ref) => {
+export const BankAccountForm = forwardRef<FormRef, FormProps>((props: FormProps, ref) => {
     const t = useTranslations()
 
+    const { initialData, inEditingMode, dataCallback } = props
+
     const { getTypeList } = useBankAccount()
     const { handleError } = useError()
 

apps/app/components/form/CategoryForm.tsx

@@ -6,7 +6,7 @@ import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useTranslations } from 'next-intl'
 
-import { ICategory, IItem } from '@poveroh/types'
+import { FormRef, ICategory, IItem } from '@poveroh/types'
 
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@poveroh/ui/components/form'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@poveroh/ui/components/select'
@@ -26,8 +26,11 @@ type FormProps = {
     closeDialog: () => void
 }
 
-export const CategoryForm = forwardRef(({ initialData, inEditingMode, dataCallback }: FormProps, ref) => {
+export const CategoryForm = forwardRef<FormRef, FormProps>((props: FormProps, ref) => {
     const t = useTranslations()
+
+    const { initialData, inEditingMode, dataCallback } = props
+
     const { handleError } = useError()
     const { getActionList } = useTransaction()
 

apps/app/components/form/SubcategoryForm.tsx

@@ -6,7 +6,7 @@ import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useTranslations } from 'next-intl'
 
-import { ICategory, ISubcategory, TransactionAction } from '@poveroh/types'
+import { FormRef, ICategory, ISubcategory, TransactionAction } from '@poveroh/types'
 
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@poveroh/ui/components/form'
 import {
@@ -33,8 +33,11 @@ type FormProps = {
     closeDialog: () => void
 }
 
-export const SubcategoryForm = forwardRef(({ initialData, inEditingMode, dataCallback }: FormProps, ref) => {
+export const SubcategoryForm = forwardRef<FormRef, FormProps>((props: FormProps, ref) => {
     const t = useTranslations()
+
+    const { initialData, inEditingMode, dataCallback } = props
+
     const { handleError } = useError()
 
     const { categoryCacheList } = useCategory()